feat(file-input): Added file input component (#1613)

Added file input component

Closes #1581
---------

Co-authored-by: Radoslav Karaivanov <[email protected]>

Author: simeonoff

CHANGELOG.md

@@ -4,6 +4,10 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
+## [Unreleased]
+### Added
+- New File Input Component(`igc-file-input`)
+
 ## [5.3.0] - 2025-03-13
 ### Added
 - Tile manager component [#1402](https://github.com/IgniteUI/igniteui-webcomponents/pull/1402)

package-lock.json

@@ -79,7 +79,7 @@
     "globby": "^14.1.0",
     "husky": "^9.1.7",
     "ig-typedoc-theme": "^6.0.0",
-    "igniteui-theming": "^16.1.0",
+    "igniteui-theming": "^17.1.0",
     "keep-a-changelog": "^2.6.2",
     "lint-staged": "^15.5.0",
     "lit-analyzer": "^2.0.3",

package.json

@@ -56,6 +56,28 @@ export const defaultDateTimeTransformers: Partial<
   setFormValue: getDateFormValue,
 };
 
+export const defaultFileListTransformer: Partial<
+  FormValueTransformers<FileList | null>
+> = {
+  setValue: (value) => value || null,
+  getValue: (value) => value,
+  setDefaultValue: (value) => value || null,
+  getDefaultValue: (value) => value,
+  setFormValue: (files: FileList | null, host: IgcFormControl) => {
+    if (!host.name || !files) {
+      return null;
+    }
+
+    const data = new FormData();
+
+    for (const file of Array.from(files)) {
+      data.append(host.name, file);
+    }
+
+    return data;
+  },
+};
+
 /* blazorSuppress */
 export class FormValue<T> {
   private static readonly setFormValueKey = '_setFormValue' as const;

src/components/common/mixins/forms/form-value.ts

@@ -357,6 +357,37 @@ export function simulateWheel(node: Element, options?: WheelEventInit) {
   );
 }
 
+/**
+ * Simulates file upload for an input of type file.
+ *
+ * @param element - The custom element containing the file input
+ * @param files - Array of File objects to upload
+ * @param shadowRoot - Whether to look for the input in shadow DOM (default: true)
+ * @returns Promise that resolves when element updates
+ */
+export async function simulateFileUpload(
+  element: HTMLElement,
+  files: File[],
+  shadowRoot = true
+): Promise<void> {
+  const input = shadowRoot
+    ? (element.shadowRoot!.querySelector(
+        'input[type="file"]'
+      ) as HTMLInputElement)
+    : (element.querySelector('input[type="file"]') as HTMLInputElement);
+
+  if (!input) {
+    throw new Error('File input not found');
+  }
+
+  const dataTransfer = new DataTransfer();
+  files.forEach((file) => dataTransfer.items.add(file));
+
+  input.files = dataTransfer.files;
+  input.dispatchEvent(new Event('change', { bubbles: true }));
+  await elementUpdated(element);
+}
+
 export function simulateDoubleClick(node: Element) {
   node.dispatchEvent(
     new PointerEvent('dblclick', { bubbles: true, composed: true })