fixup! Feat(web-react): FileUploader - Support for crop image #DS-954

packages/web-react/src/components/FileUploader/FileUploaderAttachment.tsx

@@ -1,15 +1,15 @@
-import React, { useRef, RefObject, MouseEvent, useState } from 'react';
 import classNames from 'classnames';
-import { SpiritFileUploaderAttachmentProps } from '../../types';
+import React, { MouseEvent, RefObject, useRef, useState } from 'react';
 import { useClassNamePrefix, useDeprecationMessage, useStyleProps } from '../../hooks';
-import { useFileUploaderStyleProps } from './useFileUploaderStyleProps';
-import { useFileUploaderAttachment } from './useFileUploaderAttachment';
-import AttachmentImagePreview from './AttachmentImagePreview';
+import { SpiritFileUploaderAttachmentProps } from '../../types';
 import { Icon } from '../Icon';
-import { DEFAULT_ICON_NAME, DEFAULT_BUTTON_LABEL, DEFAULT_EDIT_BUTTON_LABEL } from './constants';
-import { image2Base64Preview } from './utils';
 import AttachmentActionButton from './AttachmentActionButton';
 import AttachmentDismissButton from './AttachmentDismissButton';
+import AttachmentImagePreview from './AttachmentImagePreview';
+import { DEFAULT_BUTTON_LABEL, DEFAULT_EDIT_BUTTON_LABEL, DEFAULT_ICON_NAME } from './constants';
+import { useFileUploaderAttachment } from './useFileUploaderAttachment';
+import { useFileUploaderStyleProps } from './useFileUploaderStyleProps';
+import { image2Base64Preview } from './utils';
 
 const FileUploaderAttachment = (props: SpiritFileUploaderAttachmentProps) => {
   const {
@@ -52,7 +52,7 @@ const FileUploaderAttachment = (props: SpiritFileUploaderAttachmentProps) => {
     image2Base64Preview(file, 100, (compressedDataURL) => setImagePreview(compressedDataURL));
   }
 
-  useFileUploaderAttachment({ attachmentRef, file, name, onError });
+  useFileUploaderAttachment({ attachmentRef, file, name, meta, onError });
 
   useDeprecationMessage({
     method: 'property',
@@ -74,6 +74,8 @@ const FileUploaderAttachment = (props: SpiritFileUploaderAttachmentProps) => {
     },
   });
 
+  console.log(meta);
+
   return (
     <li
       id={id}

packages/web-react/src/components/FileUploader/useFileUploaderAttachment.ts

@@ -1,6 +1,6 @@
-import { RefObject, useEffect } from 'react';
-import { getAttachmentInput } from './utils';
+import { RefObject, useLayoutEffect } from 'react';
 import { FileQueueValueMetaType } from '../../types/fileUploader';
+import { getAttachmentInput, getAttachmentMetaInput } from './utils';
 
 export interface UseFileUploaderAttachmentProps {
   attachmentRef: RefObject<HTMLLIElement>;
@@ -10,17 +10,25 @@ export interface UseFileUploaderAttachmentProps {
   onError?: (error: string) => void;
 }
 
-export const useFileUploaderAttachment = ({ attachmentRef, file, name, onError }: UseFileUploaderAttachmentProps) => {
-  const createAttachmentInput = () => {
+export const useFileUploaderAttachment = ({
+  attachmentRef,
+  file,
+  name,
+  meta,
+  onError,
+}: UseFileUploaderAttachmentProps) => {
+  const createAttachmentInput = (metadata) => {
+    attachmentRef.current?.querySelectorAll('input').forEach((element) => element.remove());
     const attachmentInputElement = getAttachmentInput(file, name, onError) as Node;
-
     attachmentRef.current?.appendChild(attachmentInputElement);
-  };
 
-  useEffect(() => {
-    createAttachmentInput();
+    if (meta) {
+      const attachmentInputMetaElement = getAttachmentMetaInput(file, name, metadata, onError) as Node;
+      attachmentRef.current?.appendChild(attachmentInputMetaElement);
+    }
+  };
 
-    /* We want to call this hook only once */
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  useLayoutEffect(() => {
+    createAttachmentInput(meta);
+  }, [createAttachmentInput, meta]);
 };

packages/web-react/src/components/FileUploader/utils.ts

@@ -25,6 +25,17 @@ const getAttachmentInput = (file: File, name: string, onError?: (error: string)
   return attachmentInputElement;
 };
 
+const getAttachmentMetaInput = (file: File, name: string, meta, onError?: (error: string) => void) => {
+  const attachmentInputElement = document.createElement('input');
+
+  attachmentInputElement.setAttribute('type', 'text');
+  attachmentInputElement.setAttribute('name', `${name}_meta`);
+  attachmentInputElement.setAttribute('value', JSON.stringify(meta));
+  attachmentInputElement.setAttribute('hidden', '');
+
+  return attachmentInputElement;
+};
+
 const image2Base64Preview = (file: File, maxWidth: number, callback: (base64Preview: string) => void) => {
   const reader = new FileReader();
 
@@ -59,4 +70,4 @@ const base64ToByteArray = (base64Image: string) => {
   return byteArray;
 };
 
-export { getAttachmentInput, image2Base64Preview, base64ToByteArray };
+export { base64ToByteArray, getAttachmentInput, getAttachmentMetaInput, image2Base64Preview };