s3

frontend/src/pages/Profile.tsx

@@ -3,7 +3,7 @@ import { useNavigate } from "react-router-dom";
 import { useAuth } from "../contexts/AuthContext";
 import { userAPI, itemAPI, rentalAPI, addressAPI } from "../services/api";
 import { User, Item, Rental, Address } from "../types";
-import { getImageUrl } from "../utils/imageUrl";
+import { uploadFile, getPublicImageUrl } from "../services/uploadService";
 import AvailabilitySettings from "../components/AvailabilitySettings";
 import ReviewItemModal from "../components/ReviewModal";
 import ReviewRenterModal from "../components/ReviewRenterModal";
@@ -161,7 +161,7 @@ const Profile: React.FC = () => {
           response.data.itemRequestNotificationRadius || 10,
       });
       if (response.data.imageFilename) {
-        setImagePreview(getImageUrl(response.data.imageFilename));
+        setImagePreview(getPublicImageUrl(response.data.imageFilename));
       }
     } catch (err: any) {
       setError(err.response?.data?.message || "Failed to fetch profile");
@@ -301,29 +301,26 @@ const Profile: React.FC = () => {
       };
       reader.readAsDataURL(file);
 
-      // Upload image immediately
+      // Upload image to S3
       try {
-        const formData = new FormData();
-        formData.append("imageFilename", file);
+        const { key, publicUrl } = await uploadFile("profile", file);
 
-        const response = await userAPI.uploadProfileImage(formData);
-
-        // Update the imageFilename in formData with the new filename
+        // Update the imageFilename in formData with the S3 key
         setFormData((prev) => ({
           ...prev,
-          imageFilename: response.data.filename,
+          imageFilename: key,
         }));
 
-        // Update preview to use the uploaded image URL
-        setImagePreview(getImageUrl(response.data.imageUrl));
+        // Update preview to use the S3 URL
+        setImagePreview(publicUrl);
       } catch (err: any) {
         console.error("Image upload error:", err);
-        setError(err.response?.data?.error || "Failed to upload image");
+        setError(err.message || "Failed to upload image");
         // Reset on error
         setImageFile(null);
         setImagePreview(
           profileData?.imageFilename
-            ? getImageUrl(profileData.imageFilename)
+            ? getPublicImageUrl(profileData.imageFilename)
             : null
         );
       }
@@ -384,7 +381,7 @@ const Profile: React.FC = () => {
           profileData.itemRequestNotificationRadius || 10,
       });
       setImagePreview(
-        profileData.imageFilename ? getImageUrl(profileData.imageFilename) : null
+        profileData.imageFilename ? getPublicImageUrl(profileData.imageFilename) : null
       );
     }
   };
@@ -1224,7 +1221,7 @@ const Profile: React.FC = () => {
                             <div className="card h-100">
                               {rental.item?.imageFilenames && rental.item.imageFilenames[0] && (
                                 <img
-                                  src={rental.item.imageFilenames[0]}
+                                  src={getPublicImageUrl(rental.item.imageFilenames[0])}
                                   className="card-img-top"
                                   alt={rental.item.name}
                                   style={{
@@ -1361,7 +1358,7 @@ const Profile: React.FC = () => {
                             <div className="card h-100">
                               {rental.item?.imageFilenames && rental.item.imageFilenames[0] && (
                                 <img
-                                  src={rental.item.imageFilenames[0]}
+                                  src={getPublicImageUrl(rental.item.imageFilenames[0])}
                                   className="card-img-top"
                                   alt={rental.item.name}
                                   style={{