diff --git a/packages/strapi-plugin-upload/admin/src/components/Card/index.js b/packages/strapi-plugin-upload/admin/src/components/Card/index.js
index 22ee8c934f..8b87e96123 100644
--- a/packages/strapi-plugin-upload/admin/src/components/Card/index.js
+++ b/packages/strapi-plugin-upload/admin/src/components/Card/index.js
@@ -52,11 +52,11 @@ const Card = ({
{children}
- {withoutFileInfo ? '' : name}
+ {!withoutFileInfo && name}
{!withoutFileInfo && }
- {withoutFileInfo ? '' : `${getExtension(fileType)} - ${fileSize}`}
+ {!withoutFileInfo && `${getExtension(fileType)} - ${fileSize}`}
{hasError && {errorMessage}}
diff --git a/packages/strapi-plugin-upload/admin/src/components/UploadList/RowItem.js b/packages/strapi-plugin-upload/admin/src/components/UploadList/RowItem.js
index 9470cd9f0f..dcf47f7f9f 100644
--- a/packages/strapi-plugin-upload/admin/src/components/UploadList/RowItem.js
+++ b/packages/strapi-plugin-upload/admin/src/components/UploadList/RowItem.js
@@ -38,6 +38,9 @@ const RowItem = ({
fileSize = file.mime ? file.type : file.size / 1000;
}
+ const shouldDisplayControls = !isUploading && !isDownloading && file !== null;
+ const shouldDisplayTrashIcon = file === null && hasError;
+
return (
{(isUploading || isDownloading) && }
- {!isUploading && !isDownloading && file !== null && (
+ {shouldDisplayTrashIcon && (
+
+
+
+ )}
+ {shouldDisplayControls && (
diff --git a/packages/strapi-plugin-upload/admin/src/containers/InputModalStepper/InputModalStepper.js b/packages/strapi-plugin-upload/admin/src/containers/InputModalStepper/InputModalStepper.js
index dd35bae11e..c6c726acaf 100644
--- a/packages/strapi-plugin-upload/admin/src/containers/InputModalStepper/InputModalStepper.js
+++ b/packages/strapi-plugin-upload/admin/src/containers/InputModalStepper/InputModalStepper.js
@@ -2,7 +2,7 @@ import React, { useEffect, useState, useRef, memo } from 'react';
import PropTypes from 'prop-types';
import { Modal, ModalFooter, PopUpWarning, useGlobalContext, request } from 'strapi-helper-plugin';
import { Button } from '@buffetjs/core';
-
+import { isEmpty } from 'lodash';
import { getRequestUrl, getTrad } from '../../utils';
import ModalHeader from '../../components/ModalHeader';
import pluginId from '../../pluginId';
@@ -12,16 +12,20 @@ import useModalContext from '../../hooks/useModalContext';
const InputModalStepper = ({ isOpen, onToggle, onInputMediaChange }) => {
const { formatMessage } = useGlobalContext();
const [shouldDeleteFile, setShouldDeleteFile] = useState(false);
+ const [displayNextButton, setDisplayNextButton] = useState(false);
const {
addFilesToUpload,
currentStep,
+ downloadFiles,
fetchMediaLib,
+ filesToDownload,
filesToUpload,
fileToEdit,
goTo,
handleAbortUpload,
handleCancelFileToUpload,
handleCleanFilesError,
+ handleClickNextButton,
handleClose,
handleEditExistingFile,
handleFileSelection,
@@ -56,29 +60,45 @@ const InputModalStepper = ({ isOpen, onToggle, onInputMediaChange }) => {
};
useEffect(() => {
- if (currentStep === 'upload' && filesToUploadLength === 0) {
+ if (currentStep === 'upload') {
// Go to the modal list view when file uploading is over
- goToList();
+
+ if (filesToUploadLength === 0) {
+ goToList();
+ } else {
+ downloadFiles();
+ }
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [filesToUploadLength, currentStep]);
- const goToList = () => {
- fetchMediaLib();
- goTo('list');
- };
-
- const handleConfirmDeleteFile = () => {
- setShouldDeleteFile(true);
- toggleModalWarning();
- };
-
const addFilesToUploadList = ({ target: { value } }) => {
addFilesToUpload({ target: { value } });
goNext();
};
+ const goBack = () => {
+ goTo(prev);
+ };
+
+ // FIXME: when back button needed
+ // eslint-disable-next-line no-unused-vars
+ const goNext = () => {
+ if (next === null) {
+ onToggle();
+
+ return;
+ }
+
+ goTo(next);
+ };
+
+ const goToList = () => {
+ fetchMediaLib();
+ goTo('list');
+ };
+
const handleClickDeleteFile = async () => {
toggleModalWarning();
};
@@ -93,6 +113,16 @@ const InputModalStepper = ({ isOpen, onToggle, onInputMediaChange }) => {
}
};
+ const handleCloseModal = () => {
+ setDisplayNextButton(false);
+ handleClose();
+ };
+
+ const handleConfirmDeleteFile = () => {
+ setShouldDeleteFile(true);
+ toggleModalWarning();
+ };
+
const handleGoToAddBrowseFiles = () => {
handleCleanFilesError();
@@ -187,25 +217,12 @@ const InputModalStepper = ({ isOpen, onToggle, onInputMediaChange }) => {
onToggle();
};
- const goBack = () => {
- goTo(prev);
- };
-
- // FIXME: when back button needed
- // eslint-disable-next-line no-unused-vars
- const goNext = () => {
- if (next === null) {
- onToggle();
-
- return;
- }
-
- goTo(next);
- };
+ const shouldDisplayNextButton = currentStep === 'browse' && displayNextButton;
+ const isFinishButtonDisabled = filesToUpload.some(file => file.isDownloading);
return (
<>
-
+
{/* header title */}
{
{
toggleDisableForm={handleFormDisabled}
onToggle={handleToggle}
setCropResult={handleSetCropResult}
+ setShouldDisplayNextButton={setDisplayNextButton}
withBackButton={withBackButton}
/>
)}
@@ -248,7 +267,12 @@ const InputModalStepper = ({ isOpen, onToggle, onInputMediaChange }) => {
{formatMessage({ id: 'app.components.Button.cancel' })}
{currentStep === 'upload' && (
-