@mbao01/common 0.0.35 → 0.0.36

package/dist/types/components/FileUploader/types.d.ts

@@ -1,4 +1,4 @@
-import type { Dispatch, SetStateAction } from "react";
+import type { Dispatch, Ref, SetStateAction } from "react";
 import type { DropzoneState, DropzoneOptions } from "react-dropzone";
 export type FileUploaderProps = {
     value: File[] | null;
@@ -19,4 +19,5 @@ export type FileUploaderContextType = {
     setActiveIndex: Dispatch<SetStateAction<number>>;
     orientation: "horizontal" | "vertical";
     direction: DirectionOptions;
+    hiddenInputRef: Ref<HTMLInputElement>;
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mbao01/common",
   "private": false,
-  "version": "0.0.35",
+  "version": "0.0.36",
   "type": "module",
   "author": "Ayomide Bakare",
   "license": "MIT",
@@ -145,5 +145,5 @@
     "react-dom": "^18.2.0",
     "typescript": "^5.2.2"
   },
-  "gitHead": "4e024b19d151c05b6c1580f461e348f5376c33b9"
+  "gitHead": "56575cccb960383ac1b9397068161bbd1b25a477"
 }

package/src/components/FileUploader/FileUploader.tsx

@@ -24,6 +24,7 @@ export const FileUploader = ({
   dir,
   ...props
 }: FileUploaderProps) => {
+  const hiddenInputRef = useRef<HTMLInputElement>(null);
   const [isFileTooBig, setIsFileTooBig] = useState(false);
   const [isLOF, setIsLOF] = useState(false);
   const [activeIndex, setActiveIndex] = useState(-1);
@@ -131,6 +132,16 @@ export const FileUploader = ({
 
       onValueChange(newValues);
 
+      if (hiddenInputRef.current) {
+        // Note the specific way we need to munge the file into the hidden input
+        // https://stackoverflow.com/a/68182158/1068446
+        const dataTransfer = new DataTransfer();
+        newValues.forEach((v) => {
+          dataTransfer.items.add(v);
+        });
+        hiddenInputRef.current.files = dataTransfer.files;
+      }
+
       if (rejectedFiles.length > 0) {
         for (const rejectedFile of rejectedFiles) {
           if (rejectedFile.errors[0]?.code === "file-too-large") {
@@ -182,6 +193,7 @@ export const FileUploader = ({
         setActiveIndex,
         orientation,
         direction,
+        hiddenInputRef,
       }}
     >
       <div
@@ -276,7 +288,8 @@ const FileUploaderInput = ({
   children,
   ...props
 }: FileUploaderInputProps) => {
-  const { dropzoneState, isFileTooBig, isLOF } = useFileUpload();
+  const { dropzoneState, isFileTooBig, isLOF, hiddenInputRef } =
+    useFileUpload();
   const rootProps = isLOF ? {} : dropzoneState.getRootProps();
   return (
     <div
@@ -303,6 +316,11 @@ const FileUploaderInput = ({
       </div>
       <input
         {...props}
+        ref={hiddenInputRef}
+        type="file"
+        style={{ opacity: 0, display: "none" }}
+      />
+      <input
         disabled={isLOF}
         ref={dropzoneState.inputRef}
         {...dropzoneState.getInputProps()}

package/src/components/FileUploader/types.ts

@@ -1,4 +1,4 @@
-import type { Dispatch, SetStateAction } from "react";
+import type { Dispatch, Ref, SetStateAction } from "react";
 import type { DropzoneState, DropzoneOptions } from "react-dropzone";
 
 export type FileUploaderProps = {
@@ -24,4 +24,5 @@ export type FileUploaderContextType = {
   setActiveIndex: Dispatch<SetStateAction<number>>;
   orientation: "horizontal" | "vertical";
   direction: DirectionOptions;
+  hiddenInputRef: Ref<HTMLInputElement>;
 };