Feat(web-twig): FileUploader - Support for crop image #DS-954

apps/web-twig-demo/assets/scripts/file-uploader-meta-data.ts

@@ -0,0 +1,108 @@
+// eslint-disable-next-line import/no-extraneous-dependencies, import/no-unresolved, import/extensions, no-unused-vars
+import { FileUploader, Modal } from '@lmc-eu/spirit-web/src/js/index.esm';
+
+window.addEventListener('DOMContentLoaded', () => {
+  let file;
+  const ModalElement = document.getElementById('example_modal_data');
+  const ModalInstance = new Modal(ModalElement);
+  const Content = ModalElement.querySelector('[data-example-content]');
+  const CancelButton = ModalElement.querySelector('[data-element="cancel"]');
+  const FileUploaderElement = document.getElementById('example_customMetaData');
+  const FileUploaderInstance = FileUploader.getInstance(FileUploaderElement);
+  let toggleMetaData = false; // allow toggling meta data between two different values when clicking on edit button
+
+  const isFileImage = (file) => file.type.split('/')[0] === 'image';
+
+  // callbacks
+
+  const updateQueueCallback = (key, file, meta) => {
+    const attachmentElement = document.querySelector('#FileUploaderListWithMetaData');
+    const fileName = FileUploaderInstance.getUpdatedFileName(file.name);
+    const metaInput = attachmentElement?.querySelector(`input[name="attachments_${fileName}_meta"]`);
+
+    // If we have metadata, we check if the input exists and if so we update its value else we create a new one
+    if (meta) {
+      if (metaInput) {
+        metaInput.value = JSON.stringify(meta);
+      } else {
+        const attachmentMetaInputElement = document.createElement('input');
+        attachmentMetaInputElement.setAttribute('type', 'hidden');
+        attachmentMetaInputElement.setAttribute('name', `attachments_${fileName}_meta`);
+        attachmentMetaInputElement.setAttribute('value', JSON.stringify(meta));
+        attachmentElement?.appendChild(attachmentMetaInputElement);
+      }
+    }
+
+    // If we do not have metadata, we remove the input
+    if (!meta) {
+      metaInput && metaInput.remove();
+    }
+  };
+
+  const callbackOnDismiss = (key) => {
+    document.querySelector(`input[name="attachments_${key}_meta"]`)?.remove();
+  };
+
+  // custom functions
+
+  const customAddToQueue = (file, meta) => {
+    if (isFileImage(file)) {
+      const reader = new FileReader();
+
+      reader.readAsDataURL(file);
+      reader.onloadend = () => {
+        const base64data = reader.result;
+        localStorage.setItem('image', base64data);
+        Content.innerHTML = `<img src="${base64data}" style="width: 100%; height: auto" alt="${file.name}" />`;
+        ModalInstance.show();
+      };
+    }
+
+    FileUploaderInstance.updateQueue(
+      FileUploaderInstance.getUpdatedFileName(file.name),
+      file,
+      meta,
+      updateQueueCallback,
+    );
+  };
+
+  const customEdit = (event) => {
+    const key = event.target.closest('li').id;
+    const newMeta = toggleMetaData
+      ? { x: 30, y: 30, width: 150, height: 150 }
+      : { x: 22, y: 0, width: 110, height: 100 };
+    toggleMetaData = !toggleMetaData;
+    const file = FileUploaderInstance.getFileFromQueue(key).file;
+    FileUploaderInstance.updateQueue(key, file, newMeta, updateQueueCallback);
+  };
+  moduleFunctions.customEdit = customEdit;
+
+  // modal functions
+
+  const removeFromQueue = () => {
+    FileUploaderInstance.removeFromQueue(FileUploaderInstance.getUpdatedFileName(file.name));
+    cleanup();
+  };
+
+  const cleanup = () => {
+    ModalInstance.hide();
+    Content.innerHTML = '';
+    file = undefined;
+  };
+
+  CancelButton.addEventListener('click', removeFromQueue);
+
+  FileUploaderElement.addEventListener('queuedFile.fileUploader', (event) => {
+    file = event.currentFile;
+
+    customAddToQueue(file);
+  });
+
+  FileUploaderElement.addEventListener('unqueuedFile.fileUploader', (event) => {
+    callbackOnDismiss(event.currentFile);
+  });
+
+  FileUploaderElement.addEventListener('editFile.fileUploader', (event) => {
+    customEdit(event.currentFile);
+  });
+});

apps/web-twig-demo/webpack.config.js

@@ -25,6 +25,7 @@ Encore
      */
     .addEntry('app', './assets/app.ts')
     .addEntry('fileUploaderImagePreview', './assets/scripts/file-uploader-image-preview.ts')
+    .addEntry('fileUploaderMetaData', './assets/scripts/file-uploader-meta-data.ts')
     .addEntry('formValidations', './assets/scripts/form-validations.ts')
     .addEntry('tooltipDismissibleViaJS', './assets/scripts/tooltip-dismissible-via-js.ts')
 

packages/web-react/src/components/FileUploader/__tests__/useFileUploaderStyleProps.test.ts

@@ -61,5 +61,11 @@ describe('useFileUploaderStyleProps', () => {
     );
 
     expect(result.current.classProps.imageCropStyles).toBeDefined();
+    expect(result.current.classProps.imageCropStyles).toStrictEqual({
+      '--file-uploader-attachment-image-height': '4px',
+      '--file-uploader-attachment-image-left': '-1px',
+      '--file-uploader-attachment-image-top': '-2px',
+      '--file-uploader-attachment-image-width': '3px',
+    });
   });
 });

packages/web-twig/src/Resources/components/FileUploader/FileUploader.stories.twig

@@ -38,6 +38,10 @@
         {% include '@components/FileUploader/stories/FileUploaderAttachmentWithCustomAction.twig' %}
     </DocsSection>
 
+    <DocsSection title="FileUploader with Meta Data">
+        {% include '@components/FileUploader/stories/FileUploaderMetaData.twig' %}
+    </DocsSection>
+
     <DocsSection title="Input with Attachment" tag="Visual demo only">
         {% include '@components/FileUploader/stories/FileUploaderInputWithAttachment.twig' %}
     </DocsSection>

packages/web-twig/src/Resources/components/FileUploader/stories/FileUploaderMetaData.twig

@@ -0,0 +1,48 @@
+<Modal id="example_modal_data" titleId="example_modal_data_title">
+    <ModalDialog>
+        <ModalHeader modalId="example_modal_data" titleId="example_modal_data_title">
+            Image Preview
+        </ModalHeader>
+        <ModalBody>
+            <div class="pt-400 pt-tablet-600" data-example-content></div>
+        </ModalBody>
+        <ModalFooter>
+            <Button
+                color="primary"
+                data-spirit-target="#example_modal_data"
+                data-spirit-dismiss="modal"
+            >
+                Confirm
+            </Button>
+            <Button
+                color="secondary"
+                data-spirit-target="#example_modal_data"
+                data-element="cancel"
+            >
+                Cancel
+            </Button>
+        </ModalFooter>
+    </ModalDialog>
+</Modal>
+
+<FileUploader data-spirit-toggle="fileUploader" id="example_customMetaData">
+    <template data-spirit-snippet="item">
+        <FileUploaderAttachment onEdit="moduleFunctions.customEdit(event)" generateImagePreview />
+    </template>
+    <FileUploaderInput
+        helperText="Max size of each file is 10 MB"
+        id="fileUploaderWithMetaData"
+        label="Label"
+        multiple
+        name="fileUploaderWithMetaData"
+        maxUploadedFiles={1} 
+        queueLimitBehavior="disable"
+    />
+    <FileUploaderList headingId="attachments-fileUploaderMetaData" id="FileUploaderListWithMetaData" />
+</FileUploader>
+
+<script>
+  const moduleFunctions = {};
+</script>
+
+{{ encore_entry_script_tags('fileUploaderMetaData') }}