Init request edit file

Signed-off-by: soupette <cyril.lpz@gmail.com>
This commit is contained in:
soupette 2020-03-24 10:48:21 +01:00
parent b2ee121c20
commit 70a05b036b
5 changed files with 88 additions and 7 deletions

View File

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

View File

@ -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' })}
</Button>
)}
{currentStep === 'edit' && (
<Button color="success" type="button" onClick={handleSubmitEditExistingFile}>
{formatMessage({ id: 'form.button.finish' })}
</Button>
)}
</section>
</ModalFooter>
</Modal>

View File

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

View File

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

View File

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