Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

UI: Handle Empty File Uploads in FileUploader #1802

Merged
merged 2 commits into from
Sep 19, 2024
Merged

UI: Handle Empty File Uploads in FileUploader #1802

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d6aab12
UI: Handle empty file uploads in FileUploader
Samk13 Sep 14, 2024
8d1a41c
Refactor: Enhance Warnings Handling
Samk13 Sep 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
77 changes: 62 additions & 15 deletions ...assets/semantic-ui/js/invenio_rdm_records/src/deposit/fields/FileUploader/FileUploader.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
// Copyright (C) 2020-2022 Northwestern University.
// Copyright (C) 2022 Graz University of Technology.
// Copyright (C) 2022 TU Wien.
// Copyright (C) 2024 KTH Royal Institute of Technology.
//
// Invenio-RDM-Records is free software; you can redistribute it and/or modify it
// under the terms of the MIT License; see LICENSE file for more details.
Expand Down Expand Up @@ -40,6 +41,7 @@ export const FileUploaderComponent = ({
isFileImportInProgress,
decimalSizeDisplay,
filesLocked,
allowEmptyFiles,
...uiProps
}) => {
// We extract the working copy of the draft stored as `values` in formik
Expand Down Expand Up @@ -80,20 +82,38 @@ export const FileUploaderComponent = ({
const maxFileStorageReached = filesSize + acceptedFilesSize > quota.maxStorage;

const filesNames = _map(filesList, "name");
const duplicateFiles = acceptedFiles.filter((acceptedFile) =>
filesNames.includes(acceptedFile.name)
const filesNamesSet = new Set(filesNames);

const { duplicateFiles, emptyFiles, nonEmptyFiles } = acceptedFiles.reduce(
(accumulators, file) => {
if (filesNamesSet.has(file.name)) {
accumulators.duplicateFiles.push(file);
} else if (file.size === 0) {
accumulators.emptyFiles.push(file);
} else {
accumulators.nonEmptyFiles.push(file);
}

return accumulators;
},
{ duplicateFiles: [], emptyFiles: [], nonEmptyFiles: [] }
);

const hasEmptyFiles = !_isEmpty(emptyFiles);
const hasDuplicateFiles = !_isEmpty(duplicateFiles);

if (maxFileNumberReached) {
setWarningMsg(
<div className="content">
<Message
warning
icon="warning circle"
header="Could not upload files."
content={`Uploading the selected files would result in ${
filesList.length + acceptedFiles.length
} files (max.${quota.maxFiles})`}
header={i18next.t("Could not upload files.")}
content={i18next.t(
`Uploading the selected files would result in ${
filesList.length + acceptedFiles.length
} files (max.${quota.maxFiles})`
)}
/>
</div>
);
Expand All @@ -103,7 +123,7 @@ export const FileUploaderComponent = ({
<Message
warning
icon="warning circle"
header="Could not upload files."
header={i18next.t("Could not upload files.")}
content={
<>
{i18next.t("Uploading the selected files would result in")}{" "}
Expand All @@ -118,19 +138,44 @@ export const FileUploaderComponent = ({
/>
</div>
);
} else if (!_isEmpty(duplicateFiles)) {
setWarningMsg(
<div className="content">
} else {
let warnings = [];

if (hasDuplicateFiles) {
warnings.push(
<Message
warning
icon="warning circle"
header={i18next.t(`The following files already exist`)}
header={i18next.t("The following files already exist")}
list={_map(duplicateFiles, "name")}
/>
</div>
);
} else {
uploadFiles(formikDraft, acceptedFiles);
);
}

if (!allowEmptyFiles && hasEmptyFiles) {
warnings.push(
<Message
warning
icon="warning circle"
header={i18next.t("Could not upload all files.")}
content={i18next.t("Empty files were skipped.")}
list={_map(emptyFiles, "name")}
/>
);
}

if (!_isEmpty(warnings)) {
setWarningMsg(<div className="content">{warnings}</div>);
}

const filesToUpload = allowEmptyFiles
? [...nonEmptyFiles, ...emptyFiles]
: nonEmptyFiles;

// Proceed with uploading files if there are any to upload
if (!_isEmpty(filesToUpload)) {
uploadFiles(formikDraft, filesToUpload);
}
}
},
multiple: true,
Expand Down Expand Up @@ -348,6 +393,7 @@ FileUploaderComponent.propTypes = {
decimalSizeDisplay: PropTypes.bool,
filesLocked: PropTypes.bool,
permissions: PropTypes.object,
allowEmptyFiles: PropTypes.bool,
};

FileUploaderComponent.defaultProps = {
Expand All @@ -369,4 +415,5 @@ FileUploaderComponent.defaultProps = {
importButtonText: i18next.t("Import files"),
decimalSizeDisplay: true,
filesLocked: false,
allowEmptyFiles: true,
};