From 70a05b036b18ac7f83f537cafcbf7104edf7c17c Mon Sep 17 00:00:00 2001 From: soupette Date: Tue, 24 Mar 2020 10:48:21 +0100 Subject: [PATCH] Init request edit file Signed-off-by: soupette --- .../admin/src/components/EditForm/index.js | 8 +-- .../src/containers/ModalStepper/index.js | 61 ++++++++++++++++++- .../src/containers/ModalStepper/reducer.js | 2 + .../admin/src/utils/formatFileForEditing.js | 9 ++- .../utils/tests/formatFileForEditing.test.js | 15 ++++- 5 files changed, 88 insertions(+), 7 deletions(-) diff --git a/packages/strapi-plugin-upload/admin/src/components/EditForm/index.js b/packages/strapi-plugin-upload/admin/src/components/EditForm/index.js index e77c19fe06..78eedd4dc0 100644 --- a/packages/strapi-plugin-upload/admin/src/components/EditForm/index.js +++ b/packages/strapi-plugin-upload/admin/src/components/EditForm/index.js @@ -30,7 +30,7 @@ const EditForm = ({ fileToEdit, onChange, onClickDeleteFileToUpload, - onSubmitEditNewFile, + onSubmitEdit, setCropResult, }) => { const { formatMessage } = useGlobalContext(); @@ -154,7 +154,7 @@ const EditForm = ({ const handleSubmit = e => { e.preventDefault(); - onSubmitEditNewFile(e); + onSubmitEdit(e); }; return ( @@ -276,7 +276,7 @@ EditForm.defaultProps = { fileToEdit: null, onChange: () => {}, onClickDeleteFileToUpload: () => {}, - onSubmitEditNewFile: e => e.preventDefault(), + onSubmitEdit: e => e.preventDefault(), setCropResult: () => {}, }; @@ -284,7 +284,7 @@ EditForm.propTypes = { fileToEdit: PropTypes.object, onChange: PropTypes.func, onClickDeleteFileToUpload: PropTypes.func, - onSubmitEditNewFile: PropTypes.func, + onSubmitEdit: PropTypes.func, setCropResult: PropTypes.func, }; diff --git a/packages/strapi-plugin-upload/admin/src/containers/ModalStepper/index.js b/packages/strapi-plugin-upload/admin/src/containers/ModalStepper/index.js index 5aef131135..cf2d93817a 100644 --- a/packages/strapi-plugin-upload/admin/src/containers/ModalStepper/index.js +++ b/packages/strapi-plugin-upload/admin/src/containers/ModalStepper/index.js @@ -129,6 +129,58 @@ const ModalStepper = ({ initialFileToEdit, initialStep, isOpen, onClosed, onTogg goNext(); }; + const handleSubmitEditExistingFile = async (e, shouldDuplicateMedia = false) => { + e.preventDefault(); + + dispatch({ + type: 'ON_SUBMIT_EDIT_EXISTING_FILE', + }); + + const headers = {}; + const formData = new FormData(); + + // The endpoints are different when we want to just update the file infos + const didCropFile = fileToEdit.file instanceof File; + const { abortController, id, file, fileInfo } = fileToEdit; + let requestURL = shouldDuplicateMedia ? `/${pluginId}` : `/${pluginId}?id=${id}`; + + if (didCropFile) { + formData.append('files', file); + formData.append('fileInfo', JSON.stringify(fileInfo)); + + try { + await request( + requestURL, + { + method: 'POST', + headers, + body: formData, + signal: abortController.signal, + }, + false, + false + ); + } catch (err) { + console.log(err); + } + } else { + requestURL = `/${pluginId}/files/${id}`; + + // The following will not work waiting for the back-end to be ready + try { + await request(requestURL, { method: 'PUT', body: fileInfo }); + // Do something + } catch (err) { + // Do something with error + + console.log('err'); + } + } + + console.log('submit', shouldDuplicateMedia); + console.log({ fileToEdit }); + }; + const handleToggle = () => { if (filesToUploadLength > 0) { // eslint-disable-next-line no-alert @@ -235,7 +287,9 @@ const ModalStepper = ({ initialFileToEdit, initialStep, isOpen, onClosed, onTogg onClickDeleteFileToUpload={handleClickDeleteFileToUpload} onClickEditNewFile={handleGoToEditNewFile} onGoToAddBrowseFiles={handleGoToAddBrowseFiles} - onSubmitEditNewFile={handleSubmitEditNewFile} + onSubmitEdit={ + currentStep === 'edit-new' ? handleSubmitEditNewFile : handleSubmitEditExistingFile + } onToggle={handleToggle} setCropResult={handleSetCropResult} withBackButton={withBackButton} @@ -266,6 +320,11 @@ const ModalStepper = ({ initialFileToEdit, initialStep, isOpen, onClosed, onTogg {formatMessage({ id: 'form.button.finish' })} )} + {currentStep === 'edit' && ( + + )} diff --git a/packages/strapi-plugin-upload/admin/src/containers/ModalStepper/reducer.js b/packages/strapi-plugin-upload/admin/src/containers/ModalStepper/reducer.js index d10c8fb6b5..4d7b2530f6 100644 --- a/packages/strapi-plugin-upload/admin/src/containers/ModalStepper/reducer.js +++ b/packages/strapi-plugin-upload/admin/src/containers/ModalStepper/reducer.js @@ -36,6 +36,8 @@ const reducer = (state, action) => { .updateIn(['filesToUpload', originalIndex], () => state.get('fileToEdit')) .update('fileToEdit', () => null); } + case 'ON_SUBMIT_EDIT_EXISTING_FILE': + return state.updateIn(['fileToEdit', 'isUploading'], () => true); case 'REMOVE_FILE_TO_UPLOAD': return state.update('filesToUpload', list => { return list.filter(data => data.get('originalIndex') !== action.fileIndex); diff --git a/packages/strapi-plugin-upload/admin/src/utils/formatFileForEditing.js b/packages/strapi-plugin-upload/admin/src/utils/formatFileForEditing.js index 0073410ee3..6d905cbf00 100644 --- a/packages/strapi-plugin-upload/admin/src/utils/formatFileForEditing.js +++ b/packages/strapi-plugin-upload/admin/src/utils/formatFileForEditing.js @@ -1,12 +1,19 @@ import { pick } from 'lodash'; const formatFileForEditing = file => { + const abortController = new AbortController(); + return { + abortController, + id: file.id, file: { - ...pick(file, ['size', 'ext', 'width', 'height', 'url', 'mime']), + ...pick(file, ['size', 'ext', 'width', 'height', 'url', 'mime', 'name']), created_at: file.created_at || file.createdAt, }, fileInfo: pick(file, ['alternativeText', 'caption', 'name']), + hasError: false, + errorMessage: null, + isUploading: false, }; }; diff --git a/packages/strapi-plugin-upload/admin/src/utils/tests/formatFileForEditing.test.js b/packages/strapi-plugin-upload/admin/src/utils/tests/formatFileForEditing.test.js index 2d2a4fa0ea..4a474117c3 100644 --- a/packages/strapi-plugin-upload/admin/src/utils/tests/formatFileForEditing.test.js +++ b/packages/strapi-plugin-upload/admin/src/utils/tests/formatFileForEditing.test.js @@ -22,10 +22,14 @@ describe('UPLOAD | utils | formatFileForEditing', () => { formats: null, provider_metadata: null, }; + const abortController = new AbortController(); const expected = { + abortController, + id: 12, file: { size: 22.8, + name: 'test', ext: '.png', width: 110, height: 110, @@ -38,6 +42,9 @@ describe('UPLOAD | utils | formatFileForEditing', () => { alternativeText: 'test', name: 'test', }, + hasError: false, + errorMessage: null, + isUploading: false, }; expect(formatFileForEditing(data)).toEqual(expected); @@ -64,11 +71,14 @@ describe('UPLOAD | utils | formatFileForEditing', () => { formats: null, provider_metadata: null, }; - + const abortController = new AbortController(); const expected = { + abortController, + id: 12, file: { size: 22.8, ext: '.png', + name: 'test', width: 110, height: 110, created_at: '2020-03-23T11:43:46.729Z', @@ -80,6 +90,9 @@ describe('UPLOAD | utils | formatFileForEditing', () => { caption: 'test', name: 'test', }, + hasError: false, + errorMessage: null, + isUploading: false, }; expect(formatFileForEditing(data)).toEqual(expected);