Merge pull request #21 from ubclaunchpad/SarahWang/upload-photo-changes

Sarah wang/upload photo changes
ubclaunchpad · Jan 31, 2025 · 7ddebfe · 7ddebfe
2 parents 8d55f48 + 5fd8958
commit 7ddebfe
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 23 deletions.
diff --git a/frontend/src/components/UploadPhoto/PreviewSection.jsx b/frontend/src/components/UploadPhoto/PreviewSection.jsx
@@ -1,7 +1,5 @@
-import { useState } from "react";
 import {
   ChevronDoubleRightIcon,
-  PencilSquareIcon,
 } from "@heroicons/react/24/solid";
 import "./PreviewSection.css";
 
@@ -11,12 +9,6 @@ export default function PreviewSection({
   handlePreviewClick,
   handleTranscribe,
 }) {
-  const [isEditing, setIsEditing] = useState(false);
-
-  /** Toggle edit mode */
-  const handleEdit = () => {
-    setIsEditing((prev) => !prev);
-  };
 
   /** Handle image deletion */
   const handleDeleteImage = (timestampToDelete) => {
@@ -40,13 +32,6 @@ export default function PreviewSection({
           <ChevronDoubleRightIcon className="preview-section-icon" />
           <span>Preview</span>
         </button>
-        <button
-          className={`edit-button ${isEditing ? "active" : ""}`}
-          onClick={handleEdit}
-        >
-          <PencilSquareIcon className="edit-icon" />
-          <span>Edit</span>
-        </button>
       </div>
 
       <div className="preview-list">
@@ -57,14 +42,12 @@ export default function PreviewSection({
               alt={`Preview ${index + 1}`}
               className="preview-image"
             />
-            {isEditing && (
               <button
                 className="delete-button"
                 onClick={() => handleDeleteImage(fileData.timestamp)}
               >
                 ×
               </button>
-            )}
           </div>
         ))}
       </div>

diff --git a/frontend/src/pages/upload_photo/UploadPhoto.jsx b/frontend/src/pages/upload_photo/UploadPhoto.jsx
@@ -66,16 +66,26 @@ function MainContent({ files, setFiles, handleTranscribe }) {
   /** Handle files from input or drop */
   const handleFiles = (newFiles) => {
     const filesArray = Array.from(newFiles);
-
-    const filesWithPreview = filesArray.map((file) => {
-      return {
+
+    setFiles((prevFiles) => {
+      // Check if the new total would exceed the limit
+      const totalFiles = prevFiles.length + filesArray.length;
+
+      if (totalFiles > 2) {
+        alert("You can only upload up to 2 files.");
+        return prevFiles; // Return the current state without changes
+      }
+
+      // Process the new files
+      const filesWithPreview = filesArray.map((file) => ({
         file: file, // Store the actual File object
         timestamp: Date.now(),
         preview: URL.createObjectURL(file),
-      };
+      }));
+
+      return [...prevFiles, ...filesWithPreview]; // Append new files
     });
-    setFiles((prev) => [...filesWithPreview, ...prev]); // Add new files to beginning
-  };
+  };  
 
   /** Toggle preview visibility */
   const handlePreviewClick = () => {