showed unsupported files on UI

src/components/pages/gallery/Upload.tsx

@@ -13,6 +13,7 @@ import { SetLoading } from 'pages/gallery';
 import { AppContext } from 'pages/_app';
 import { logError } from 'utils/sentry';
 import { sortFilesIntoCollections } from 'utils/file';
+import { FileRejection } from 'react-dropzone';
 
 interface Props {
     syncWithRemote: (force?: boolean) => Promise<void>;
@@ -27,6 +28,7 @@ interface Props {
     setDialogMessage: SetDialogMessage;
     setUploadInProgress: any;
     showCollectionSelector: () => void;
+    fileRejections:FileRejection[]
 }
 
 export enum UPLOAD_STRATEGY {
@@ -254,6 +256,7 @@ export default function Upload(props: Props) {
                 show={progressView}
                 closeModal={() => setProgressView(false)}
                 retryFailed={retryFailed}
+                fileRejections={props.fileRejections}
             />
         </>
     );

src/components/pages/gallery/UploadProgress.tsx

@@ -2,7 +2,8 @@ import React from 'react';
 import {
     Alert, Button, Modal, ProgressBar,
 } from 'react-bootstrap';
-import { UPLOAD_STAGES } from 'services/uploadService';
+import { FileRejection } from 'react-dropzone';
+import { UPLOAD_STAGES, FileUploadErrorCode } from 'services/uploadService';
 import constants from 'utils/strings/constants';
 
 interface Props {
@@ -13,13 +14,21 @@ interface Props {
     retryFailed;
     fileProgress: Map<string, number>;
     show;
+    fileRejections:FileRejection[]
+}
+interface FileProgressStatuses{
+    fileName:string;
+    progress:number;
 }
 export default function UploadProgress(props: Props) {
-    const fileProgressStatuses = [];
+    const fileProgressStatuses = [] as FileProgressStatuses[];
     if (props.fileProgress) {
         for (const [fileName, progress] of props.fileProgress) {
             fileProgressStatuses.push({ fileName, progress });
         }
+        for (const { file } of props.fileRejections) {
+            fileProgressStatuses.push({ fileName: file.name, progress: FileUploadErrorCode.UNSUPPORTED });
+        }
         fileProgressStatuses.sort((a, b) => {
             if (b.progress !== -1 && a.progress === -1) return 1;
         });

src/pages/gallery/index.tsx

@@ -135,10 +135,11 @@ export default function Gallery() {
         getInputProps,
         open: openFileUploader,
         acceptedFiles,
+        fileRejections,
     } = useDropzone({
         noClick: true,
         noKeyboard: true,
-        accept: 'image/*, video/*, application/json, ',
+        accept: ['image/*', 'video/*', 'application/json'],
         disabled: uploadInProgress,
     });
 
@@ -424,6 +425,7 @@ export default function Gallery() {
                     setCollectionNamerAttributes={setCollectionNamerAttributes}
                     setDialogMessage={setDialogMessage}
                     setUploadInProgress={setUploadInProgress}
+                    fileRejections={fileRejections}
                 />
                 <Sidebar
                     collections={collections}

src/services/uploadService.ts

@@ -37,12 +37,16 @@ const CHUNKS_COMBINED_FOR_UPLOAD = 5;
 const RANDOM_PERCENTAGE_PROGRESS_FOR_PUT = () => 90 + 10 * Math.random();
 const NULL_LOCATION: Location = { latitude: null, longitude: null };
 const WAIT_TIME_THUMBNAIL_GENERATION = 10 * 1000;
-const FILE_UPLOAD_FAILED = -1;
-const FILE_UPLOAD_SKIPPED = -2;
 const FILE_UPLOAD_COMPLETED = 100;
 const EDITED_FILE_SUFFIX = '-edited';
 const TwoSecondInMillSeconds = 2000;
 
+export enum FileUploadErrorCode {
+    FAILED = -1,
+    SKIPPED = -2,
+    UNSUPPORTED = -3,
+}
+
 interface Location {
     latitude: number;
     longitude: number;
@@ -243,7 +247,7 @@ class UploadService {
             let file: FileInMemory = await this.readFile(reader, rawFile);
             if (this.fileAlreadyInCollection(file, collection)) {
                 // set progress to -2 indicating that file upload was skipped
-                this.fileProgress.set(rawFile.name, FILE_UPLOAD_SKIPPED);
+                this.fileProgress.set(rawFile.name, FileUploadErrorCode.SKIPPED);
                 this.updateProgressBarUI();
                 await sleep(TwoSecondInMillSeconds);
                 // remove completed files for file progress list
@@ -271,7 +275,7 @@ class UploadService {
             logError(e, 'file upload failed');
             this.failedFiles.push(fileWithCollection);
             // set progress to -1 indicating that file upload failed but keep it to show in the file-upload list progress
-            this.fileProgress.set(rawFile.name, FILE_UPLOAD_FAILED);
+            this.fileProgress.set(rawFile.name, FileUploadErrorCode.FAILED);
             handleError(e);
         }
         this.updateProgressBarUI();

src/utils/strings/englishConstants.tsx

@@ -93,6 +93,7 @@ const englishConstants = {
     },
     UPLOADING_FILES: 'file upload',
     FAILED_UPLOAD_FILE_LIST: 'upload failed for following files',
+    UNSUPPORTED_FILE_LIST: 'unsupported files',
     FILE_UPLOAD_PROGRESS: (name, progress) => (
         <div id={name}>
             <strong>{name}</strong>
@@ -103,6 +104,8 @@ const englishConstants = {
                         return 'failed';
                     case -2:
                         return 'already uploaded, skipping...';
+                    case -3:
+                        return 'unsupported file format, ignored';
                     default:
                         return `${progress}%`;
                 }