@kitconcept/core 2.0.0-alpha.4 → 2.0.0-alpha.6

package/src/components/Contents/DropZoneContent.jsx

@@ -0,0 +1,307 @@
+import { useState, useEffect } from 'react';
+import { useDispatch, useSelector, shallowEqual } from 'react-redux';
+import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
+import {
+  Button,
+  Modal,
+  Table,
+  Input,
+  Dimmer,
+  Progress,
+} from 'semantic-ui-react';
+import cx from 'classnames';
+import filesize from 'filesize';
+import { readAsDataURL } from 'promise-file-reader';
+
+import { createContent } from '@plone/volto/actions/content/content';
+import { usePrevious } from '@plone/volto/helpers/Utils/usePrevious';
+import { validateFileUploadSize } from '@plone/volto/helpers/FormValidation/FormValidation';
+import Icon from '@plone/volto/components/theme/Icon/Icon';
+import uploadSVG from '@plone/volto/icons/upload.svg';
+import clearSVG from '@plone/volto/icons/clear.svg';
+import FormattedRelativeDate from '@plone/volto/components/theme/FormattedDate/FormattedRelativeDate';
+import Image from '@plone/volto/components/theme/Image/Image';
+
+const SUBREQUEST = 'batch-upload';
+
+const messages = defineMessages({
+  cancel: {
+    id: 'Cancel',
+    defaultMessage: 'Cancel',
+  },
+  upload: {
+    id: '{count, plural, one {Upload {count} file} other {Upload {count} files}}',
+    defaultMessage:
+      '{count, plural, one {Upload {count} file} other {Upload {count} files}}',
+  },
+  filesUploaded: {
+    id: 'Files uploaded: {uploadedFiles}',
+    defaultMessage: 'Files uploaded: {uploadedFiles}',
+  },
+  totalFilesToUpload: {
+    id: 'Total files to upload: {totalFiles}',
+    defaultMessage: 'Total files to upload: {totalFiles}',
+  },
+});
+
+const DropZoneContent = (props) => {
+  const { onOk, onCancel, pathname, children } = props;
+  const [isDragOver, setIsDragOver] = useState(false);
+  const [showModal, setShowModal] = useState(false);
+  const [droppedFiles, setDroppedFiles] = useState([]);
+  const [totalFiles, setTotalFiles] = useState(0);
+
+  const intl = useIntl();
+  const dispatch = useDispatch();
+
+  const request = useSelector(
+    (state) => state.content.subrequests?.[SUBREQUEST] || {},
+    shallowEqual,
+  );
+
+  const uploadedFiles = useSelector((state) => state.content.uploadedFiles);
+  const prevrequestloading = usePrevious(request.loading);
+
+  useEffect(() => {
+    if (prevrequestloading && request.loaded) {
+      onOk();
+      setDroppedFiles([]);
+    }
+  }, [prevrequestloading, request.loaded, onOk]);
+
+  const handleDragEnter = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragOver(true);
+  };
+
+  const handleDragLeave = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (!e.currentTarget.contains(e.relatedTarget)) {
+      setIsDragOver(false);
+    }
+  };
+
+  const handleDragOver = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+  };
+
+  const onDrop = async (e) => {
+    setIsDragOver(false);
+    const newFiles = Array.from(e.dataTransfer.files);
+    const validFiles = [];
+    for (let i = 0; i < newFiles.length; i++) {
+      if (validateFileUploadSize(newFiles[i], intl.formatMessage)) {
+        await readAsDataURL(newFiles[i]).then((data) => {
+          const fields = data.match(/^data:(.*);(.*),(.*)$/);
+          newFiles[i].preview = fields[0];
+        });
+        validFiles.push(newFiles[i]);
+      }
+    }
+    setDroppedFiles(droppedFiles.concat(validFiles));
+    setTotalFiles(validFiles.length);
+    setShowModal(true);
+  };
+
+  const handleCloseModal = () => {
+    setShowModal(false);
+    onCancel();
+    setDroppedFiles([]);
+    setTotalFiles(0);
+  };
+
+  const onSubmit = () => {
+    Promise.all(droppedFiles.map((file) => readAsDataURL(file))).then(
+      (dataUrls) => {
+        dispatch(
+          createContent(
+            pathname,
+            droppedFiles.map((file, index) => {
+              const fields = dataUrls[index].match(/^data:(.*);(.*),(.*)$/);
+              const image = fields[1].split('/')[0] === 'image';
+              return {
+                '@type': image ? 'Image' : 'File',
+                title: file.name,
+                [image ? 'image' : 'file']: {
+                  data: fields[3],
+                  encoding: fields[2],
+                  'content-type': fields[1],
+                  filename: file.name,
+                },
+              };
+            }),
+            SUBREQUEST,
+          ),
+        );
+      },
+    );
+    handleCloseModal();
+  };
+  const onRemoveFile = (index) => {
+    const updatedFiles = droppedFiles.filter((file, i) => i !== index);
+    setDroppedFiles(updatedFiles);
+    setTotalFiles(updatedFiles.length);
+  };
+
+  const onChangeFileName = (e, index) => {
+    let copyOfFiles = [...droppedFiles];
+    let originalFile = droppedFiles[index];
+    let newFile = new File([originalFile], e.target.value, {
+      type: originalFile.type,
+    });
+
+    newFile.preview = originalFile.preview;
+    newFile.path = e.target.value;
+    copyOfFiles[index] = newFile;
+    setDroppedFiles(copyOfFiles);
+  };
+
+  return (
+    <>
+      <div
+        className={cx('contents-dropzone', {
+          'drag-over': isDragOver,
+          'drag-inactive': !isDragOver,
+        })}
+        onDragEnter={handleDragEnter}
+        onDragLeave={handleDragLeave}
+        onDragOver={handleDragOver}
+        onDrop={onDrop}
+      >
+        {children}
+        {isDragOver && (
+          <div className="dropzone-overlay">
+            <div className="dropzone-content">
+              <Icon name={uploadSVG} size="48px" />
+              <h3>Drop files here to upload</h3>
+              <p>Release to add file(s) to this folder</p>
+            </div>
+          </div>
+        )}
+      </div>
+      <Modal
+        open={showModal}
+        onClose={handleCloseModal}
+        className="contents-upload-modal"
+      >
+        <Modal.Header>Upload Files ({droppedFiles.length})</Modal.Header>
+        <Dimmer active={request.loading}>
+          <div className="progress-container">
+            <Progress
+              className="progress-bar"
+              value={uploadedFiles}
+              total={totalFiles}
+            >
+              {intl.formatMessage(messages.filesUploaded, {
+                uploadedFiles,
+              })}
+              <br />
+              {intl.formatMessage(messages.totalFilesToUpload, {
+                totalFiles,
+              })}
+            </Progress>
+          </div>
+        </Dimmer>
+        <Modal.Content>
+          {droppedFiles.length > 0 && (
+            <Table compact singleLine>
+              <Table.Header>
+                <Table.Row>
+                  <Table.HeaderCell width={8}>
+                    <FormattedMessage id="Filename" defaultMessage="Filename" />
+                  </Table.HeaderCell>
+                  <Table.HeaderCell width={4}>
+                    <FormattedMessage
+                      id="Last modified"
+                      defaultMessage="Last modified"
+                    />
+                  </Table.HeaderCell>
+                  <Table.HeaderCell width={4}>
+                    <FormattedMessage
+                      id="File size"
+                      defaultMessage="File size"
+                    />
+                  </Table.HeaderCell>
+                  <Table.HeaderCell width={4}>
+                    <FormattedMessage id="Preview" defaultMessage="Preview" />
+                  </Table.HeaderCell>
+                  <Table.HeaderCell />
+                </Table.Row>
+              </Table.Header>
+              <Table.Body>
+                {droppedFiles.map((file, index) => (
+                  <Table.Row className="upload-row" key={index}>
+                    <Table.Cell>
+                      <Input
+                        className="file-name"
+                        value={file.name}
+                        onChange={(e) => onChangeFileName(e, index)}
+                      />
+                    </Table.Cell>
+                    <Table.Cell>
+                      {file.lastModifiedDate && (
+                        <FormattedRelativeDate date={file.lastModifiedDate} />
+                      )}
+                    </Table.Cell>
+                    <Table.Cell>{filesize(file.size, { round: 0 })}</Table.Cell>
+                    <Table.Cell>
+                      {file.type.split('/')[0] === 'image' && (
+                        <Image
+                          src={file.preview}
+                          height={60}
+                          className="ui image"
+                        />
+                      )}
+                    </Table.Cell>
+                    <Table.Cell>
+                      <Icon
+                        name={clearSVG}
+                        size="24px"
+                        onClick={() => onRemoveFile(index)}
+                      />
+                    </Table.Cell>
+                  </Table.Row>
+                ))}
+              </Table.Body>
+            </Table>
+          )}
+        </Modal.Content>
+        <Modal.Actions>
+          {droppedFiles.length > 0 && (
+            <Button
+              basic
+              circular
+              primary
+              floated="right"
+              icon="arrow right"
+              aria-label={intl.formatMessage(messages.upload, {
+                count: droppedFiles.length,
+              })}
+              onClick={onSubmit}
+              title={intl.formatMessage(messages.upload, {
+                count: droppedFiles.length,
+              })}
+              size="big"
+            />
+          )}
+          <Button
+            basic
+            circular
+            secondary
+            icon="remove"
+            aria-label={intl.formatMessage(messages.cancel)}
+            title={intl.formatMessage(messages.cancel)}
+            floated="right"
+            size="big"
+            onClick={handleCloseModal}
+          />
+        </Modal.Actions>
+      </Modal>
+    </>
+  );
+};
+
+export default DropZoneContent;

package/src/customizations/volto/components/manage/Contents/Contents.jsx

@@ -0,0 +1,20 @@
+/**
+ * OVERRIDE Contents.jsx
+ * REASON: Add component DropzoneContent to enable drag and drop upload.
+ * FILE: https://github.com/plone/volto/blob/829f0a61b80adb0d2a637f0160c1e9b00931114f/packages/volto/src/components/manage/Contents/Contents.jsx
+ * FILE VERSION: Volto 18.29.1
+ * PULL REQUEST: https://github.com/kitconcept/kitconcept-core/pull/71
+ * TICKET: https://gitlab.kitconcept.io/kitconcept/distribution-kitconcept-intranet/-/issues/6
+ * DEVELOPER: @Tishasoumya-02
+ * CHANGELOG:
+ *  - Add component DropzoneContent to enable drag and drop upload (#6) @Tishasoumya-02
+ */
+
+/**
+ * Contents component.
+ * @module components/manage/Contents/Contents
+ */
+
+import Contents from '../../../../../components/Contents/Contents';
+
+export default Contents;

package/src/theme/_main.scss

@@ -1,2 +1,3 @@
 // This theme extends the volto-light-theme
 @import 'components/version_overview';
+@import 'components/dragDropFolderContent.scss';

package/src/theme/components/dragDropFolderContent.scss

@@ -0,0 +1,62 @@
+.contents-dropzone {
+  position: relative;
+
+  &.drag-over {
+    overflow: hidden;
+  }
+}
+
+.dropzone-overlay {
+  position: absolute;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 3px dashed black;
+  animation: fadeIn 0.3s ease-in;
+  backdrop-filter: blur(2px);
+  inset: 0;
+}
+
+.dropzone-content {
+  animation: scaleIn 0.3s ease-out;
+  color: black;
+  text-align: center;
+
+  h3 {
+    margin-top: 16px;
+    font-size: 24px;
+    font-weight: 600;
+  }
+
+  p {
+    font-size: 18px;
+  }
+
+  h3,
+  p {
+    color: black;
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes scaleIn {
+  from {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}