@akemona-org/strapi-plugin-upload 3.7.0

package/admin/src/components/EditForm/FileWrapper.js

@@ -0,0 +1,41 @@
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+import { themePropTypes } from 'strapi-helper-plugin';
+
+import CardImgWrapper from '../CardImgWrapper';
+
+const FileWrapper = styled(CardImgWrapper)`
+  height: 401px;
+  width: 100%;
+  display: flex;
+  position: relative;
+  background-color: ${({ theme }) => theme.main.colors.black};
+  ${({ hasError, theme }) => hasError && `border: 2px solid ${theme.main.colors.orange};`}
+
+  .cropper-view-box {
+    outline-color: ${({ theme }) => theme.main.colors.white};
+  }
+  .cropper-point {
+    background-color: ${({ theme }) => theme.main.colors.white};
+    border-radius: 50%;
+  }
+
+  .point-se {
+    &:before {
+      display: none;
+    }
+    height: 5px;
+    width: 5px;
+  }
+`;
+
+FileWrapper.defaultProps = {
+  hasError: false,
+};
+
+FileWrapper.propTypes = {
+  hasError: PropTypes.bool,
+  ...themePropTypes,
+};
+
+export default FileWrapper;

package/admin/src/components/EditForm/FormWrapper.js

@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+
+const FormWrapper = styled.div`
+  margin-top: 19px;
+`;
+
+export default FormWrapper;

package/admin/src/components/EditForm/SizeBox.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Text } from '@buffetjs/core';
+
+const SizeBox = styled(props => <Text {...props} fontSize="md" color="white" as="div" />)`
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  background: #000000;
+  border-radius: ${({ theme }) => theme.main.sizes.borderRadius};
+`;
+
+export default SizeBox;

package/admin/src/components/EditForm/Wrapper.js

@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+import ContainerFluid from '../ContainerFluid';
+
+const Wrapper = styled(ContainerFluid)`
+  padding-top: 18px;
+`;
+
+export default Wrapper;

package/admin/src/components/EditForm/index.js

@@ -0,0 +1,425 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+/* eslint-disable react/jsx-fragments */
+import React, {
+  Fragment,
+  forwardRef,
+  useState,
+  useEffect,
+  useRef,
+  useImperativeHandle,
+} from 'react';
+import { CopyToClipboard } from 'react-copy-to-clipboard';
+import axios from 'axios';
+import { get } from 'lodash';
+import PropTypes from 'prop-types';
+import { Row } from 'reactstrap';
+import { Inputs } from '@buffetjs/custom';
+import { useGlobalContext, prefixFileUrlWithBackendUrl } from 'strapi-helper-plugin';
+import Cropper from 'cropperjs';
+import 'cropperjs/dist/cropper.css';
+import { createFileToDownloadName } from '../../utils';
+import CardControl from '../CardControl';
+import CardControlsWrapper from '../CardControlsWrapper';
+import CardPreview from '../CardPreview';
+import InfiniteLoadingIndicator from '../InfiniteLoadingIndicator';
+import ModalSection from '../ModalSection';
+import VideoPlayer from '../VideoPlayer';
+import CropWrapper from './CropWrapper';
+import FileDetailsBox from './FileDetailsBox';
+import FileWrapper from './FileWrapper';
+import FormWrapper from './FormWrapper';
+import SizeBox from './SizeBox';
+import Wrapper from './Wrapper';
+import ErrorMessage from './ErrorMessage';
+import form from './utils/form';
+import isImageType from './utils/isImageType';
+import isVideoType from './utils/isVideoType';
+
+const EditForm = forwardRef(
+  (
+    {
+      canCopyLink,
+      canDownload,
+      components,
+      fileToEdit,
+      isEditingUploadedFile,
+      isFormDisabled,
+      onAbortUpload,
+      onChange,
+      onClickDeleteFileToUpload,
+      onSubmitEdit,
+      setCropResult,
+      toggleDisableForm,
+    },
+    ref
+  ) => {
+    const { formatMessage } = useGlobalContext();
+    const [isCropping, setIsCropping] = useState(false);
+    const [infos, setInfos] = useState({ width: null, height: null });
+    const [src, setSrc] = useState(null);
+    const cacheRef = useRef(performance.now());
+
+    const fileURL = get(fileToEdit, ['file', 'url'], null);
+    const prefixedFileURL = fileURL
+      ? prefixFileUrlWithBackendUrl(`${fileURL}?${cacheRef.current}`)
+      : null;
+    const downloadFileName = createFileToDownloadName(fileToEdit);
+    const mimeType =
+      get(fileToEdit, ['file', 'type'], null) || get(fileToEdit, ['file', 'mime'], '');
+    const isImg = isImageType(mimeType);
+    const isVideo = isVideoType(mimeType);
+    const canCrop = isImg && !mimeType.includes('svg') && !mimeType.includes('gif');
+    const aRef = useRef();
+    const imgRef = useRef();
+    const inputRef = useRef();
+    const cropper = useRef();
+
+    useImperativeHandle(ref, () => ({
+      click: () => {
+        inputRef.current.click();
+        setIsCropping(false);
+      },
+    }));
+
+    useEffect(() => {
+      if (isImg || isVideo) {
+        if (prefixedFileURL) {
+          setSrc(prefixedFileURL);
+        } else {
+          setSrc(URL.createObjectURL(fileToEdit.file));
+        }
+      }
+    }, [isImg, isVideo, fileToEdit, prefixedFileURL]);
+
+    useEffect(() => {
+      if (isCropping) {
+        cropper.current = new Cropper(imgRef.current, {
+          modal: true,
+          initialAspectRatio: 16 / 9,
+          movable: true,
+          zoomable: false,
+          cropBoxResizable: true,
+          background: false,
+          crop: handleResize,
+        });
+      } else if (cropper.current) {
+        cropper.current.destroy();
+
+        setInfos({ width: null, height: null });
+        toggleDisableForm(false);
+      }
+
+      return () => {
+        if (cropper.current) {
+          cropper.current.destroy();
+        }
+      };
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [cropper, isCropping]);
+
+    const handleResize = ({ detail: { height, width } }) => {
+      const roundedDataHeight = Math.round(height);
+      const roundedDataWidth = Math.round(width);
+
+      setInfos({ width: roundedDataWidth, height: roundedDataHeight });
+    };
+
+    const handleToggleCropMode = () => {
+      setIsCropping(prev => {
+        if (!prev && isEditingUploadedFile) {
+          toggleDisableForm(true);
+        }
+
+        return !prev;
+      });
+    };
+
+    const handleChange = ({ target: { files } }) => {
+      if (files[0]) {
+        onChange({ target: { name: 'file', value: files[0] } });
+      }
+    };
+
+    const handleClick = async () => {
+      const cropResult = await getCroppedResult();
+
+      setCropResult(cropResult);
+
+      setIsCropping(false);
+    };
+
+    const getCroppedResult = () => {
+      return new Promise((resolve, reject) => {
+        try {
+          const canvas = cropper.current.getCroppedCanvas();
+
+          canvas.toBlob(
+            async blob => {
+              const {
+                file: { lastModifiedDate, lastModified, name },
+              } = fileToEdit;
+
+              resolve(
+                new File([blob], name, {
+                  type: mimeType,
+                  lastModified,
+                  lastModifiedDate,
+                })
+              );
+            },
+            mimeType,
+            1
+          );
+        } catch (err) {
+          reject();
+        }
+      });
+    };
+
+    const handleClickEditCroppedFile = async (e, shouldDuplicate = false) => {
+      try {
+        const file = await getCroppedResult();
+
+        onSubmitEdit(e, shouldDuplicate, file, true);
+      } catch (err) {
+        // Silent
+      } finally {
+        setIsCropping(false);
+      }
+    };
+
+    const handleClickDelete = () => {
+      onClickDeleteFileToUpload(fileToEdit.originalIndex);
+    };
+
+    const handleCopy = () => {
+      strapi.notification.toggle({
+        type: 'info',
+        message: { id: 'notification.link-copied' },
+      });
+    };
+
+    const handleClickDownload = () => {
+      axios
+        .get(prefixFileUrlWithBackendUrl(fileURL), {
+          responseType: 'blob',
+        })
+        .then(({ data }) => {
+          const blobUrl = URL.createObjectURL(data);
+
+          aRef.current.download = downloadFileName;
+          aRef.current.href = blobUrl;
+
+          aRef.current.click();
+        })
+        .catch(err => {
+          console.error(err);
+        });
+    };
+
+    const handleSubmit = e => {
+      e.preventDefault();
+
+      onSubmitEdit(e);
+    };
+
+    const CheckButton = components.CheckControl;
+
+    return (
+      <form onSubmit={handleSubmit}>
+        <ModalSection>
+          <Wrapper>
+            <div className="row">
+              <div className="col-6">
+                <FileWrapper hasError={fileToEdit.hasError}>
+                  {fileToEdit.isUploading ? (
+                    <InfiniteLoadingIndicator onClick={onAbortUpload} />
+                  ) : (
+                    <Fragment>
+                      <CardControlsWrapper className="card-control-wrapper-displayed">
+                        {!isCropping ? (
+                          <>
+                            <CardControl
+                              color="#9EA7B8"
+                              type="trash-alt"
+                              onClick={handleClickDelete}
+                              title="delete"
+                            />
+                            {fileURL && (
+                              <>
+                                {canDownload && (
+                                  <CardControl
+                                    color="#9EA7B8"
+                                    onClick={handleClickDownload}
+                                    type="download"
+                                    title="download"
+                                  />
+                                )}
+                                <a
+                                  title={fileToEdit.fileInfo.name}
+                                  style={{ display: 'none' }}
+                                  ref={aRef}
+                                >
+                                  hidden
+                                </a>
+                                {canCopyLink && (
+                                  <CopyToClipboard
+                                    onCopy={handleCopy}
+                                    text={prefixFileUrlWithBackendUrl(fileURL)}
+                                  >
+                                    <CardControl color="#9EA7B8" type="link" title="copy-link" />
+                                  </CopyToClipboard>
+                                )}
+                              </>
+                            )}
+                            {canCrop && (
+                              <CardControl
+                                color="#9EA7B8"
+                                onClick={handleToggleCropMode}
+                                type="crop"
+                                title="crop"
+                              />
+                            )}
+                          </>
+                        ) : (
+                          <>
+                            <CardControl
+                              color="#F64D0A"
+                              onClick={handleToggleCropMode}
+                              type="times"
+                              title="cancel"
+                              iconStyle={{ height: '1.6rem', width: '1.6rem' }}
+                            />
+                            <CheckButton
+                              color="#6DBB1A"
+                              onClick={handleClick}
+                              onSubmitEdit={handleClickEditCroppedFile}
+                              type="check"
+                              title="save"
+                            />
+                          </>
+                        )}
+                      </CardControlsWrapper>
+                      {isImg ? (
+                        <CropWrapper>
+                          <img
+                            src={src}
+                            alt={get(fileToEdit, ['file', 'name'], '')}
+                            ref={isCropping ? imgRef : null}
+                          />
+                        </CropWrapper>
+                      ) : (
+                        <>
+                          {isVideo ? (
+                            <VideoPlayer src={src} />
+                          ) : (
+                            <CardPreview type={mimeType} url={src} />
+                          )}
+                        </>
+                      )}
+
+                      {isCropping && infos.width !== null && (
+                        <SizeBox>
+                          &nbsp;
+                          {infos.width} x {infos.height}
+                          &nbsp;
+                        </SizeBox>
+                      )}
+                    </Fragment>
+                  )}
+                </FileWrapper>
+                {fileToEdit.hasError && (
+                  <ErrorMessage title={fileToEdit.errorMessage}>
+                    {fileToEdit.errorMessage}
+                  </ErrorMessage>
+                )}
+              </div>
+              <div className="col-6">
+                <FileDetailsBox file={fileToEdit.file} />
+                <FormWrapper>
+                  {form.map(({ key, inputs }) => {
+                    return (
+                      <Row key={key}>
+                        {inputs.map(input => {
+                          return (
+                            <div className="col-12" key={input.name}>
+                              <Inputs
+                                {...input}
+                                disabled={isFormDisabled}
+                                description={
+                                  input.description ? formatMessage(input.description) : null
+                                }
+                                label={formatMessage(input.label)}
+                                onChange={onChange}
+                                type="text"
+                                value={get(fileToEdit, input.name, '')}
+                              />
+                            </div>
+                          );
+                        })}
+                      </Row>
+                    );
+                  })}
+                </FormWrapper>
+              </div>
+            </div>
+          </Wrapper>
+          <input
+            ref={inputRef}
+            type="file"
+            multiple={false}
+            onChange={handleChange}
+            style={{ display: 'none' }}
+            accept={mimeType
+              .split('/')
+              .map((v, i) => {
+                if (i === 1) {
+                  return '*';
+                }
+
+                return v;
+              })
+              .join('/')}
+          />
+          <button type="submit" style={{ display: 'none' }}>
+            hidden button to make to get the native form event
+          </button>
+        </ModalSection>
+      </form>
+    );
+  }
+);
+
+EditForm.defaultProps = {
+  canCopyLink: true,
+  canDownload: true,
+  components: {
+    CheckControl: CardControl,
+  },
+  fileToEdit: null,
+  isEditingUploadedFile: false,
+  isFormDisabled: false,
+  onAbortUpload: () => {},
+  onChange: () => {},
+  onClickDeleteFileToUpload: () => {},
+  onSubmitEdit: e => e.preventDefault(),
+  setCropResult: () => {},
+  toggleDisableForm: () => {},
+};
+
+EditForm.propTypes = {
+  canCopyLink: PropTypes.bool,
+  canDownload: PropTypes.bool,
+  onAbortUpload: PropTypes.func,
+  components: PropTypes.object,
+  fileToEdit: PropTypes.object,
+  isEditingUploadedFile: PropTypes.bool,
+  isFormDisabled: PropTypes.bool,
+  onChange: PropTypes.func,
+  onClickDeleteFileToUpload: PropTypes.func,
+  onSubmitEdit: PropTypes.func,
+  setCropResult: PropTypes.func,
+  toggleDisableForm: PropTypes.func,
+};
+
+export default EditForm;

package/admin/src/components/EditForm/utils/form.js

@@ -0,0 +1,34 @@
+import { getTrad } from '../../../utils';
+
+const form = [
+  {
+    key: 1,
+    inputs: [
+      {
+        label: { id: getTrad('form.input.label.file-name') },
+        name: 'fileInfo.name',
+      },
+    ],
+  },
+  {
+    key: 2,
+    inputs: [
+      {
+        description: { id: getTrad('form.input.description.file-alt') },
+        label: { id: getTrad('form.input.label.file-alt') },
+        name: 'fileInfo.alternativeText',
+      },
+    ],
+  },
+  {
+    key: 3,
+    inputs: [
+      {
+        label: { id: getTrad('form.input.label.file-caption') },
+        name: 'fileInfo.caption',
+      },
+    ],
+  },
+];
+
+export default form;

package/admin/src/components/EditForm/utils/isImageType.js

@@ -0,0 +1,3 @@
+const isImageType = mimeType => mimeType.includes('image');
+
+export default isImageType;

package/admin/src/components/EditForm/utils/isVideoType.js

@@ -0,0 +1,3 @@
+const isVideoType = mimeType => mimeType.includes('video');
+
+export default isVideoType;

package/admin/src/components/FileIcon/Wrapper.js

@@ -0,0 +1,20 @@
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+import { themePropTypes } from 'strapi-helper-plugin';
+
+const Wrapper = styled.div`
+  font-size: 54px;
+  color: ${({ theme, colored }) =>
+    colored ? theme.main.colors.lightOrange : theme.main.colors.grey};
+`;
+
+Wrapper.defaultProps = {
+  colored: false,
+};
+
+Wrapper.propTypes = {
+  colored: PropTypes.bool,
+  ...themePropTypes,
+};
+
+export default Wrapper;

package/admin/src/components/FileIcon/index.js

@@ -0,0 +1,33 @@
+/**
+ *
+ *
+ * FileIcon
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+import extensions from './utils/extensions.json';
+
+import Wrapper from './Wrapper';
+
+const FileIcon = ({ ext }) => {
+  const iconName = Object.keys(extensions).find(key => extensions[key].includes(ext)) || 'alt';
+
+  return (
+    <Wrapper type="file" colored={iconName === 'pdf'}>
+      <FontAwesomeIcon icon={['far', `file-${iconName}`]} />
+    </Wrapper>
+  );
+};
+
+FileIcon.defaultProps = {
+  ext: 'alt',
+};
+
+FileIcon.propTypes = {
+  ext: PropTypes.string,
+};
+
+export default FileIcon;

package/admin/src/components/FileIcon/utils/extensions.json

@@ -0,0 +1,4 @@
+{
+  "archive": ["rar", "tar", "zip"],
+  "pdf": ["pdf"]
+}

package/admin/src/components/FileInfos/index.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { upperCase } from 'lodash';
+
+import { Text } from '@buffetjs/core';
+
+const FileInfos = ({ extension, height, size, width }) => {
+  return (
+    <Text color="grey" fontSize="xs" ellipsis>
+      {upperCase(extension)}
+      &nbsp;&mdash;&nbsp;
+      {width && height && `${width}×${height}\u00A0\u2014\u00A0`}
+      {size}
+    </Text>
+  );
+};
+
+FileInfos.defaultProps = {
+  height: null,
+  extension: null,
+  width: null,
+  size: null,
+};
+
+FileInfos.propTypes = {
+  height: PropTypes.number,
+  extension: PropTypes.string,
+  size: PropTypes.string,
+  width: PropTypes.number,
+};
+
+export default FileInfos;

package/admin/src/components/Filters/index.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Padded } from '@buffetjs/core';
+
+import FiltersList from '../FiltersList';
+import FiltersPicker from '../FiltersPicker';
+
+const Filters = ({ onChange, onClick, filters }) => {
+  return (
+    <>
+      <FiltersPicker onChange={onChange} />
+      <Padded left size="sm" />
+      <FiltersList filters={filters} onClick={onClick} />
+    </>
+  );
+};
+
+Filters.defaultProps = {
+  filters: [],
+  onChange: () => {},
+  onClick: () => {},
+};
+
+Filters.propTypes = {
+  filters: PropTypes.arrayOf(PropTypes.object),
+  onChange: PropTypes.func,
+  onClick: PropTypes.func,
+};
+
+export default Filters;