@akemona-org/strapi-plugin-upload 3.7.0

package/admin/src/containers/InputModalStepper/InputModalStepper.js

@@ -0,0 +1,480 @@
+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 { get, isEmpty, isEqual } from 'lodash';
+import { getRequestUrl, getTrad } from '../../utils';
+import ModalHeader from '../../components/ModalHeader';
+import pluginId from '../../pluginId';
+import stepper from './stepper';
+import useModalContext from '../../hooks/useModalContext';
+
+const InputModalStepper = ({
+  allowedActions,
+  isOpen,
+  onToggle,
+  noNavigation,
+  onInputMediaChange,
+}) => {
+  const { emitEvent, formatMessage } = useGlobalContext();
+  const [shouldDeleteFile, setShouldDeleteFile] = useState(false);
+  const [displayNextButton, setDisplayNextButton] = useState(false);
+  const {
+    addFilesToUpload,
+    currentStep,
+    downloadFiles,
+    fetchMediaLib,
+    filesToDownload,
+    filesToUpload,
+    fileToEdit,
+    formErrors,
+    goTo,
+    handleAbortUpload,
+    handleCancelFileToUpload,
+    handleCleanFilesError,
+    handleClearFilesToUploadAndDownload,
+    handleClickNextButton,
+    handleClose,
+    handleEditExistingFile,
+    handleFileSelection,
+    handleFileToEditChange,
+    handleFormDisabled,
+    handleGoToEditNewFile,
+    handleRemoveFileToUpload,
+    handleResetFileToEdit,
+    handleSetCropResult,
+    handleSetFileToEditError,
+    handleUploadFiles,
+    initialFileToEdit,
+    initialSelectedFiles,
+    isFormDisabled,
+    isWarningDeleteOpen,
+    multiple,
+    selectedFiles,
+    submitEditNewFile,
+    submitEditExistingFile,
+    toggleModalWarning,
+  } = useModalContext();
+  const {
+    backButtonDestination,
+    Component,
+    components,
+    headerBreadcrumbs,
+    next,
+    prev,
+    withBackButton,
+    HeaderComponent,
+  } = stepper[currentStep];
+  const filesToUploadLength = filesToUpload.length;
+  const editModalRef = useRef();
+
+  const handleReplaceMedia = () => {
+    emitEvent('didReplaceMedia', { location: 'upload' });
+
+    editModalRef.current.click();
+  };
+
+  useEffect(() => {
+    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 addFilesToUploadList = ({ target: { value } }) => {
+    addFilesToUpload({ target: { value } });
+
+    goNext();
+  };
+
+  const goBack = (elementName = null) => {
+    const hasFilesToUpload = !isEmpty(filesToUpload);
+
+    // Redirect the user to the list modal from the upload one
+    if (elementName === 'backButton' && backButtonDestination && currentStep === 'upload') {
+      if (hasFilesToUpload) {
+        // eslint-disable-next-line no-alert
+        const confirm = window.confirm(
+          formatMessage({ id: getTrad('window.confirm.close-modal.files') })
+        );
+
+        if (!confirm) {
+          return;
+        }
+      }
+
+      goTo(backButtonDestination);
+      handleClearFilesToUploadAndDownload();
+
+      return;
+    }
+
+    if (
+      elementName === 'backButton' &&
+      backButtonDestination &&
+      currentStep === 'browse' &&
+      hasFilesToUpload
+    ) {
+      goTo(backButtonDestination);
+
+      return;
+    }
+
+    goTo(prev);
+  };
+
+  const goNext = () => {
+    if (next === null) {
+      onToggle();
+
+      return;
+    }
+
+    goTo(next);
+  };
+
+  const goToList = () => {
+    fetchMediaLib();
+    goTo('list');
+  };
+
+  const handleClickDeleteFile = async () => {
+    toggleModalWarning();
+  };
+
+  const handleClickDeleteFileToUpload = fileIndex => {
+    handleRemoveFileToUpload(fileIndex);
+
+    if (currentStep === 'edit-new') {
+      handleResetFileToEdit();
+
+      goNext();
+    }
+  };
+
+  const handleCloseModal = () => {
+    setDisplayNextButton(false);
+    handleClose();
+  };
+
+  const handleConfirmDeleteFile = () => {
+    setShouldDeleteFile(true);
+    toggleModalWarning();
+  };
+
+  const handleGoToAddBrowseFiles = () => {
+    handleCleanFilesError();
+
+    goBack();
+  };
+
+  const handleSubmitEditNewFile = e => {
+    e.preventDefault();
+    submitEditNewFile();
+    goNext();
+  };
+
+  const handleSubmit = e => {
+    e.preventDefault();
+    onInputMediaChange(multiple ? selectedFiles : selectedFiles[0]);
+    goNext();
+  };
+
+  const handleCloseModalWarning = async () => {
+    if (shouldDeleteFile) {
+      const { id } = fileToEdit;
+
+      try {
+        const requestURL = getRequestUrl(`files/${id}`);
+
+        await request(requestURL, { method: 'DELETE' });
+
+        setShouldDeleteFile(false);
+
+        // Remove file from selected files on delete and go back to the list.
+        handleFileSelection({ target: { name: id } });
+        goToList();
+      } catch (err) {
+        console.error(err);
+
+        const status = get(err, 'response.status', get(err, 'status', null));
+        const statusText = get(err, 'response.statusText', get(err, 'statusText', null));
+        const errorMessage = get(
+          err,
+          ['response', 'payload', 'message', '0', 'messages', '0', 'message'],
+          get(err, ['response', 'payload', 'message'], statusText)
+        );
+        strapi.notification.toggle({
+          type: 'warning',
+          message: errorMessage,
+        });
+
+        if (status) {
+          handleSetFileToEditError(errorMessage);
+        }
+      }
+    }
+  };
+
+  const handleSubmitEditExistingFile = async (
+    e,
+    shouldDuplicateMedia = false,
+    file = fileToEdit.file,
+    isSubmittingAfterCrop = false
+  ) => {
+    e.preventDefault();
+
+    submitEditExistingFile();
+
+    if (isSubmittingAfterCrop) {
+      emitEvent('didCropFile', {
+        duplicatedFile: shouldDuplicateMedia,
+        location: 'content-manager',
+      });
+    }
+
+    const headers = {};
+    const formData = new FormData();
+
+    // If the file has been cropped we need to add it to the formData
+    // otherwise we just don't send it
+    const didCropFile = file instanceof File;
+    const { abortController, id, fileInfo } = fileToEdit;
+    const requestURL = shouldDuplicateMedia ? `/${pluginId}` : `/${pluginId}?id=${id}`;
+
+    if (didCropFile) {
+      formData.append('files', file);
+    }
+
+    formData.append('fileInfo', JSON.stringify(fileInfo));
+
+    try {
+      const editedFile = await request(
+        requestURL,
+        {
+          method: 'POST',
+          headers,
+          body: formData,
+          signal: abortController.signal,
+        },
+        false,
+        false
+      );
+
+      handleEditExistingFile(editedFile);
+      goToList();
+    } catch (err) {
+      const status = get(err, 'response.status', get(err, 'status', null));
+      const statusText = get(err, 'response.statusText', get(err, 'statusText', null));
+      let errorMessage = get(
+        err,
+        ['response', 'payload', 'message', '0', 'messages', '0', 'message'],
+        get(err, ['response', 'payload', 'message'], statusText)
+      );
+
+      // TODO fix errors globally when the back-end sends readable one
+      if (status === 413) {
+        errorMessage = formatMessage({ id: 'app.utils.errors.file-too-big.message' });
+      }
+
+      if (status) {
+        handleSetFileToEditError(errorMessage);
+      }
+    }
+  };
+
+  const handleToggle = () => {
+    if (filesToUploadLength > 0) {
+      // eslint-disable-next-line no-alert
+      const confirm = window.confirm(
+        formatMessage({ id: getTrad('window.confirm.close-modal.files') })
+      );
+
+      if (!confirm) {
+        return;
+      }
+    }
+
+    if (
+      (currentStep === 'list' && !isEqual(selectedFiles, initialSelectedFiles)) ||
+      (currentStep === 'edit' && initialFileToEdit && !isEqual(fileToEdit, initialFileToEdit)) ||
+      (currentStep === 'edit' && selectedFiles.length > 0)
+    ) {
+      // eslint-disable-next-line no-alert
+      const confirm = window.confirm(
+        formatMessage({ id: getTrad('window.confirm.close-modal.file') })
+      );
+
+      if (!confirm) {
+        return;
+      }
+    }
+
+    onToggle(true);
+  };
+
+  const shouldDisplayNextButton = currentStep === 'browse' && displayNextButton;
+  const isFinishButtonDisabled = filesToUpload.some(file => file.isDownloading || file.isUploading);
+  const areButtonsDisabledOnEditExistingFile =
+    currentStep === 'edit' && fileToEdit.isUploading === true;
+
+  return (
+    <>
+      <Modal isOpen={isOpen} onToggle={handleToggle} onClosed={handleCloseModal}>
+        {/* header title */}
+        <ModalHeader
+          goBack={goBack}
+          HeaderComponent={HeaderComponent}
+          headerBreadcrumbs={headerBreadcrumbs}
+          withBackButton={withBackButton}
+        />
+        {/* body of the modal */}
+        {Component && (
+          <Component
+            {...allowedActions}
+            addFilesToUpload={addFilesToUploadList}
+            components={components}
+            filesToDownload={filesToDownload}
+            filesToUpload={filesToUpload}
+            fileToEdit={fileToEdit}
+            formErrors={formErrors}
+            isEditingUploadedFile={currentStep === 'edit'}
+            isFormDisabled={isFormDisabled}
+            noNavigation={noNavigation}
+            onAbortUpload={handleAbortUpload}
+            onChange={handleFileToEditChange}
+            onClickCancelUpload={handleCancelFileToUpload}
+            onClickDeleteFileToUpload={
+              currentStep === 'edit' ? handleClickDeleteFile : handleClickDeleteFileToUpload
+            }
+            onSubmitEdit={
+              currentStep === 'edit' ? handleSubmitEditExistingFile : handleSubmitEditNewFile
+            }
+            onClickEditNewFile={handleGoToEditNewFile}
+            onGoToAddBrowseFiles={handleGoToAddBrowseFiles}
+            onSubmitEditNewFile={handleSubmitEditNewFile}
+            ref={currentStep === 'edit' ? editModalRef : null}
+            toggleDisableForm={handleFormDisabled}
+            onToggle={handleToggle}
+            setCropResult={handleSetCropResult}
+            setShouldDisplayNextButton={setDisplayNextButton}
+            withBackButton={withBackButton}
+          />
+        )}
+
+        <ModalFooter>
+          <section>
+            <Button type="button" color="cancel" onClick={handleToggle}>
+              {formatMessage({ id: 'app.components.Button.cancel' })}
+            </Button>
+            {currentStep === 'upload' && (
+              <Button
+                type="button"
+                color="success"
+                onClick={handleUploadFiles}
+                disabled={isFinishButtonDisabled}
+              >
+                {formatMessage(
+                  {
+                    id: getTrad(
+                      `modal.upload-list.footer.button.${
+                        filesToUploadLength > 1 ? 'plural' : 'singular'
+                      }`
+                    ),
+                  },
+                  { number: filesToUploadLength }
+                )}
+              </Button>
+            )}
+            {shouldDisplayNextButton && (
+              <Button
+                type="button"
+                color="primary"
+                onClick={handleClickNextButton}
+                disabled={isEmpty(filesToDownload)}
+              >
+                {formatMessage({ id: getTrad('button.next') })}
+              </Button>
+            )}
+            {currentStep === 'edit-new' && (
+              <Button color="success" type="button" onClick={handleSubmitEditNewFile}>
+                {formatMessage({ id: 'form.button.finish' })}
+              </Button>
+            )}
+            {currentStep === 'edit' && (
+              <div style={{ margin: 'auto 0' }}>
+                <Button
+                  disabled={isFormDisabled || areButtonsDisabledOnEditExistingFile}
+                  color="primary"
+                  onClick={handleReplaceMedia}
+                  style={{ marginRight: 10 }}
+                >
+                  {formatMessage({ id: getTrad('control-card.replace-media') })}
+                </Button>
+
+                <Button
+                  disabled={isFormDisabled || areButtonsDisabledOnEditExistingFile}
+                  color="success"
+                  type="button"
+                  onClick={handleSubmitEditExistingFile}
+                >
+                  {formatMessage({ id: 'form.button.finish' })}
+                </Button>
+              </div>
+            )}
+            {currentStep === 'list' && (
+              <Button color="success" type="button" onClick={handleSubmit}>
+                {formatMessage({ id: 'form.button.finish' })}
+              </Button>
+            )}
+          </section>
+        </ModalFooter>
+      </Modal>
+      <PopUpWarning
+        onClosed={handleCloseModalWarning}
+        isOpen={isWarningDeleteOpen}
+        toggleModal={toggleModalWarning}
+        popUpWarningType="danger"
+        onConfirm={handleConfirmDeleteFile}
+      />
+    </>
+  );
+};
+
+InputModalStepper.defaultProps = {
+  allowedActions: {
+    canCopyLink: true,
+    canCreate: true,
+    canDownload: true,
+    canMain: true,
+    canRead: true,
+    canSettings: true,
+    canUpdate: true,
+  },
+  noNavigation: false,
+  onToggle: () => {},
+};
+
+InputModalStepper.propTypes = {
+  allowedActions: PropTypes.shape({
+    canCopyLink: PropTypes.bool,
+    canCreate: PropTypes.bool,
+    canDownload: PropTypes.bool,
+    canMain: PropTypes.bool,
+    canRead: PropTypes.bool,
+    canSettings: PropTypes.bool,
+    canUpdate: PropTypes.bool,
+  }),
+  isOpen: PropTypes.bool.isRequired,
+  noNavigation: PropTypes.bool,
+  onInputMediaChange: PropTypes.func.isRequired,
+  onToggle: PropTypes.func,
+};
+
+export default memo(InputModalStepper);

package/admin/src/containers/InputModalStepper/Search.js

@@ -0,0 +1,48 @@
+import React, { useState, useEffect, memo } from 'react';
+import { useDebounce } from '@buffetjs/hooks';
+import { useGlobalContext } from 'strapi-helper-plugin';
+
+import getTrad from '../../utils/getTrad';
+import useModalContext from '../../hooks/useModalContext';
+import HeaderSearch from './HeaderSearch';
+
+const Search = () => {
+  const [value, setValue] = useState('');
+  const {
+    allowedActions: { canRead },
+    setParam,
+  } = useModalContext();
+  const { formatMessage } = useGlobalContext();
+  const debouncedSearch = useDebounce(value, 300);
+
+  useEffect(() => {
+    if (canRead) {
+      setParam({ name: '_q', value: debouncedSearch });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [debouncedSearch, canRead]);
+
+  const handleSearchChange = e => {
+    setValue(e.target.value);
+  };
+
+  const handleClear = () => {
+    setValue('');
+  };
+
+  if (!canRead) {
+    return null;
+  }
+
+  return (
+    <HeaderSearch
+      onChange={handleSearchChange}
+      onClear={handleClear}
+      placeholder={formatMessage({ id: getTrad('search.placeholder') })}
+      name="_q"
+      value={value}
+    />
+  );
+};
+
+export default memo(Search);

package/admin/src/containers/InputModalStepper/index.js

@@ -0,0 +1,86 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useUserPermissions } from 'strapi-helper-plugin';
+import { DndProvider } from 'react-dnd';
+import HTML5Backend from 'react-dnd-html5-backend';
+import { omit } from 'lodash';
+import DragLayer from '../../components/DragLayer';
+
+import pluginPermissions from '../../permissions';
+import InputModalStepper from './InputModalStepper';
+import InputModalStepperProvider from '../InputModalStepperProvider';
+
+const InputModal = ({
+  allowedTypes,
+  filesToUpload,
+  fileToEdit,
+  isOpen,
+  multiple,
+  noNavigation,
+  onClosed,
+  onInputMediaChange,
+  onToggle,
+  selectedFiles,
+  step,
+}) => {
+  const singularTypes = allowedTypes.map(type => type.substring(0, type.length - 1));
+  const permissions = React.useMemo(() => omit(pluginPermissions, 'main'), []);
+  const { allowedActions, isLoading } = useUserPermissions(permissions);
+
+  if (isLoading) {
+    return null;
+  }
+
+  return (
+    <DndProvider backend={HTML5Backend}>
+      <DragLayer />
+      <InputModalStepperProvider
+        allowedActions={allowedActions}
+        onClosed={onClosed}
+        initialFilesToUpload={filesToUpload}
+        initialFileToEdit={fileToEdit}
+        isOpen={isOpen}
+        multiple={multiple}
+        noNavigation={noNavigation}
+        selectedFiles={selectedFiles}
+        step={step}
+        allowedTypes={singularTypes}
+      >
+        <InputModalStepper
+          allowedActions={allowedActions}
+          isOpen={isOpen}
+          noNavigation={noNavigation}
+          onToggle={onToggle}
+          onInputMediaChange={onInputMediaChange}
+        />
+      </InputModalStepperProvider>
+    </DndProvider>
+  );
+};
+
+InputModal.defaultProps = {
+  allowedTypes: [],
+  filesToUpload: null,
+  fileToEdit: null,
+  noNavigation: false,
+  onInputMediaChange: () => {},
+  onToggle: () => {},
+  selectedFiles: [],
+  step: 'list',
+};
+
+InputModal.propTypes = {
+  allowedTypes: PropTypes.arrayOf(PropTypes.string),
+  filesToUpload: PropTypes.object,
+  fileToEdit: PropTypes.object,
+  isOpen: PropTypes.bool.isRequired,
+  multiple: PropTypes.bool.isRequired,
+  noNavigation: PropTypes.bool,
+  onClosed: PropTypes.func.isRequired,
+  onInputMediaChange: PropTypes.func,
+  onToggle: PropTypes.func,
+  selectedFiles: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+  step: PropTypes.string,
+};
+
+export default InputModal;

package/admin/src/containers/InputModalStepper/stepper.js

@@ -0,0 +1,52 @@
+import CheckControl from '../../components/CheckControl';
+import EditForm from '../../components/EditForm';
+import getTrad from '../../utils/getTrad';
+import ListModal from '../../components/ListModal';
+import Search from './Search';
+import UploadForm from '../../components/UploadForm';
+import UploadList from '../../components/UploadList';
+
+const stepper = {
+  list: {
+    Component: ListModal,
+    HeaderComponent: Search,
+    prev: null,
+    next: null,
+  },
+  browse: {
+    Component: UploadForm,
+    headerBreadcrumbs: [getTrad('modal.header.browse')],
+    prev: 'list',
+    next: 'upload',
+    withBackButton: true,
+    backButtonDestination: 'upload',
+  },
+  upload: {
+    Component: UploadList,
+    headerBreadcrumbs: [getTrad('modal.header.select-files')],
+    next: null,
+    prev: 'browse',
+    withBackButton: true,
+    // Exception in order to not update the entire code
+    backButtonDestination: 'list',
+  },
+  'edit-new': {
+    Component: EditForm,
+    headerBreadcrumbs: [getTrad('modal.header.file-detail')],
+    next: 'upload',
+    prev: 'upload',
+    withBackButton: true,
+  },
+  edit: {
+    Component: EditForm,
+    components: {
+      CheckControl,
+    },
+    headerBreadcrumbs: [getTrad('modal.header.select-files'), getTrad('modal.header.file-detail')],
+    next: null,
+    prev: 'list',
+    withBackButton: true,
+  },
+};
+
+export default stepper;