Merge pull request #1501 from dxc-technology/rarrojolopez-file-input

File input inside a form improvements

lib/src/file-input/FileInput.test.js

@@ -280,30 +280,4 @@ 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);
-  });
 });

lib/src/file-input/FileInput.tsx

@@ -179,10 +179,8 @@ const DxcFileInput = React.forwardRef<RefType, FileInputPropsType>(
                 accept={accept}
                 multiple={multiple}
                 onChange={selectFiles}
-                name={name}
                 disabled={disabled}
                 readOnly
-                aria-hidden="true"
               />
               <DxcButton
                 mode="secondary"
@@ -223,10 +221,8 @@ const DxcFileInput = React.forwardRef<RefType, FileInputPropsType>(
                 accept={accept}
                 multiple={multiple}
                 onChange={selectFiles}
-                name={name}
                 disabled={disabled}
                 readOnly
-                aria-hidden="true"
               />
               <DragDropArea
                 isDragging={isDragging}

lib/src/file-input/FileItem.tsx

@@ -56,6 +56,7 @@ const FileItem = ({
               onClick={() => {
                 onDelete(fileName);
               }}
+              type="button"
               title={translatedLabels.fileInput.deleteFileActionTitle}
               aria-label={translatedLabels.fileInput.deleteFileActionTitle}
               tabIndex={tabIndex}

website/screens/components/file-input/code/FileInputCodePage.tsx

@@ -4,8 +4,9 @@ import QuickNavContainer from "@/common/QuickNavContainer";
 import Code from "@/common/Code";
 import DocFooter from "@/common/DocFooter";
 import Example from "@/common/example/Example";
-import errorHandling from "./examples/errorHandling";
 import basicUsage from "./examples/basicUsage";
+import errorHandling from "./examples/errorHandling";
+import formFileInput from "./examples/formFileInput";
 import HeaderDescriptionCell from "@/common/HeaderDescriptionCell";
 import StatusTag from "@/common/StatusTag";
 
@@ -139,10 +140,11 @@ const sections = [
             <td>callbackFile: function</td>
             <td></td>
             <td>
-              This function will be called when the user selects or drops a
-              file. The list of files will be sent as a parameter. In this
-              function, the files can be updated or returned as they come. These
-              files must be passed to the value in order to be shown.
+              This function will be called when the user adds or deletes a file.
+              That is, when the file input&#39;s inner value is modified. The
+              list of files will be sent as a parameter. In this function, the
+              files can be updated or returned as they come. These files must be
+              passed to the value in order to be shown.
             </td>
           </tr>
           <tr>
@@ -187,6 +189,10 @@ const sections = [
         title: "Error handling",
         content: <Example example={errorHandling} defaultIsVisible />,
       },
+      {
+        title: "Inside a form",
+        content: <Example example={formFileInput} defaultIsVisible />,
+      },
     ],
   },
 ];

website/screens/components/file-input/code/examples/basicUsage.ts

@@ -4,15 +4,13 @@ import {
   DxcButton,
   DxcFlex,
 } from "@dxc-technology/halstack-react";
-import { useState, useRef } from "react";
+import { useState } from "react";
 
 const code = `() => {
-  const fileRef = useRef();
   const [files, setFiles] = useState([]);
 
   const handleSubmit = () => {
-    const fileInput = fileRef.current.getElementsByTagName("input")[0];
-    console.log(Array.from(fileInput.files).map(file => file.name));
+    console.log(files.map((file) => file.file.name));
   };
 
   const callbackFile = (files) => {
@@ -26,7 +24,6 @@ const code = `() => {
           label="Select your files"
           value={files}
           callbackFile={callbackFile}
-          ref={fileRef}
         />
         <DxcButton label="Submit" type="submit" onClick={handleSubmit} />
       </DxcFlex>
@@ -40,7 +37,6 @@ const scope = {
   DxcInset,
   DxcFlex,
   useState,
-  useRef,
 };
 
 export default { code, scope };

website/screens/components/file-input/code/examples/formFileInput.ts

@@ -0,0 +1,45 @@
+import {
+  DxcFileInput,
+  DxcInset,
+  DxcButton,
+  DxcFlex,
+} from "@dxc-technology/halstack-react";
+import { useState } from "react";
+
+const code = `() => {
+  const [files, setFiles] = useState([]);
+
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    console.log(files.map((file) => file.file.name));
+  };
+  
+  const callbackFile = (files) => {
+    setFiles(files);
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <DxcInset space="2rem">
+        <DxcFlex direction="column" gap="2rem">
+          <DxcFileInput
+            label="Select your files"
+            value={files}
+            callbackFile={callbackFile}
+          />
+          <DxcButton type="submit" label="Submit" />
+        </DxcFlex>
+      </DxcInset>
+    </form>
+  );
+}`;
+
+const scope = {
+  DxcFileInput,
+  DxcButton,
+  DxcInset,
+  DxcFlex,
+  useState,
+};
+
+export default { code, scope };