Fix wallpaper upload in event update - Unified wallpaper handling with event creation, added proper file management

backend/src/index.ts

@@ -311,7 +311,7 @@ app.put('/api/events/:slug/rsvps/:id', async (req: Request, res: Response) => {
 });
 
 // Update event
-app.put('/api/events/:slug', async (req: Request, res: Response) => {
+app.put('/api/events/:slug', upload.single('wallpaper'), async (req: MulterRequest, res: Response) => {
   try {
     const { slug } = req.params;
     const { title, description, date, location, needed_items, rsvp_cutoff_date } = req.body;
@@ -334,10 +334,25 @@ app.put('/api/events/:slug', async (req: Request, res: Response) => {
     } catch (e) {
       console.error('Error parsing needed_items:', e);
     }
+
+    // Handle wallpaper update
+    let wallpaperPath = eventRows[0].wallpaper;
+    if (req.file) {
+      // If there's an existing wallpaper, delete it
+      if (eventRows[0].wallpaper) {
+        const oldWallpaperPath = path.join(uploadDir, eventRows[0].wallpaper);
+        try {
+          await fs.promises.unlink(oldWallpaperPath);
+        } catch (e) {
+          console.error('Error deleting old wallpaper:', e);
+        }
+      }
+      wallpaperPath = req.file.filename;
+    }
     
     // Update the event
     await db.run(
-      'UPDATE events SET title = ?, description = ?, date = ?, location = ?, needed_items = ?, rsvp_cutoff_date = ? WHERE slug = ?',
+      'UPDATE events SET title = ?, description = ?, date = ?, location = ?, needed_items = ?, rsvp_cutoff_date = ?, wallpaper = ? WHERE slug = ?',
       [
         title ?? eventRows[0].title,
         description === undefined ? eventRows[0].description : description,
@@ -345,6 +360,7 @@ app.put('/api/events/:slug', async (req: Request, res: Response) => {
         location ?? eventRows[0].location,
         JSON.stringify(parsedNeededItems),
         rsvp_cutoff_date !== undefined ? rsvp_cutoff_date : eventRows[0].rsvp_cutoff_date,
+        wallpaperPath,
         slug
       ]
     );
@@ -364,10 +380,16 @@ app.put('/api/events/:slug', async (req: Request, res: Response) => {
       console.error('Error parsing needed_items in response:', e);
       updatedEvent.needed_items = [];
     }
-
+    
     res.json(updatedEvent);
   } catch (error) {
     console.error('Error updating event:', error);
+    // Clean up uploaded file if there was an error
+    if (req.file) {
+      fs.unlink(req.file.path, (err) => {
+        if (err) console.error('Error deleting file:', err);
+      });
+    }
     res.status(500).json({ error: 'Internal server error' });
   }
 });

frontend/src/components/EventAdmin.tsx

@@ -389,29 +389,24 @@ const EventAdmin: React.FC = () => {
     if (!event) return;
     
     try {
-      let updatedWallpaper = event.wallpaper;
-
-      // Handle wallpaper upload if a new file was selected
+      // Create FormData and append all fields
+      const formData = new FormData();
+      formData.append('description', updateForm.description);
+      formData.append('location', updateForm.location);
+      formData.append('date', updateForm.date);
+      formData.append('rsvp_cutoff_date', updateForm.rsvp_cutoff_date);
+      formData.append('title', event.title); // Keep existing title
+      formData.append('needed_items', JSON.stringify(event.needed_items)); // Keep existing needed items
+      
+      // Append wallpaper if a new one was selected
       if (updateForm.wallpaper) {
-        const formData = new FormData();
         formData.append('wallpaper', updateForm.wallpaper);
-        
-        const uploadResponse = await axios.post(`/api/upload/wallpaper`, formData, {
-          headers: {
-            'Content-Type': 'multipart/form-data',
-          },
-        });
-        
-        updatedWallpaper = uploadResponse.data.path;
       }
       
-      await axios.put(`/api/events/${slug}`, {
-        ...event,
-        description: updateForm.description,
-        location: updateForm.location,
-        date: updateForm.date,
-        rsvp_cutoff_date: updateForm.rsvp_cutoff_date,
-        wallpaper: updatedWallpaper
+      const response = await axios.put(`/api/events/${slug}`, formData, {
+        headers: {
+          'Content-Type': 'multipart/form-data',
+        },
       });
       
       setEvent(prev => prev ? {
@@ -420,11 +415,12 @@ const EventAdmin: React.FC = () => {
         location: updateForm.location,
         date: updateForm.date,
         rsvp_cutoff_date: updateForm.rsvp_cutoff_date,
-        wallpaper: updatedWallpaper
+        wallpaper: response.data.wallpaper || prev.wallpaper
       } : null);
       
       setUpdateInfoDialogOpen(false);
     } catch (error) {
+      console.error('Error updating event:', error);
       setError('Failed to update event information');
     }
   };
@@ -945,7 +941,7 @@ const EventAdmin: React.FC = () => {
                   <input
                     type="file"
                     hidden
-                    accept="image/*"
+                    accept="image/jpeg,image/png,image/gif"
                     onChange={handleWallpaperChange}
                   />
                 </Button>