diff --git a/packages/storybook/stories/va-file-input-uswds.stories.jsx b/packages/storybook/stories/va-file-input-uswds.stories.jsx
index d770c77dd..7c53fb623 100644
--- a/packages/storybook/stories/va-file-input-uswds.stories.jsx
+++ b/packages/storybook/stories/va-file-input-uswds.stories.jsx
@@ -24,7 +24,6 @@ const defaultArgs = {
'error': '',
'enable-analytics': false,
'hint': null,
- 'multiple': false,
'uswds': true,
'vaChange': event =>
alert(`File change event received: ${event?.detail?.files[0]?.name}`),
@@ -37,7 +36,6 @@ const Template = ({
error,
required,
hint,
- multiple,
'enable-analytics': enableAnalytics,
uswds,
vaChange,
@@ -50,7 +48,6 @@ const Template = ({
required={required}
error={error}
hint={hint}
- multiple={multiple}
enable-analytics={enableAnalytics}
onVaChange={vaChange}
uswds={uswds}
@@ -81,13 +78,14 @@ AcceptsAnyKindOfImage.args = {
accept: 'image/*',
};
-export const AcceptsMultipleFiles = Template.bind(null);
-AcceptsMultipleFiles.args = {
- ...defaultArgs,
- label: 'Input accepts multiple files',
- hint: 'Select one or more files',
- multiple: true,
-};
+// Temporarily not supporting this option
+// export const AcceptsMultipleFiles = Template.bind(null);
+// AcceptsMultipleFiles.args = {
+// ...defaultArgs,
+// label: 'Input accepts multiple files',
+// hint: 'Select one or more files',
+// multiple: true,
+// };
export const ErrorMessage = Template.bind(null);
ErrorMessage.args = {
diff --git a/packages/web-components/src/components.d.ts b/packages/web-components/src/components.d.ts
index a2412a2f0..be82b3e0c 100644
--- a/packages/web-components/src/components.d.ts
+++ b/packages/web-components/src/components.d.ts
@@ -434,10 +434,6 @@ export namespace Components {
* The label for the file input.
*/
"label"?: string;
- /**
- * Optionally allow multiple files (USWDS Only)
- */
- "multiple"?: boolean;
/**
* The name for the input element.
*/
@@ -2375,10 +2371,6 @@ declare namespace LocalJSX {
* The label for the file input.
*/
"label"?: string;
- /**
- * Optionally allow multiple files (USWDS Only)
- */
- "multiple"?: boolean;
/**
* The name for the input element.
*/
diff --git a/packages/web-components/src/components/va-file-input/test/va-file-input.e2e.ts b/packages/web-components/src/components/va-file-input/test/va-file-input.e2e.ts
index 328bffe30..882feb4c7 100644
--- a/packages/web-components/src/components/va-file-input/test/va-file-input.e2e.ts
+++ b/packages/web-components/src/components/va-file-input/test/va-file-input.e2e.ts
@@ -5,7 +5,9 @@ const path = require('path');
describe('va-file-input', () => {
it('renders', async () => {
const page = await newE2EPage();
- await page.setContent('');
+ await page.setContent(
+ '',
+ );
const element = await page.find('va-file-input');
expect(element).toEqualHtml(`
@@ -23,7 +25,9 @@ describe('va-file-input', () => {
it('displays an error message when `error` is defined', async () => {
const page = await newE2EPage();
- await page.setContent(``);
+ await page.setContent(
+ ``,
+ );
const errorSpan = await page.find('va-file-input >>> #error-message');
expect(errorSpan.innerText.includes('This is an error')).toBe(true);
@@ -48,18 +52,23 @@ describe('va-file-input', () => {
it('renders a required span', async () => {
const page = await newE2EPage();
- await page.setContent(``);
+ await page.setContent(
+ ``,
+ );
const requiredSpan = await page.find('va-file-input >>> .required');
expect(requiredSpan).not.toBeNull();
});
- it('the `multiple` attributes exists if set', async () => {
+ // Not supporting multiple for now
+ it.skip('the `multiple` attributes exists if set', async () => {
const page = await newE2EPage();
- await page.setContent(``);
+ await page.setContent(
+ ``,
+ );
const fileInput = await page.find('va-file-input >>> input');
- expect(fileInput.getAttribute('multiple')).toBeTruthy;
+ expect(fileInput.getAttribute('multiple')).toBeTruthy();
});
it('the `multiple` attributes does not apply if omitted', async () => {
@@ -67,15 +76,17 @@ describe('va-file-input', () => {
await page.setContent(``);
const fileInput = await page.find('va-file-input >>> input');
- expect(fileInput.getAttribute('multiple')).toBeFalsy;
+ expect(fileInput.getAttribute('multiple')).toBeFalsy();
});
it('the `accept` attribute exists if set', async () => {
const page = await newE2EPage();
- await page.setContent(``);
+ await page.setContent(
+ ``,
+ );
const fileInput = await page.find('va-file-input >>> input');
- expect(fileInput.getAttribute('accept')).toBeTruthy;
+ expect(fileInput.getAttribute('accept')).toBeTruthy();
});
it('the `accept` attribute does not apply if omitted', async () => {
@@ -83,7 +94,7 @@ describe('va-file-input', () => {
await page.setContent(``);
const fileInput = await page.find('va-file-input >>> input');
- expect(fileInput.getAttribute('accept')).toBeFalsy;
+ expect(fileInput.getAttribute('accept')).toBeFalsy();
});
it('emits the vaChange event only once', async () => {
@@ -167,14 +178,15 @@ describe('va-file-input', () => {
expect(requiredSpan).not.toBeNull();
});
- it('v3 the `multiple` attributes exists if set', async () => {
+ // Skipping temporarily while we are not supporting the multiple file upload option
+ it.skip('v3 the `multiple` attributes exists if set', async () => {
const page = await newE2EPage();
await page.setContent(
``,
);
const fileInput = await page.find('va-file-input >>> input');
- expect(fileInput.getAttribute('multiple')).toBeTruthy;
+ expect(fileInput.getAttribute('multiple')).toBeTruthy();
});
it('v3 the `multiple` attributes does not apply if omitted', async () => {
@@ -182,7 +194,7 @@ describe('va-file-input', () => {
await page.setContent(``);
const fileInput = await page.find('va-file-input >>> input');
- expect(fileInput.getAttribute('multiple')).toBeFalsy;
+ expect(fileInput.getAttribute('multiple')).toBeFalsy();
});
it('v3 the `accept` attribute exists if set', async () => {
@@ -192,7 +204,7 @@ describe('va-file-input', () => {
);
const fileInput = await page.find('va-file-input >>> input');
- expect(fileInput.getAttribute('accept')).toBeTruthy;
+ expect(fileInput.getAttribute('accept')).toBeTruthy();
});
it('the `accept` attribute does not apply if omitted', async () => {
@@ -200,7 +212,7 @@ describe('va-file-input', () => {
await page.setContent(``);
const fileInput = await page.find('va-file-input >>> input');
- expect(fileInput.getAttribute('accept')).toBeFalsy;
+ expect(fileInput.getAttribute('accept')).toBeFalsy();
});
// Skipping due to test flakiness, but this event does work in the browser
diff --git a/packages/web-components/src/components/va-file-input/va-file-input-upgrader.ts b/packages/web-components/src/components/va-file-input/va-file-input-upgrader.ts
index 26417b58a..a80e5ad44 100644
--- a/packages/web-components/src/components/va-file-input/va-file-input-upgrader.ts
+++ b/packages/web-components/src/components/va-file-input/va-file-input-upgrader.ts
@@ -365,7 +365,8 @@ const addPreviewHeading = (fileInputEl, fileNames) => {
*/
const handleChange = (e, fileInputEl, instructions, dropTarget) => {
- const fileNames = e.target.files;
+ const multiple = fileInputEl.getAttribute('multiple'); // TODO: Double-check this works correctly when multiple is re-enabled
+ const fileNames = multiple ? e.target.files : [e.target.files[0]];
const inputParent = dropTarget.closest(`.${DROPZONE_CLASS}`);
const statusElement = inputParent.querySelector(`.${SR_ONLY_CLASS}`);
const fileStore = [];
diff --git a/packages/web-components/src/components/va-file-input/va-file-input.tsx b/packages/web-components/src/components/va-file-input/va-file-input.tsx
index 713aa6b8e..58f5d1a04 100644
--- a/packages/web-components/src/components/va-file-input/va-file-input.tsx
+++ b/packages/web-components/src/components/va-file-input/va-file-input.tsx
@@ -66,7 +66,7 @@ export class VaFileInput {
/**
* Optionally allow multiple files (USWDS Only)
*/
- @Prop() multiple?: boolean = false;
+ // @Prop() multiple?: boolean = false; NOTE: disabling temporarily
/**
* Emit component-library-analytics events on the file input change event.
@@ -144,8 +144,7 @@ export class VaFileInput {
}
render() {
- const { label, name, required, accept, error, hint, multiple, uswds } =
- this;
+ const { label, name, required, accept, error, hint, uswds } = this;
const text = this.getButtonText();
@@ -196,7 +195,6 @@ export class VaFileInput {
type="file"
name={name}
accept={accept}
- multiple={multiple}
aria-describedby={ariaDescribedbyIds}
onChange={this.handleChange}
/>