Improved upload feedback

macterra · Dec 9, 2023 · f4a32b2 · f4a32b2
1 parent d55c04b
commit f4a32b2
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 19 deletions.
diff --git a/frontend/src/CollectionView.js b/frontend/src/CollectionView.js
@@ -20,6 +20,8 @@ const CollectionView = () => {
     const [disableMintAll, setDisableMintAll] = useState(null);
     const [budget, setBudget] = useState(0);
     const [modalOpen, setModalOpen] = useState(false);
+    const [uploadResults, setUploadResults] = useState(null);
+    const [uploadWarnings, setUploadWarnings] = useState(null);
 
     useEffect(() => {
         const fetchCollection = async () => {
@@ -66,33 +68,39 @@ const CollectionView = () => {
         try {
             const response = await axios.post(`/api/v1/collections/${collection.xid}/upload`, formData);
             const data = response.data;
+            let uploadResults = ''
+            let uploadWarnings = '';
 
             if (data.filesUploaded) {
                 const mb = data.bytesUploaded / 1000000;
-                alert(`You were debited ${data.creditsDebited} credits to upload ${data.filesUploaded} files (${mb.toFixed(2)} MB)`);
+                uploadResults = `You were debited ${data.creditsDebited} credits to upload ${data.filesUploaded} files (${mb.toFixed(2)} MB)`;
                 setRefreshKey((prevKey) => prevKey + 1);
             }
 
             if (data.filesSkipped) {
                 if (data.filesSkipped === 1) {
-                    alert(`1 file was skipped due to insufficient credits.`);
+                    uploadWarnings = `1 file was skipped due to insufficient credits. `;
                 }
                 else {
-                    alert(`${data.filesSkipped} files were skipped due to insufficient credits.`);
+                    uploadWarnings = `${data.filesSkipped} files were skipped due to insufficient credits. `;
                 }
             }
 
             if (data.filesErrored) {
                 if (data.filesErrored === 1) {
-                    alert(`1 file was skipped due to error reading image.`);
+                    uploadWarnings += `1 file was skipped due to error reading image.`;
                 }
                 else {
-                    alert(`${data.filesErrored} files were skipped due to error reading image.`);
+                    uploadWarnings += `${data.filesErrored} files were skipped due to error reading image.`;
                 }
             }
+
+            setUploadResults(uploadResults);
+            setUploadWarnings(uploadWarnings);
         } catch (error) {
             console.error('Error uploading images:', error);
-            alert('Error uploading images');
+            setUploadResults('Error uploading images');
+            setUploadWarnings('');
         }
     };
 
@@ -201,7 +209,11 @@ const CollectionView = () => {
                 {
                     isDragActive ?
                         <p>Drop the images here ...</p> :
-                        <p>Copy/Paste or Drag 'n' Drop some images here, or click to select files</p>
+                        <div>
+                            <p>Copy/Paste or Drag 'n' Drop some images here, or click to select files</p>
+                            <p>{uploadResults}</p>
+                            <p>{uploadWarnings}</p>
+                        </div>
                 }
             </div>
         );

diff --git a/server.js b/server.js
@@ -1203,20 +1203,19 @@ app.post('/api/v1/collections/:xid/upload', ensureAuthenticated, upload.array('i
         const collectionId = req.params.xid;
         const upload = await xidb.createAssets(req.user.xid, req.files, collectionId);
 
-        if (!upload.filesUploaded) {
-            return res.status(500).json({ message: 'Error processing images' });
-        }
+        if (upload.filesUploaded) {
+            const txn = {
+                'type': 'upload',
+                'xid': collectionId,
+                'files': upload.filesUploaded,
+                'bytes': upload.bytesUploaded,
+                'credits': upload.creditsDebited,
+            };
 
-        const txn = {
-            'type': 'upload',
-            'xid': collectionId,
-            'files': upload.filesUploaded,
-            'bytes': upload.bytesUploaded,
-            'credits': upload.creditsDebited,
-        };
+            agent.saveTxnLog(req.user.xid, txn);
+            await archiver.commitChanges({ type: 'upload', agent: req.user.xid, asset: collectionId, files: upload.filesUploaded, bytes: upload.bytesUploaded });
+        }
 
-        agent.saveTxnLog(req.user.xid, txn);
-        await archiver.commitChanges({ type: 'upload', agent: req.user.xid, asset: collectionId, files: upload.filesUploaded, bytes: upload.bytesUploaded });
         res.status(200).json(upload);
     } catch (error) {
         console.error('Error processing files:', error);