From f0326d7e2355798c0df12138dfd962d4d01f857b Mon Sep 17 00:00:00 2001
From: Stef Coenen <stef@thebrownfox.be>
Date: Tue, 15 Oct 2024 17:12:46 +0200
Subject: [PATCH] Fix sequential same file uploads;

---
 .../src/form/files/FileSelector.tsx           | 98 ++++++++++---------
 .../src/socialFeed/Composer/PostComposer.tsx  |  3 +
 2 files changed, 57 insertions(+), 44 deletions(-)

diff --git a/packages/common-app/src/form/files/FileSelector.tsx b/packages/common-app/src/form/files/FileSelector.tsx
index c2603a24..40145dfd 100644
--- a/packages/common-app/src/form/files/FileSelector.tsx
+++ b/packages/common-app/src/form/files/FileSelector.tsx
@@ -1,51 +1,61 @@
 import { getNewId } from '@homebase-id/js-lib/helpers';
-import { ReactNode } from 'react';
+import { forwardRef, ReactNode } from 'react';
 
-export const FileSelector = ({
-  children,
-  onChange,
-  className,
-  accept,
-  maxSize,
-}: {
-  children?: ReactNode;
-  onChange?: (files: File[]) => void;
-  className?: string;
-  accept?: string;
-  maxSize?: number;
-}) => {
-  const id = getNewId();
+export const FileSelector = forwardRef(
+  (
+    {
+      children,
+      onChange,
+      className,
+      accept,
+      maxSize,
+    }: {
+      children?: ReactNode;
+      onChange?: (files: File[]) => void;
+      className?: string;
+      accept?: string;
+      maxSize?: number;
+    },
+    ref: React.Ref<HTMLInputElement>
+  ) => {
+    const id = getNewId();
 
-  return (
-    <>
-      <label htmlFor={id} className={`block cursor-pointer select-none ${className ?? ''}`}>
-        {children ?? '+'}
-      </label>
-      <input
-        id={id}
-        name={id}
-        onChange={(e) => {
-          const files = e.target?.files;
-          if (files) {
-            if (maxSize) {
-              for (let i = 0; i < files.length; i++) {
-                if (files[i].size > maxSize) {
-                  alert(
-                    `File ${files[i].name} is too big. Max size is ${maxSize / 1024 / 1024} MB.`
-                  );
-                  e.target.value = '';
-                  return;
+    return (
+      <>
+        <label htmlFor={id} className={`block cursor-pointer select-none ${className ?? ''}`}>
+          {children ?? '+'}
+        </label>
+        <input
+          id={id}
+          name={id}
+          onChange={(e) => {
+            const files = e.target?.files;
+            if (files) {
+              if (maxSize) {
+                for (let i = 0; i < files.length; i++) {
+                  if (files[i].size > maxSize) {
+                    alert(
+                      `File ${files[i].name} is too big. Max size is ${maxSize / 1024 / 1024} MB.`
+                    );
+                    e.target.value = '';
+                    return;
+                  }
                 }
               }
+              onChange && onChange(Array.from(files));
             }
-            onChange && onChange(Array.from(files));
+          }}
+          type="file"
+          accept={
+            accept || 'image/png, image/jpeg, image/tiff, image/webp, image/svg+xml, image/gif'
           }
-        }}
-        type="file"
-        accept={accept || 'image/png, image/jpeg, image/tiff, image/webp, image/svg+xml, image/gif'}
-        multiple
-        className={`sr-only`}
-      />
-    </>
-  );
-};
+          multiple
+          className={`sr-only`}
+          ref={ref}
+        />
+      </>
+    );
+  }
+);
+
+FileSelector.displayName = 'FileSelector';
diff --git a/packages/common-app/src/socialFeed/Composer/PostComposer.tsx b/packages/common-app/src/socialFeed/Composer/PostComposer.tsx
index c3947f99..008a5fd8 100644
--- a/packages/common-app/src/socialFeed/Composer/PostComposer.tsx
+++ b/packages/common-app/src/socialFeed/Composer/PostComposer.tsx
@@ -63,6 +63,7 @@ export const PostComposer = ({
 
   const { savePost, postState, processingProgress, error } = usePostComposer();
   const selectRef = useRef<HTMLSelectElement>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
 
   const [caption, setCaption] = useState<string>('');
 
@@ -113,6 +114,7 @@ export const PostComposer = ({
     setCaption('');
     // setChannel(BlogConfig.PublicChannelNewDsr);
     setFiles(undefined);
+    fileInputRef.current?.value && (fileInputRef.current.value = '');
     setStateIndex((i) => i + 1);
   };
 
@@ -216,6 +218,7 @@ export const PostComposer = ({
                   accept="image/png, image/jpeg, image/tiff, image/webp, image/svg+xml, image/gif, video/mp4, application/pdf"
                   className="text-foreground hover:text-opacity-70"
                   maxSize={HUNDRED_MEGA_BYTES}
+                  ref={fileInputRef}
                 />
               </div>