fix(web-react): remove name attribute from fileuploader root div #DS-1594

packages/web-react/src/components/FileUploader/FileUploaderInput.tsx

@@ -31,6 +31,7 @@ const FileUploaderInput = (props: SpiritFileUploaderInputProps) => {
     linkText,
     maxFileSize = DEFAULT_FILE_SIZE_LIMIT,
     maxUploadedFiles = DEFAULT_FILE_QUEUE_LIMIT,
+    name,
     onError,
     queueLimitBehavior = 'none',
     validationState,
@@ -97,6 +98,7 @@ const FileUploaderInput = (props: SpiritFileUploaderInputProps) => {
         accept={accept}
         id={id}
         ref={inputRef}
+        name={name}
         className={classProps.input.input}
         onChange={onChange}
         multiple={isMultiple}

packages/web-react/src/components/FileUploader/__tests__/FileUploaderInput.test.tsx

@@ -56,4 +56,16 @@ describe('FileUploaderInput', () => {
     expect(element).toHaveTextContent('Upload File');
     expect(element.innerHTML).toBe('Upload <b>File</b>');
   });
+
+  it('should not have `name` attribute on root div element', () => {
+    render(<FileUploaderInput id="test-uploader" name="test-uploader" label="upload" data-testid="test" />);
+
+    const elements = screen.getAllByTestId('test');
+    const rootDiv = elements[0];
+    const input = document.querySelector('input[type="file"]') as HTMLInputElement;
+
+    expect(rootDiv).not.toHaveAttribute('name');
+    expect(rootDiv.localName).toBe('div');
+    expect(input).toHaveAttribute('name', 'test-uploader');
+  });
 });

packages/web/src/scss/components/FileUploader/index.html

@@ -2248,7 +2248,7 @@ <h2 class="docs-Heading">Example of JS-Controlled Form</h2>
                 <use xlink:href="/assets/icons/svg/sprite.svg#upload" />
               </svg>
               <label
-                for="file-uploader-in-form"
+                for="file-upload-in-form"
                 class="FileUploaderInput__dropZoneLabel"
               >
                 <span class="FileUploaderInput__link link-primary link-underlined">Upload your file</span>