yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-08-08 00:37:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add upload from url in input media

Browse Source 
Signed-off-by: soupette <cyril.lpz@gmail.com>
This commit is contained in:
soupette 2020-03-31 21:27:06 +02:00
parent 099f8e63b2
commit edbe7a70de
6 changed files with 208 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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>

10
packages/strapi-plugin-upload/admin/src/components/UploadList/RowItem.js
View File

@ -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 />

92
packages/strapi-plugin-upload/admin/src/containers/InputModalStepper/InputModalStepper.js
View File

@ -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 = () => {
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 (
<>
<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' })}

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

@ -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,

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

@ -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;

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

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