diff --git a/lib/src/file-input/FileInput.test.js b/lib/src/file-input/FileInput.test.js
index a8f377c93..52d9f41e1 100644
--- a/lib/src/file-input/FileInput.test.js
+++ b/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(
-
- );
- 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
index 74d49d43b..54f929f24 100644
--- a/lib/src/file-input/FileInput.tsx
+++ b/lib/src/file-input/FileInput.tsx
@@ -179,10 +179,8 @@ const DxcFileInput = React.forwardRef(
accept={accept}
multiple={multiple}
onChange={selectFiles}
- name={name}
disabled={disabled}
readOnly
- aria-hidden="true"
/>
(
accept={accept}
multiple={multiple}
onChange={selectFiles}
- name={name}
disabled={disabled}
readOnly
- aria-hidden="true"
/>
{
onDelete(fileName);
}}
+ type="button"
title={translatedLabels.fileInput.deleteFileActionTitle}
aria-label={translatedLabels.fileInput.deleteFileActionTitle}
tabIndex={tabIndex}
diff --git a/website/screens/components/file-input/code/FileInputCodePage.tsx b/website/screens/components/file-input/code/FileInputCodePage.tsx
index 237ecaef2..972d0fd2e 100644
--- a/website/screens/components/file-input/code/FileInputCodePage.tsx
+++ b/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 = [
callbackFile: function |
|
- 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'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.
|
@@ -187,6 +189,10 @@ const sections = [
title: "Error handling",
content: ,
},
+ {
+ title: "Inside a form",
+ content: ,
+ },
],
},
];
diff --git a/website/screens/components/file-input/code/examples/basicUsage.ts b/website/screens/components/file-input/code/examples/basicUsage.ts
index 5fca8fea6..c8930fffb 100644
--- a/website/screens/components/file-input/code/examples/basicUsage.ts
+++ b/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}
/>
@@ -40,7 +37,6 @@ const scope = {
DxcInset,
DxcFlex,
useState,
- useRef,
};
export default { code, scope };
diff --git a/website/screens/components/file-input/code/examples/formFileInput.ts b/website/screens/components/file-input/code/examples/formFileInput.ts
new file mode 100644
index 000000000..93b1bc634
--- /dev/null
+++ b/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 (
+
+ );
+}`;
+
+const scope = {
+ DxcFileInput,
+ DxcButton,
+ DxcInset,
+ DxcFlex,
+ useState,
+};
+
+export default { code, scope };