diff --git a/myfavstuff/app/add-item/actions.js b/myfavstuff/app/add-item/actions.js
index d0e591e..daef770 100644
--- a/myfavstuff/app/add-item/actions.js
+++ b/myfavstuff/app/add-item/actions.js
@@ -6,54 +6,19 @@ 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
- }
- }
+
+ // The picture_url is now received directly from the client
+ // after client-side upload to Supabase Storage
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: pictureUrl,
+ picture_url: formData.get('picture_url'),
// created_at will be set by default in Supabase or can be added here if needed
};
diff --git a/myfavstuff/app/add-item/page.js b/myfavstuff/app/add-item/page.js
index 0f9428c..81124fc 100644
--- a/myfavstuff/app/add-item/page.js
+++ b/myfavstuff/app/add-item/page.js
@@ -1,9 +1,10 @@
// app/add-item/page.js
'use client';
-import { useState, useTransition } from 'react';
+import { useState, useTransition, useRef } from 'react';
import { createItem } from './actions'; // Server Action
import { useRouter } from 'next/navigation';
+import { supabase } from '@/lib/supabaseClient';
export default function AddItemPage() {
const router = useRouter();
@@ -11,24 +12,81 @@ export default function AddItemPage() {
const [error, setError] = useState(null);
const [successMessage, setSuccessMessage] = useState('');
+ const [isUploading, setIsUploading] = useState(false);
+ const formRef = useRef(null);
+
const handleSubmit = async (event) => {
event.preventDefault();
setError(null);
setSuccessMessage('');
- const formData = new FormData(event.currentTarget);
+ setIsUploading(true);
+
+ try {
+ const formData = new FormData(event.currentTarget);
+ const pictureFile = formData.get('picture_file');
+ let pictureUrl = null;
- startTransition(async () => {
- const result = await createItem(formData);
- if (result.error) {
- setError(result.error);
- } else if (result.success) {
- setSuccessMessage(result.message);
- // Optionally clear the form or redirect
- event.target.reset(); // Clear form fields
- // router.push('/'); // Or redirect to homepage after a delay
- setTimeout(() => router.push('/'), 1500); // Redirect after 1.5s
+ // Handle image upload directly from client if a file is selected
+ if (pictureFile && pictureFile.size > 0) {
+ // Upload to Supabase Storage directly from client
+ const BUCKET_NAME = 'item_images';
+ 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) {
+ throw new Error(`Failed to upload image: ${uploadError.message}`);
+ }
+
+ const { data: publicUrlData } = supabase.storage
+ .from(BUCKET_NAME)
+ .getPublicUrl(fileName);
+
+ if (!publicUrlData || !publicUrlData.publicUrl) {
+ throw new Error('Failed to get image public URL after upload.');
+ }
+
+ pictureUrl = publicUrlData.publicUrl;
}
- });
+
+ // Create a new FormData without the file to reduce payload size
+ const serverFormData = new FormData();
+ serverFormData.append('title', formData.get('title'));
+ serverFormData.append('type', formData.get('type'));
+
+ if (formData.get('rating')) {
+ serverFormData.append('rating', formData.get('rating'));
+ }
+
+ if (formData.get('notes')) {
+ serverFormData.append('notes', formData.get('notes'));
+ }
+
+ // Send the image URL instead of the file
+ if (pictureUrl) {
+ serverFormData.append('picture_url', pictureUrl);
+ }
+
+ // Call server action with the form data (minus the image file)
+ startTransition(async () => {
+ const result = await createItem(serverFormData);
+ if (result.error) {
+ setError(result.error);
+ } else if (result.success) {
+ setSuccessMessage(result.message);
+ // Clear form fields
+ formRef.current.reset();
+ // Redirect after a delay
+ setTimeout(() => router.push('/'), 1500);
+ }
+ });
+ } catch (err) {
+ setError(err.message);
+ } finally {
+ setIsUploading(false);
+ }
};
return (
@@ -53,7 +111,7 @@ export default function AddItemPage() {
)}
-