Add upload from url in input media

Signed-off-by: soupette <cyril.lpz@gmail.com>

packages/strapi-plugin-upload/admin/src/components/Card/index.js

@@ -52,11 +52,11 @@ const Card = ({
         {children}
       </CardImgWrapper>
       <Flex>
-        <Title>{withoutFileInfo ? '' : name}</Title>
+        <Title>{!withoutFileInfo && name}&nbsp;</Title>
         {!withoutFileInfo && <Tag label={getType(fileType)} />}
       </Flex>
       <Text color="grey" fontSize="xs" ellipsis>
-        {withoutFileInfo ? '' : `${getExtension(fileType)} - ${fileSize}`}
+        {!withoutFileInfo && `${getExtension(fileType)} - ${fileSize}`}
       </Text>
       {hasError && <ErrorMessage>{errorMessage}</ErrorMessage>}
     </Wrapper>

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 (
     <div className="col-xs-12 col-md-6 col-xl-3" key={originalIndex}>
       <Card
@@ -53,7 +56,12 @@ const RowItem = ({
         withoutFileInfo={isDownloading || (file === null && hasError)}
       >
         {(isUploading || isDownloading) && <InfiniteLoadingIndicator onClick={handleClick} />}
-        {!isUploading && !isDownloading && file !== null && (
+        {shouldDisplayTrashIcon && (
+          <CardControlsWrapper className="card-control-wrapper">
+            <CardControl title="delete" onClick={handleClickDelete} type="trash-alt" small />
+          </CardControlsWrapper>
+        )}
+        {shouldDisplayControls && (
           <CardControlsWrapper className="card-control-wrapper">
             <CardControl title="delete" onClick={handleClickDelete} type="trash-alt" small />
             <CardControl title="edit" onClick={handleClickEdit} small />

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
+
+      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 = () => {
+  const shouldDisplayNextButton = currentStep === 'browse' && displayNextButton;
-    goTo(prev);
+  const isFinishButtonDisabled = filesToUpload.some(file => file.isDownloading);
-  };
-
-  // FIXME: when back button needed
-  // eslint-disable-next-line no-unused-vars
-  const goNext = () => {
-    if (next === null) {
-      onToggle();
-
-      return;
-    }
-
-    goTo(next);
-  };
 
   return (
     <>
-      <Modal isOpen={isOpen} onToggle={handleToggle} onClosed={handleClose}>
+      <Modal isOpen={isOpen} onToggle={handleToggle} onClosed={handleCloseModal}>
         {/* header title */}
         <ModalHeader
           goBack={goBack}
@@ -218,6 +235,7 @@ const InputModalStepper = ({ isOpen, onToggle, onInputMediaChange }) => {
           <Component
             addFilesToUpload={addFilesToUploadList}
             components={components}
+            filesToDownload={filesToDownload}
             filesToUpload={filesToUpload}
             fileToEdit={fileToEdit}
             isEditingUploadedFile={currentStep === 'edit'}
@@ -238,6 +256,7 @@ const InputModalStepper = ({ isOpen, onToggle, onInputMediaChange }) => {
             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' })}
             </Button>
             {currentStep === 'upload' && (
-              <Button type="button" color="success" onClick={handleUploadFiles}>
+              <Button
+                type="button"
+                color="success"
+                onClick={handleUploadFiles}
+                disabled={isFinishButtonDisabled}
+              >
                 {formatMessage(
                   {
                     id: getTrad(
@@ -261,6 +285,16 @@ const InputModalStepper = ({ isOpen, onToggle, onInputMediaChange }) => {
                 )}
               </Button>
             )}
+            {shouldDisplayNextButton && (
+              <Button
+                type="button"
+                color="primary"
+                onClick={handleClickNextButton}
+                disabled={isEmpty(filesToDownload)}
+              >
+                Next
+              </Button>
+            )}
             {currentStep === 'edit-new' && (
               <Button color="success" type="button" onClick={handleSubmitEditNewFile}>
                 {formatMessage({ id: 'form.button.finish' })}

packages/strapi-plugin-upload/admin/src/containers/InputModalStepperProvider/index.js

@@ -2,12 +2,20 @@ import React, { useReducer, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { request, generateSearchFromFilters } from 'strapi-helper-plugin';
 import { get } from 'lodash';
+import axios from 'axios';
 import pluginId from '../../pluginId';
-import { getRequestUrl, compactParams, createNewFilesToUploadArray } from '../../utils';
+import {
+  getFilesToDownload,
+  getRequestUrl,
+  compactParams,
+  createNewFilesToUploadArray,
+} from '../../utils';
 import InputModalStepperContext from '../../contexts/InputModal/InputModalDataManager';
 import init from './init';
 import reducer, { initialState } from './reducer';
 
+/* eslint-disable indent */
+
 const InputModalStepperProvider = ({
   allowedTypes,
   children,
@@ -47,6 +55,48 @@ const InputModalStepperProvider = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isOpen, params]);
 
+  const downloadFiles = async () => {
+    const files = getFilesToDownload(filesToUpload);
+
+    try {
+      await Promise.all(
+        files.map(file => {
+          const { source } = file;
+
+          return axios
+            .get(file.fileURL, {
+              headers: new Headers({ Origin: window.location.origin, mode: 'cors' }),
+              responseType: 'blob',
+              cancelToken: source.token,
+            })
+            .then(({ data }) => {
+              const createdFile = new File([data], file.fileURL, {
+                type: data.type,
+              });
+
+              dispatch({
+                type: 'FILE_DOWNLOADED',
+                blob: createdFile,
+                originalIndex: file.originalIndex,
+                fileTempId: file.tempId,
+              });
+            })
+            .catch(err => {
+              console.error('fetch file error', err);
+
+              dispatch({
+                type: 'SET_FILE_TO_DOWNLOAD_ERROR',
+                originalIndex: file.originalIndex,
+                fileTempId: file.tempId,
+              });
+            });
+        })
+      );
+    } catch (err) {
+      // Silent
+    }
+  };
+
   const handleRemoveFileToUpload = fileIndex => {
     dispatch({
       type: 'REMOVE_FILE_TO_UPLOAD',
@@ -54,11 +104,28 @@ const InputModalStepperProvider = ({
     });
   };
 
-  const handleFileToEditChange = ({ target: { name, value } }) => {
+  const handleClickNextButton = () => {
+    // Navigate to next step
+    // goNext();
     dispatch({
-      type: 'ON_CHANGE',
+      type: 'ADD_URLS_TO_FILES_TO_DOWNLOAD',
+      nextStep: 'upload',
+    });
+  };
+
+  const handleFileToEditChange = ({ target: { name, value } }) => {
+    let val = value;
+    let type = 'ON_CHANGE';
+
+    if (name === 'url') {
+      val = value.split('\n');
+      type = 'ON_CHANGE_URLS_TO_DOWNLOAD';
+    }
+
+    dispatch({
+      type,
       keys: name,
-      value,
+      value: val,
     });
   };
 
@@ -186,8 +253,14 @@ const InputModalStepperProvider = ({
   const handleCancelFileToUpload = fileIndex => {
     const fileToCancel = get(filesToUpload, fileIndex, {});
 
+    const { source } = fileToCancel;
+
     // Cancel upload
+    if (source) {
+      source.cancel('Operation canceled by the user.');
+    } else {
       fileToCancel.abortController.abort();
+    }
 
     handleRemoveFileToUpload(fileIndex);
   };
@@ -306,11 +379,13 @@ const InputModalStepperProvider = ({
       value={{
         ...reducerState,
         addFilesToUpload,
+        downloadFiles,
         fetchMediaLib,
         goTo,
         handleAbortUpload,
         handleAllFilesSelection,
         handleCancelFileToUpload,
+        handleClickNextButton,
         handleCleanFilesError,
         handleClose,
         handleEditExistingFile,

packages/strapi-plugin-upload/admin/src/containers/InputModalStepperProvider/reducer.js

@@ -1,12 +1,17 @@
 import produce from 'immer';
 import { intersectionWith, differenceWith, unionWith, set } from 'lodash';
 
-import { createNewFilesToUploadArray, formatFileForEditing } from '../../utils';
+import {
+  createNewFilesToDownloadArray,
+  createNewFilesToUploadArray,
+  formatFileForEditing,
+} from '../../utils';
 
 const initialState = {
   selectedFiles: [],
   files: [],
   filesToUpload: [],
+  filesToDownload: [],
   fileToEdit: null,
   currentTab: null,
   params: {
@@ -24,10 +29,40 @@ const reducer = (state, action) =>
   // eslint-disable-next-line consistent-return
   produce(state, draftState => {
     switch (action.type) {
+      case 'ADD_URLS_TO_FILES_TO_DOWNLOAD': {
+        draftState.filesToUpload = [
+          ...draftState.filesToUpload,
+          ...createNewFilesToDownloadArray(draftState.filesToDownload, draftState.filesToUpload),
+        ].map((fileToUpload, index) => ({
+          ...fileToUpload,
+          originalIndex: index,
+        }));
+        draftState.currentStep = action.nextStep;
+        draftState.filesToDownload = [];
+
+        break;
+      }
+      case 'FILE_DOWNLOADED': {
+        draftState.filesToUpload.forEach((file, index) => {
+          if (file.tempId === action.fileTempId) {
+            draftState.filesToUpload[index] = {
+              ...draftState.filesToUpload[index],
+              isDownloading: false,
+              file: action.blob,
+            };
+          }
+        });
+
+        break;
+      }
       case 'ON_CHANGE': {
         set(draftState.fileToEdit, action.keys.split('.'), action.value);
         break;
       }
+      case 'ON_CHANGE_URLS_TO_DOWNLOAD': {
+        set(draftState, ['filesToDownload'], action.value);
+        break;
+      }
       case 'GET_DATA_SUCCEEDED': {
         draftState.files = action.files;
         draftState.count = action.countData.count;
@@ -174,6 +209,19 @@ const reducer = (state, action) =>
         );
         break;
       }
+      case 'SET_FILE_TO_DOWNLOAD_ERROR': {
+        draftState.filesToUpload.forEach((file, index) => {
+          if (file.tempId === action.fileTempId) {
+            draftState.filesToUpload[index] = {
+              ...draftState.filesToUpload[index],
+              isDownloading: false,
+              hasError: true,
+              errorMessage: draftState.filesToUpload[index].fileURL,
+            };
+          }
+        });
+        break;
+      }
       case 'SET_FORM_DISABLED': {
         draftState.isFormDisabled = action.isFormDisabled;
         break;

packages/strapi-plugin-upload/admin/src/utils/createNewFilesToDownloadArray.js

@@ -31,7 +31,7 @@ const createNewFilesToDownloadArray = (filesURLArray, alreadyUploadedFiles) => {
       fileInfo: {
         alternativeText: '',
         caption: '',
-        name: '',
+        name: current,
       },
       fileURL: current,
       hasError: false,