s3

frontend/src/pages/EditItem.tsx

@@ -3,6 +3,7 @@ import { useParams, useNavigate } from "react-router-dom";
 import { Item, Rental, Address } from "../types";
 import { useAuth } from "../contexts/AuthContext";
 import { itemAPI, rentalAPI, addressAPI, userAPI } from "../services/api";
+import { uploadFiles, getPublicImageUrl } from "../services/uploadService";
 import AvailabilitySettings from "../components/AvailabilitySettings";
 import ImageUpload from "../components/ImageUpload";
 import ItemInformation from "../components/ItemInformation";
@@ -53,6 +54,7 @@ const EditItem: React.FC = () => {
   const [success, setSuccess] = useState(false);
   const [imageFiles, setImageFiles] = useState<File[]>([]);
   const [imagePreviews, setImagePreviews] = useState<string[]>([]);
+  const [existingImageKeys, setExistingImageKeys] = useState<string[]>([]); // S3 keys for existing images
   const [acceptedRentals, setAcceptedRentals] = useState<Rental[]>([]);
   const [userAddresses, setUserAddresses] = useState<Address[]>([]);
   const [selectedAddressId, setSelectedAddressId] = useState<string>("");
@@ -161,9 +163,11 @@ const EditItem: React.FC = () => {
         },
       });
 
-      // Set existing images as previews
+      // Set existing images - store S3 keys and generate preview URLs
       if (item.imageFilenames && item.imageFilenames.length > 0) {
-        setImagePreviews(item.imageFilenames);
+        setExistingImageKeys(item.imageFilenames);
+        // Generate preview URLs from S3 keys
+        setImagePreviews(item.imageFilenames.map((key: string) => getPublicImageUrl(key)));
       }
 
       // Determine which pricing unit to select based on existing data
@@ -270,8 +274,15 @@ const EditItem: React.FC = () => {
     }
 
     try {
-      // Use existing image previews (which includes both old and new images)
-      const imageUrls = imagePreviews;
+      // Upload new images to S3 and get their keys
+      let newImageKeys: string[] = [];
+      if (imageFiles.length > 0) {
+        const uploadResults = await uploadFiles("item", imageFiles);
+        newImageKeys = uploadResults.map((result) => result.key);
+      }
+
+      // Combine existing S3 keys with newly uploaded keys
+      const allImageKeys = [...existingImageKeys, ...newImageKeys];
 
       const updatePayload = {
         ...formData,
@@ -297,7 +308,7 @@ const EditItem: React.FC = () => {
         availableBefore: formData.generalAvailableBefore,
         specifyTimesPerDay: formData.specifyTimesPerDay,
         weeklyTimes: formData.weeklyTimes,
-        images: imageUrls,
+        imageFilenames: allImageKeys,
       };
 
       await itemAPI.updateItem(id!, updatePayload);
@@ -328,7 +339,7 @@ const EditItem: React.FC = () => {
         navigate(`/items/${id}`);
       }, 1500);
     } catch (err: any) {
-      setError(err.response?.data?.message || "Failed to update item");
+      setError(err.response?.data?.message || err.message || "Failed to update item");
     }
   };
 
@@ -355,6 +366,16 @@ const EditItem: React.FC = () => {
   };
 
   const removeImage = (index: number) => {
+    // Check if removing an existing image or a new upload
+    if (index < existingImageKeys.length) {
+      // Removing an existing S3 image
+      setExistingImageKeys((prev) => prev.filter((_, i) => i !== index));
+    } else {
+      // Removing a new upload - adjust index for the imageFiles array
+      const newFileIndex = index - existingImageKeys.length;
+      setImageFiles((prev) => prev.filter((_, i) => i !== newFileIndex));
+    }
+    // Always update previews
     setImagePreviews((prev) => prev.filter((_, i) => i !== index));
   };