s3

frontend/src/pages/CreateItem.tsx

@@ -2,6 +2,7 @@ import React, { useState, useEffect, useRef } from "react";
 import { useNavigate } from "react-router-dom";
 import { useAuth } from "../contexts/AuthContext";
 import api, { addressAPI, userAPI, itemAPI } from "../services/api";
+import { uploadFiles } from "../services/uploadService";
 import AvailabilitySettings from "../components/AvailabilitySettings";
 import ImageUpload from "../components/ImageUpload";
 import ItemInformation from "../components/ItemInformation";
@@ -175,9 +176,12 @@ const CreateItem: React.FC = () => {
     }
 
     try {
-      // For now, we'll store image URLs as base64 strings
-      // In production, you'd upload to a service like S3
-      const imageUrls = imagePreviews;
+      // Upload images to S3 first
+      let imageFilenames: string[] = [];
+      if (imageFiles.length > 0) {
+        const uploadResults = await uploadFiles("item", imageFiles);
+        imageFilenames = uploadResults.map((result) => result.key);
+      }
 
       // Construct location from address components
       const locationParts = [
@@ -216,7 +220,7 @@ const CreateItem: React.FC = () => {
         specifyTimesPerDay: formData.specifyTimesPerDay,
         weeklyTimes: formData.weeklyTimes,
         location,
-        images: imageUrls,
+        imageFilenames,
       });
 
       // Auto-save address if user has no addresses and entered manual address
@@ -260,7 +264,7 @@ const CreateItem: React.FC = () => {
 
       navigate(`/items/${response.data.id}`);
     } catch (err: any) {
-      setError(err.response?.data?.error || "Failed to create listing");
+      setError(err.response?.data?.error || err.message || "Failed to create listing");
     } finally {
       setLoading(false);
     }