feat: implement add item form with image upload and server-side validation

myfavstuff/app/add-item/actions.js

@@ -6,16 +6,54 @@ import { revalidatePath } from 'next/cache';
 import { redirect } from 'next/navigation';
 
 export async function createItem(formData) {
+  const BUCKET_NAME = 'item_images';
   if (!supabase) {
     return { error: 'Supabase client is not initialized. Cannot create item.' };
   }
 
+    const pictureFile = formData.get('picture_file');
+  let pictureUrl = null;
+
+  if (pictureFile && pictureFile.size > 0) {
+    if (!supabase.storage) {
+      return { error: 'Supabase storage client is not available.' };
+    }
+    const fileName = `public/${Date.now()}-${pictureFile.name.replace(/[^a-zA-Z0-9.]/g, '_')}`;
+    const { data: uploadData, error: uploadError } = await supabase.storage
+      .from(BUCKET_NAME)
+      .upload(fileName, pictureFile);
+
+    if (uploadError) {
+      console.error('Supabase storage upload error:', uploadError);
+      return { error: `Failed to upload image: ${uploadError.message}` };
+    }
+
+    const { data: publicUrlData } = supabase.storage
+      .from(BUCKET_NAME)
+      .getPublicUrl(fileName);
+
+    if (!publicUrlData || !publicUrlData.publicUrl) {
+      console.error('Supabase storage getPublicUrl error: No publicUrl found');
+      // Optionally, you might want to delete the uploaded file here if getting URL fails
+      // await supabase.storage.from(BUCKET_NAME).remove([fileName]);
+      return { error: 'Failed to get image public URL after upload.' };
+    }
+    pictureUrl = publicUrlData.publicUrl;
+  } else {
+    // Handle case where no file is uploaded but form still has 'picture_url' field (e.g. from old version)
+    // Or simply rely on pictureUrl being null if no file is chosen.
+    const legacyPictureUrl = formData.get('picture_url');
+    if (legacyPictureUrl && typeof legacyPictureUrl === 'string' && legacyPictureUrl.startsWith('http')) {
+      pictureUrl = legacyPictureUrl; // Keep old URL if provided and no new file
+    }
+  }
+
   const newItem = {
     title: formData.get('title'),
     type: formData.get('type'),
     rating: formData.get('rating') ? parseInt(formData.get('rating'), 10) : null,
     notes: formData.get('notes'),
-    picture_url: formData.get('picture_url'),
+    picture_url: pictureUrl,
     // created_at will be set by default in Supabase or can be added here if needed
   };
 

myfavstuff/app/add-item/page.js

@@ -98,13 +98,13 @@ export default function AddItemPage() {
         </div>
 
         <div>
-          <label htmlFor="picture_url" className="block text-sm font-medium text-neutral-300 mb-1">Picture URL</label>
+          <label htmlFor="picture_file" className="block text-sm font-medium text-neutral-300 mb-1">Picture</label>
           <input
-            type="url"
+            type="file"
-            name="picture_url"
+            name="picture_file" 
-            id="picture_url"
+            id="picture_file"
-            className="block w-full bg-neutral-700 border-neutral-600 rounded-md shadow-sm py-2 px-3 text-neutral-100 focus:ring-sky-500 focus:border-sky-500 sm:text-sm"
+            accept="image/*"
-            placeholder="https://example.com/image.jpg"
+            className="block w-full text-sm text-neutral-400 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-sky-100 file:text-sky-700 hover:file:bg-sky-200 focus:outline-none focus:ring-2 focus:ring-sky-500 focus:border-sky-500"
           />
         </div>