fix(ui): fix File-based types for q-upload and q-file (fix: #17605)

[yusufkandemir]

What kind of change does this PR introduce?

• Bugfix

Does this PR introduce a breaking change?

• No

The PR fulfills these requirements:

• It's submitted to the dev branch (or v[X] branch)
• When resolving a specific issue, it's referenced in the PR's title (e.g. fix: #xxx[,#xxx], where "xxx" is the issue number)

Other information:
Fixes #17605 but contains more fixes on top.
Extra note for some fixes: we accept FileList in inputs, but we maintain the state with File[] only. So, methods accept file lists, but computed properties, callback params, etc. are only file arrays.

[github-actions]

Build Results

JSON API

📜 Changes detected:

diff --git a/./current-build/api/QFile.json b/./pr-build/api/QFile.json
index 681d915..faaa371 100644
--- a/./current-build/api/QFile.json
+++ b/./pr-build/api/QFile.json
@@ -68,15 +68,14 @@
       "desc": "Custom filter for added files; Only files that pass this filter will be added to the queue and uploaded; For best performance, reference it from your scope and do not define it inline",
       "params": {
         "files": {
-          "type": [
-            "Array",
-            "FileList"
-          ],
+          "type": "Array",
+          "tsType": "File",
           "desc": "Candidate files to be added to queue"
         }
       },
       "returns": {
         "type": "Array",
+        "tsType": "File",
         "desc": "Filtered files to be added to queue"
       },
       "examples": [
@@ -505,10 +504,8 @@
       "desc": "Override default selection slot; Suggestion: QChip",
       "scope": {
         "files": {
-          "type": [
-            "Array",
-            "FileList"
-          ],
+          "type": "Array",
+          "tsType": "File",
           "desc": "Array of File objects"
         },
         "ref": {
@@ -587,7 +584,8 @@
             "Array",
             "FileList"
           ],
-          "desc": "Array of files (instances of File)",
+          "tsType": "QUseFileAddInput",
+          "desc": "Array of files (instances of File) or FileList",
           "required": true
         }
       },
diff --git a/./current-build/api/QUploader.json b/./pr-build/api/QUploader.json
index 673b94f..e33059f 100644
--- a/./current-build/api/QUploader.json
+++ b/./pr-build/api/QUploader.json
@@ -303,15 +303,14 @@
       "desc": "Custom filter for added files; Only files that pass this filter will be added to the queue and uploaded; For best performance, reference it from your scope and do not define it inline",
       "params": {
         "files": {
-          "type": [
-            "Array",
-            "FileList"
-          ],
+          "type": "Array",
+          "tsType": "File",
           "desc": "Candidate files to be added to queue"
         }
       },
       "returns": {
         "type": "Array",
+        "tsType": "File",
         "desc": "Filtered files to be added to queue"
       },
       "examples": [
@@ -561,11 +560,15 @@
       "returns": null
     },
     "addFiles": {
-      "desc": "Manually add files to the queue",
+      "desc": "Add files programmatically",
       "params": {
         "files": {
-          "type": "Array",
-          "desc": "Must be an array of instances of JS File type",
+          "type": [
+            "Array",
+            "FileList"
+          ],
+          "tsType": "QUseFileAddInput",
+          "desc": "Array of files (instances of File) or FileList",
           "required": true
         }
       },

Types

📜 Changes detected:

diff --git a/./current-build/types/api/qfile.d.ts b/./pr-build/types/api/qfile.d.ts
index bc114e7..ba0f0e9 100644
--- a/./current-build/types/api/qfile.d.ts
+++ b/./pr-build/types/api/qfile.d.ts
@@ -13,3 +13,5 @@ export type QFileNativeElement = Omit<
   Omit<HTMLInputElement, "files"> & { files: FileList },
   "type"
 > & { type: "file" };
+
+export type QUseFileAddInput = readonly File[] | FileList;
diff --git a/./current-build/types/index.d.ts b/./pr-build/types/index.d.ts
index 4d7d027..da29c43 100644
--- a/./current-build/types/index.d.ts
+++ b/./pr-build/types/index.d.ts
@@ -7003,7 +7003,7 @@ export interface QFileProps {
    * @param files Candidate files to be added to queue
    * @returns Filtered files to be added to queue
    */
-  filter?: ((files: readonly any[] | FileList) => readonly any[]) | undefined;
+  filter?: ((files: File[]) => File[]) | undefined;
   /**
    * Model of the component; Must be FileList or Array if using 'multiple' prop; Either use this property (along with a listener for 'update:modelValue' event) OR use v-model directive
    */
@@ -7291,7 +7291,7 @@ export interface QFileSlots {
     /**
      * Array of File objects
      */
-    files: readonly any[] | FileList;
+    files: File[];
     /**
      * Reference to the QFile component
      */
@@ -7307,9 +7307,9 @@ export interface QFile extends ComponentPublicInstance<QFileProps> {
   pickFiles: (evt?: Event) => void;
   /**
    * Add files programmatically
-   * @param files Array of files (instances of File)
+   * @param files Array of files (instances of File) or FileList
    */
-  addFiles: (files: readonly any[] | FileList) => void;
+  addFiles: (files: QUseFileAddInput) => void;
   /**
    * Reset validation status
    */
@@ -15700,7 +15700,7 @@ export interface QUploaderProps {
    * @param files Candidate files to be added to queue
    * @returns Filtered files to be added to queue
    */
-  filter?: ((files: readonly any[] | FileList) => readonly any[]) | undefined;
+  filter?: ((files: File[]) => File[]) | undefined;
   /**
    * Label for the uploader
    */
@@ -15848,10 +15848,10 @@ export interface QUploader extends ComponentPublicInstance<QUploaderProps> {
    */
   pickFiles: (evt: Event) => void;
   /**
-   * Manually add files to the queue
-   * @param files Must be an array of instances of JS File type
+   * Add files programmatically
+   * @param files Array of files (instances of File) or FileList
    */
-  addFiles: (files: readonly any[]) => void;
+  addFiles: (files: QUseFileAddInput) => void;
   /**
    * Start uploading (same as clicking the upload button)
    */
@@ -16567,6 +16567,7 @@ import { VueStyleObjectProp } from "./api";
 import { QEditorCaret } from "./api";
 import { ValidationRule } from "./api";
 import { QRejectedEntry } from "./api";
+import { QUseFileAddInput } from "./api";
 import { QFileNativeElement } from "./api";
 import { QFormChildComponent } from "./api";
 import { QInputNativeElement } from "./api";

[github-actions]

UI Tests Results

    1 files     98 suites   38s ⏱️
1 031 tests 1 031 ✅ 0 💤 0 ❌
1 050 runs  1 050 ✅ 0 💤 0 ❌

Results for commit 20d780a.