added new uploadErrors state

src/pages/gallery/components/CollectionDropZone.tsx

@@ -11,7 +11,8 @@ function CollectionDropZone({
     collectionAndItsLatestFile,
     setProgressView,
     progressBarProps,
-    setErrorCode,
+    setBannerErrorCode,
+    setUploadErrors,
 }) {
     const upload = async (acceptedFiles) => {
         try {
@@ -24,12 +25,13 @@ function CollectionDropZone({
                 acceptedFiles,
                 collectionAndItsLatestFile,
                 token,
-                progressBarProps
+                progressBarProps,
+                setUploadErrors
             );
             refetchData();
         } catch (err) {
             if (err.response) {
-                setErrorCode(err.response.status);
+                setBannerErrorCode(err.response.status);
             }
         } finally {
             setProgressView(false);

src/pages/gallery/components/CreateCollection.tsx

@@ -15,7 +15,8 @@ export default function CreateCollection(props) {
         modalView,
         closeModal,
         closeUploadModal,
-        setErrorCode,
+        setUploadErrors,
+        setBannerErrorCode,
     } = props;
     const [albumName, setAlbumName] = useState('');
 
@@ -67,20 +68,26 @@ export default function CreateCollection(props) {
                 acceptedFiles,
                 collectionAndItsLatestFile,
                 token,
-                progressBarProps
+                progressBarProps,
+                setUploadErrors
             );
             refetchData();
         } catch (err) {
             if (err.response) {
-                setErrorCode(err.response.status);
+                setBannerErrorCode(err.response.status);
             }
         } finally {
             setProgressView(false);
         }
     };
     return (
-        <Modal show={modalView} onHide={closeModal} centered backdrop="static"
-            style={{ background: 'rgba(0, 0, 0, 0.8)' }}>
+        <Modal
+            show={modalView}
+            onHide={closeModal}
+            centered
+            backdrop="static"
+            style={{ background: 'rgba(0, 0, 0, 0.8)' }}
+        >
             <Modal.Header closeButton>
                 <Modal.Title>{constants.CREATE_COLLECTION}</Modal.Title>
             </Modal.Header>

src/pages/gallery/components/Upload.tsx

@@ -10,6 +10,7 @@ export default function Upload(props) {
     );
     const [fileCounter, setFileCounter] = useState({ current: 0, total: 0 });
     const [percentComplete, setPercentComplete] = useState(0);
+    const [uploadErrors, setUploadErrors] = useState<Error[]>([]);
     const init = () => {
         setProgressView(false);
         setUploadStage(UPLOAD_STAGES.START);
@@ -26,11 +27,13 @@ export default function Upload(props) {
                     setFileCounter,
                     setUploadStage,
                 }}
+                setUploadErrors={setUploadErrors}
             />
             <UploadProgress
                 now={percentComplete}
                 fileCounter={fileCounter}
                 uploadStage={uploadStage}
+                uploadErrors={uploadErrors}
                 show={progressView}
                 onHide={init}
             />

src/pages/gallery/components/UploadProgress.tsx

@@ -6,6 +6,7 @@ export default function UploadProgress({
     fileCounter,
     uploadStage,
     now,
+    uploadErrors,
     ...props
 }) {
     return (
@@ -35,6 +36,20 @@ export default function UploadProgress({
                         <ProgressBar animated now={now} />
                     </>
                 )}
+                {uploadErrors.length && (
+                    <Alert variant="danger">
+                        <div
+                            style={{
+                                overflow: 'auto',
+                                height: '100px',
+                            }}
+                        >
+                            {uploadErrors.map((error) => (
+                                <li>{error.message}</li>
+                            ))}
+                        </div>
+                    </Alert>
+                )}
             </Modal.Body>
         </Modal>
     );