fix(client/import): file remains from previous instance (closes #7428)

apps/client/src/widgets/dialogs/import.tsx

@@ -37,7 +37,7 @@ export default function ImportDialog() {
             onSubmit={async () => {
                 if (!files || !parentNoteId) {
                     return;
-                }                
+                }
 
                 const options: UploadFilesOptions = {
                     safeImport: boolToString(safeImport),
@@ -51,7 +51,10 @@ export default function ImportDialog() {
                 setShown(false);
                 await importService.uploadFiles("notes", parentNoteId, Array.from(files), options);
             }}
-            onHidden={() => setShown(false)}
+            onHidden={() => {
+                setShown(false);
+                setFiles(null);
+            }}
             footer={<Button text={t("import.import")} primary disabled={!files} />}
             show={shown}
         >
@@ -82,7 +85,7 @@ export default function ImportDialog() {
                     currentValue={codeImportedAsCode} onChange={setCodeImportedAsCode}
                 />
                 <FormCheckbox
-                    name="replace-underscores-with-spaces" label={t("import.replaceUnderscoresWithSpaces")} 
+                    name="replace-underscores-with-spaces" label={t("import.replaceUnderscoresWithSpaces")}
                     currentValue={replaceUnderscoresWithSpaces} onChange={setReplaceUnderscoresWithSpaces}
                 />
             </FormMultiGroup>
@@ -92,4 +95,4 @@ export default function ImportDialog() {
 
 function boolToString(value: boolean) {
     return value ? "true" : "false";
-}
+}

apps/client/src/widgets/dialogs/upload_attachments.tsx

@@ -40,14 +40,17 @@ export default function UploadAttachmentsDialog() {
                 if (!files || !parentNoteId) {
                     return;
                 }
-                
+
                 setIsUploading(true);
                 const filesCopy = Array.from(files);
                 await importService.uploadFiles("attachments", parentNoteId, filesCopy, { shrinkImages });
                 setIsUploading(false);
                 setShown(false);
             }}
-            onHidden={() => setShown(false)}
+            onHidden={() => {
+                setShown(false);
+                setFiles(null);
+            }}
             show={shown}
         >
             <FormGroup name="files" label={t("upload_attachments.choose_files")} description={description}>
@@ -55,7 +58,7 @@ export default function UploadAttachmentsDialog() {
             </FormGroup>
 
             <FormGroup name="shrink-images" label={t("upload_attachments.options")}>
-                <FormCheckbox                    
+                <FormCheckbox
                     hint={t("upload_attachments.tooltip")} label={t("upload_attachments.shrink_images")}
                     currentValue={shrinkImages} onChange={setShrinkImages}
                 />

apps/client/src/widgets/react/FormFileUpload.tsx

@@ -1,6 +1,6 @@
 import { Ref } from "preact";
 import Button, { ButtonProps } from "./Button";
-import { useRef } from "preact/hooks";
+import { useEffect, useRef } from "preact/hooks";
 
 interface FormFileUploadProps {
     name?: string;
@@ -11,6 +11,11 @@ interface FormFileUploadProps {
 }
 
 export default function FormFileUpload({ inputRef, name, onChange, multiple, hidden }: FormFileUploadProps) {
+    // Prevent accidental reuse of a file selected in a previous instance of the upload form.
+    useEffect(() => {
+        onChange(null);
+    }, []);
+
     return (
         <label class="tn-file-input tn-input-field" style={hidden ? { display: "none" } : undefined}>
             <input
@@ -18,7 +23,7 @@ export default function FormFileUpload({ inputRef, name, onChange, multiple, hid
                 name={name}
                 type="file"
                 class="form-control-file"
-                multiple={multiple}                
+                multiple={multiple}
                 onChange={e => onChange((e.target as HTMLInputElement).files)} />
         </label>
     )
@@ -26,7 +31,7 @@ export default function FormFileUpload({ inputRef, name, onChange, multiple, hid
 
 /**
  * Combination of a button with a hidden file upload field.
- * 
+ *
  * @param param the change listener for the file upload and the properties for the button.
  */
 export function FormFileUploadButton({ onChange, ...buttonProps }: Omit<ButtonProps, "onClick"> & Pick<FormFileUploadProps, "onChange">) {
@@ -39,10 +44,10 @@ export function FormFileUploadButton({ onChange, ...buttonProps }: Omit<ButtonPr
                 onClick={() => inputRef.current?.click()}
             />
             <FormFileUpload
-                inputRef={inputRef} 
+                inputRef={inputRef}
                 hidden
                 onChange={onChange}
             />
         </>
     )
-}
+}