Jackie/rentall-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

image optimization. Image resizing client side, index added to db, pagination

Browse Source
This commit is contained in:
jackiettran
2025-12-30 20:23:32 -05:00
parent 3e31b9d08b
commit 807082eebf
25 changed files with 587 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
frontend/src/pages/EditItem.tsx
View File

@@ -3,7 +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 { uploadImagesWithVariants, getImageUrl } from "../services/uploadService";
import AvailabilitySettings from "../components/AvailabilitySettings";
import ImageUpload from "../components/ImageUpload";
import ItemInformation from "../components/ItemInformation";
@@ -161,8 +161,8 @@ const EditItem: React.FC = () => {
// Set existing images - store S3 keys and generate preview URLs
if (item.imageFilenames && item.imageFilenames.length > 0) {
setExistingImageKeys(item.imageFilenames);
// Generate preview URLs from S3 keys
setImagePreviews(item.imageFilenames.map((key: string) => getPublicImageUrl(key)));
// Generate preview URLs from S3 keys (use thumbnail for previews)
setImagePreviews(item.imageFilenames.map((key: string) => getImageUrl(key, 'thumbnail')));
}
// Determine which pricing unit to select based on existing data
@@ -315,11 +315,11 @@ const EditItem: React.FC = () => {
}
try {
// Upload new images to S3 and get their keys
// Upload new images to S3 and get their keys (with resizing)
let newImageKeys: string[] = [];
if (imageFiles.length > 0) {
const uploadResults = await uploadFiles("item", imageFiles);
newImageKeys = uploadResults.map((result) => result.key);
const uploadResults = await uploadImagesWithVariants("item", imageFiles);
newImageKeys = uploadResults.map((result) => result.baseKey);
}
// Combine existing S3 keys with newly uploaded keys