Added drag n drop to upload images

macterra · Nov 25, 2023 · 0c544f4 · 0c544f4
1 parent 8f59a94
commit 0c544f4
Show file tree

Hide file tree

Showing 4 changed files with 128 additions and 46 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -12,6 +12,7 @@
     "qrcode.react": "^3.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-dropzone": "^14.2.3",
     "react-router-dom": "^6.11.2",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"

diff --git a/frontend/src/App.css b/frontend/src/App.css
@@ -1,73 +1,89 @@
 .App {
-  display: flex;
-  flex-direction: column;
-  min-height: 100vh;
-  background-color: #282c34;
-  font-size: calc(10px + 2vmin);
-  color: white;
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+    background-color: #282c34;
+    font-size: calc(10px + 2vmin);
+    color: white;
 }
 
 .App-header {
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-start;
-  background-color: #144272;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    background-color: #144272;
 }
 
 .App-content {
-  flex: 1;
-  overflow-y: auto;
-  background-color: #0A2647;
+    flex: 1;
+    overflow-y: auto;
+    background-color: #0A2647;
 }
 
 .App-footer {
-  position: fixed;
-  bottom: 0;
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  background-color: #205295;
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    background-color: #205295;
 }
 
 .App-link {
-  color: #61dafb;
+    color: #61dafb;
 }
 
 a {
-  color: white;
-  /* Change this to the desired color for all Link tags */
-  text-decoration: none;
-  /* Optional: remove underline from links */
+    color: white;
+    /* Change this to the desired color for all Link tags */
+    text-decoration: none;
+    /* Optional: remove underline from links */
 }
 
 a:hover {
-  color: #2C74B3;
-  /* Change this to the desired color for all Link tags on hover */
-  text-decoration: underline;
-  /* Optional: add underline on hover */
+    color: #2C74B3;
+    /* Change this to the desired color for all Link tags on hover */
+    text-decoration: underline;
+    /* Optional: add underline on hover */
 }
 
 .container {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  width: 100%;
-  flex-wrap: wrap;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    width: 100%;
+    flex-wrap: wrap;
 }
 
 .left-pane,
 .right-pane {
-  width: 50%;
-  padding: 16px;
-  box-sizing: border-box;
+    width: 50%;
+    padding: 16px;
+    box-sizing: border-box;
 }
 
 /* Media query for screens narrower than 768px */
 @media (max-width: 767px) {
 
-  .left-pane,
-  .right-pane {
-    width: 100%;
-  }
+    .left-pane,
+    .right-pane {
+        width: 100%;
+    }
+}
+
+.dropzone {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 300px;
+    width: 300px;
+    border: 2px dashed #aaa;
+    border-radius: 5px;
+    transition: border 0.3s ease-in-out;
+    padding: 20px;
+}
+
+.dropzone.active {
+    border-color: #4481eb;
 }
diff --git a/frontend/src/CollectionView.js b/frontend/src/CollectionView.js
@@ -2,6 +2,7 @@
 import React, { useState, useEffect } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
 import axios from 'axios';
+import { useDropzone } from 'react-dropzone';
 import { Box, Button, Grid, Modal } from '@mui/material';
 import ImageGrid from './ImageGrid';
 import AgentBadge from './AgentBadge';
@@ -120,6 +121,16 @@ const CollectionView = () => {
         await uploadFiles(formData);
     };
 
+    const handleDrop = async (files) => {
+        const formData = new FormData();
+
+        for (const file of files) {
+            formData.append('images', file);
+        }
+
+        await uploadFiles(formData);
+    };
+
     const handleMintAllClick = async () => {
         setDisableMintAll(true);
 
@@ -176,6 +187,26 @@ const CollectionView = () => {
         );
     };
 
+    const FileUploadDropzone = () => {
+        const { getRootProps, getInputProps, isDragActive } = useDropzone({
+            onDrop: handleDrop,
+            accept: 'image/*',
+            multiple: true,
+            disabled: disableUpload
+        });
+
+        return (
+            <div {...getRootProps()} className={`${isDragActive ? 'dropzone active' : 'dropzone'}`}>
+                <input {...getInputProps()} />
+                {
+                    isDragActive ?
+                        <p>Drop the images here ...</p> :
+                        <p>Copy/Paste or Drag 'n' Drop some images here, or click to select files</p>
+                }
+            </div>
+        );
+    };
+
     return (
         <>
             <Box>
@@ -223,20 +254,18 @@ const CollectionView = () => {
                 <div style={{
                     backgroundColor: '#282c34',
                     padding: '1em',
-                    width: '600px',
-                    height: '600px',
+                    width: '400px',
+                    height: '400px',
                     overflow: 'auto',
                     display: 'flex',
                     flexDirection: 'column',
                     alignItems: 'center',
                     justifyContent: 'center'
                 }}>
                     <FileUploadByPaste />
-                    <p>Upload Images</p>
-                    <p>You can copy/paste files here</p>
+                    <FileUploadDropzone />
                     <p style={{ fontSize: '14px' }}>You have {credits} credits, enough to upload {budget} MB.</p>
 
-
                     <input
                         id="file-upload"
                         type="file"