From cc28b4aee19a4d41a61bd176bb09bf8bdb3747ae Mon Sep 17 00:00:00 2001 From: Abhinav-grd Date: Sat, 24 Jul 2021 20:25:12 +0530 Subject: [PATCH] showed unsupported files on UI --- src/components/pages/gallery/Upload.tsx | 3 +++ src/components/pages/gallery/UploadProgress.tsx | 13 +++++++++++-- src/pages/gallery/index.tsx | 4 +++- src/services/uploadService.ts | 12 ++++++++---- src/utils/strings/englishConstants.tsx | 3 +++ 5 files changed, 28 insertions(+), 7 deletions(-) diff --git a/src/components/pages/gallery/Upload.tsx b/src/components/pages/gallery/Upload.tsx index 0853a054b..4110ee0c4 100644 --- a/src/components/pages/gallery/Upload.tsx +++ b/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; @@ -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} /> ); diff --git a/src/components/pages/gallery/UploadProgress.tsx b/src/components/pages/gallery/UploadProgress.tsx index 8e859b82e..d76d0b226 100644 --- a/src/components/pages/gallery/UploadProgress.tsx +++ b/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; 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; }); diff --git a/src/pages/gallery/index.tsx b/src/pages/gallery/index.tsx index 7618f1427..9d620a10b 100644 --- a/src/pages/gallery/index.tsx +++ b/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} /> 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(); diff --git a/src/utils/strings/englishConstants.tsx b/src/utils/strings/englishConstants.tsx index 59fb3974b..5cc9c1fd7 100644 --- a/src/utils/strings/englishConstants.tsx +++ b/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) => (
{name} @@ -103,6 +104,8 @@ const englishConstants = { return 'failed'; case -2: return 'already uploaded, skipping...'; + case -3: + return 'unsupported file format, ignored'; default: return `${progress}%`; }