Merge pull request #1362 from dxc-technology/aida-fix-1351

Fixed file input value when used on forms
dxc-technology · Nov 4, 2022 · 65612cd · 65612cd
2 parents 3a65d35 + ae135f4
commit 65612cd
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 7 deletions.
diff --git a/lib/src/file-input/FileInput.test.js b/lib/src/file-input/FileInput.test.js
@@ -281,4 +281,31 @@ describe("FileInput component tests", () => {
       ]);
     });
   });
+
+  test("File input sends value when submitted in a form", () => {
+    const newFile = new File(["newFile"], "newFile.pdf", { type: "pdf" });
+    const handlerOnSubmit = jest.fn((e) => {
+      e.preventDefault();
+      const formData = new FormData(e.target);
+      const formProps = Object.fromEntries(formData);
+      expect(formProps).toStrictEqual({ file: newFile });
+    });
+    const { getByText, getByLabelText } = render(
+      <form onSubmit={handlerOnSubmit}>
+        <DxcFileInput
+          label="File input label"
+          name="file"
+          helperText="File input helper text"
+          mode="filedrop"
+          buttonLabel="Choose"
+          dropAreaLabel="(or drop the files)"
+        />
+        <button type="submit">Submit</button>
+      </form>
+    );
+    const inputFile = getByLabelText("File input label", { hidden: true });
+    const submit = getByText("Submit");
+    fireEvent.change(inputFile, { target: { files: [newFile] } });
+    userEvent.click(submit);
+  });
 });
diff --git a/lib/src/file-input/FileInput.tsx b/lib/src/file-input/FileInput.tsx
@@ -186,7 +186,17 @@ const DxcFileInput = ({
         <HelperText disabled={disabled}>{helperText}</HelperText>
         {mode === "file" ? (
           <FileContainer multiple={multiple} files={files}>
-            <HiddenInputFile id={fileInputId} type="file" accept={accept} multiple={multiple} onChange={selectFiles} />
+            <ValueInput
+              id={fileInputId}
+              type="file"
+              accept={accept}
+              multiple={multiple}
+              onChange={selectFiles}
+              name={name}
+              disabled={disabled}
+              readOnly
+              aria-hidden="true"
+            />
             <DxcButton
               mode="secondary"
               label={
@@ -223,7 +233,17 @@ const DxcFileInput = ({
           </FileContainer>
         ) : (
           <Container>
-            <HiddenInputFile id={fileInputId} type="file" accept={accept} multiple={multiple} onChange={selectFiles} />
+            <ValueInput
+              id={fileInputId}
+              type="file"
+              accept={accept}
+              multiple={multiple}
+              onChange={selectFiles}
+              name={name}
+              disabled={disabled}
+              readOnly
+              aria-hidden="true"
+            />
             <DragDropArea
               isDragging={isDragging}
               disabled={disabled}
@@ -351,11 +371,8 @@ const FileContainer = styled.div`
   margin-top: 0.25rem;
 `;
 
-const HiddenInputFile = styled.input`
-  visibility: hidden;
-  position: absolute;
-  width: 0px;
-  height: 0px;
+const ValueInput = styled.input`
+  display: none;
 `;
 
 const ButtonContainer = styled.div`