TASK: adjust handling of selected, uploaded and rejected files in upload dialogs, improve UX

Author: andrehoffmann30

Resources/Private/JavaScript/asset-upload-screen/src/NewAssetUpload.tsx

@@ -5,7 +5,7 @@ import { Button } from '@neos-project/react-ui-components';
 import { createUseMediaUiStyles, MediaUiTheme, useIntl, useNotify } from '@media-ui/core/src';
 import { useUploadDialogState, useUploadFiles } from '@media-ui/feature-asset-upload/src/hooks';
 import { useCallback } from 'react';
-import { UploadedFile } from '@media-ui/feature-asset-upload/src/interfaces';
+import { FilesUploadState, UploadedFile } from '@media-ui/feature-asset-upload/src/interfaces';
 import { PreviewSection, UploadSection } from '@media-ui/feature-asset-upload/src/components';
 
 const useStyles = createUseMediaUiStyles((theme: MediaUiTheme) => ({
@@ -30,32 +30,71 @@ const NewAssetUpload = (props: { onComplete: (result: { object: { __identity: st
     const handleUpload = useCallback(() => {
         uploadFiles(dialogState.files.selected)
             .then(({ data: { uploadFiles } }) => {
+                setFiles((prev) => {
+                    return {
+                        selected: [],
+                        finished: [
+                            ...prev.finished,
+                            ...prev.selected.filter((file) =>
+                                uploadFiles.find((result) => {
+                                    return result.success && result.filename === file.name
+                                        ? (file.uploadStateResult = result.result)
+                                        : false;
+                                })
+                            ),
+                        ],
+                        rejected: [
+                            ...prev.rejected,
+                            ...prev.selected.filter((file) =>
+                                uploadFiles.find((result) => {
+                                    return !result.success && result.filename === file.name
+                                        ? (file.uploadStateResult = result.result)
+                                        : false;
+                                })
+                            ),
+                        ],
+                    } as FilesUploadState;
+                });
                 if (!uploadFiles[0].success) {
                     Notify.warning(
+                        translate('uploadDialog.uploadFinishedWithErrors', 'Some files could not be uploaded'),
                         translate('uploadDialog.uploadFinishedWithErrors', 'Some files could not be uploaded')
                     );
                 } else {
                     Notify.ok(translate('uploadDialog.uploadFinished', 'Upload finished'));
                     onComplete({ object: { __identity: uploadFiles[0].assetId } });
                 }
+                setUploadPossible(false);
             })
             .catch((error) => {
                 Notify.error(translate('fileUpload.error', 'Upload failed'), error);
             });
-    }, [uploadFiles, dialogState.files.selected, Notify, translate, onComplete]);
+    }, [uploadFiles, dialogState.files.selected, setFiles, setUploadPossible, Notify, translate, onComplete]);
 
     const handleSetFiles = useCallback(
         (files: UploadedFile[]) => {
             setFiles((prev) => {
-                return { ...prev, selected: files };
+                const fileNames = new Set();
+                for (const file of prev.finished.concat(prev.rejected)) {
+                    fileNames.add(file.name);
+                }
+                const newSelectedFiles = files.filter((file) => {
+                    return fileNames.has(file.name) ? false : fileNames.add(file.name);
+                });
+                return { ...prev, selected: newSelectedFiles };
             });
         },
         [setFiles]
     );
 
     return (
         <section className={classes.uploadArea}>
-            <UploadSection files={dialogState.files.selected} loading={loading} onSetFiles={handleSetFiles} />
+            <UploadSection
+                files={dialogState.files.selected}
+                loading={loading}
+                onSetFiles={handleSetFiles}
+                maxFiles={1}
+            />
             <PreviewSection
                 files={dialogState.files}
                 loading={loading}

Resources/Private/JavaScript/asset-upload/src/components/Dialogs/NewAssetDialog.tsx

@@ -21,7 +21,8 @@ const NewAssetDialog: React.FC = () => {
     const { refetch } = useAssetsQuery();
 
     const handleUpload = useCallback(() => {
-        uploadFiles(dialogState.files.selected)
+        const filesToUpload = dialogState.files.selected.filter((file) => !dialogState.files.finished.includes(file));
+        uploadFiles(filesToUpload)
             .then(({ data: { uploadFiles } }) => {
                 // FIXME: Mapping the uploadState to the files name is not the best solution as the same filename might be used multiple times
                 // Move uploaded or failed files into separate lists
@@ -31,13 +32,21 @@ const NewAssetDialog: React.FC = () => {
                         finished: [
                             ...prev.finished,
                             ...prev.selected.filter((file) =>
-                                uploadFiles.find((result) => result.success && result.filename === file.name)
+                                uploadFiles.find((result) => {
+                                    return result.success && result.filename === file.name
+                                        ? (file.uploadStateResult = result.result)
+                                        : false;
+                                })
                             ),
                         ],
                         rejected: [
                             ...prev.rejected,
                             ...prev.selected.filter((file) =>
-                                uploadFiles.find((result) => !result.success && result.filename === file.name)
+                                uploadFiles.find((result) => {
+                                    return !result.success && result.filename === file.name
+                                        ? (file.uploadStateResult = result.result)
+                                        : false;
+                                })
                             ),
                         ],
                     } as FilesUploadState;
@@ -54,6 +63,7 @@ const NewAssetDialog: React.FC = () => {
                 if (uploadFiles.some((result) => result.success)) {
                     void refetch();
                 }
+                setUploadPossible(false);
             })
             .catch((error) => {
                 Notify.error(translate('fileUpload.error', 'Upload failed'), error);
@@ -63,7 +73,14 @@ const NewAssetDialog: React.FC = () => {
     const handleSetFiles = useCallback(
         (files: UploadedFile[]) => {
             setFiles((prev) => {
-                return { ...prev, selected: files };
+                const fileNames = new Set();
+                for (const file of prev.finished.concat(prev.rejected)) {
+                    fileNames.add(file.name);
+                }
+                const newSelectedFiles = files.filter((file) => {
+                    return fileNames.has(file.name) ? false : fileNames.add(file.name);
+                });
+                return { ...prev, selected: newSelectedFiles };
             });
         },
         [setFiles]

Resources/Private/JavaScript/asset-upload/typings/UploadedFile.ts

@@ -11,4 +11,5 @@ interface UploadedFile extends File {
     copyrightNoticeNotNeeded?: boolean;
     title?: string;
     caption?: string;
+    uploadStateResult?: string;
 }