fix(web): use Array.from() for FileList to fix tsc type errors (#31398)

.github/workflows/style.yml

@@ -125,7 +125,7 @@ jobs:
       - name: Web type check
         if: steps.changed-files.outputs.any_changed == 'true'
         working-directory: ./web
-        run: pnpm run type-check:tsgo
+        run: pnpm run type-check
 
       - name: Web dead code check
         if: steps.changed-files.outputs.any_changed == 'true'

web/app/components/app/annotation/batch-add-annotation-modal/csv-uploader.tsx

@@ -48,7 +48,7 @@ const CSVUploader: FC<Props> = ({
     setDragging(false)
     if (!e.dataTransfer)
       return
-    const files = [...e.dataTransfer.files]
+    const files = Array.from(e.dataTransfer.files)
     if (files.length > 1) {
       notify({ type: 'error', message: t('stepOne.uploader.validation.count', { ns: 'datasetCreation' }) })
       return

web/app/components/app/create-from-dsl-modal/uploader.tsx

@@ -58,7 +58,7 @@ const Uploader: FC<Props> = ({
     setDragging(false)
     if (!e.dataTransfer)
       return
-    const files = [...e.dataTransfer.files]
+    const files = Array.from(e.dataTransfer.files)
     if (files.length > 1) {
       notify({ type: 'error', message: t('stepOne.uploader.validation.count', { ns: 'datasetCreation' }) })
       return

web/app/components/apps/hooks/use-dsl-drag-drop.ts

@@ -36,7 +36,7 @@ export const useDSLDragDrop = ({ onDSLFileDropped, containerRef, enabled = true
     if (!e.dataTransfer)
       return
 
-    const files = [...e.dataTransfer.files]
+    const files = Array.from(e.dataTransfer.files)
     if (files.length === 0)
       return
 

web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/uploader.tsx

@@ -54,7 +54,7 @@ const Uploader: FC<Props> = ({
     setDragging(false)
     if (!e.dataTransfer)
       return
-    const files = [...e.dataTransfer.files]
+    const files = Array.from(e.dataTransfer.files)
     if (files.length > 1) {
       notify({ type: 'error', message: t('stepOne.uploader.validation.count', { ns: 'datasetCreation' }) })
       return

web/app/components/datasets/create/file-uploader/index.tsx

@@ -278,7 +278,7 @@ const FileUploader = ({
     onFileListUpdate?.([...fileListRef.current])
   }
   const fileChangeHandle = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
-    let files = [...(e.target.files ?? [])] as File[]
+    let files = Array.from(e.target.files ?? []) as File[]
     files = files.slice(0, fileUploadConfig.batch_count_limit)
     initialUpload(files.filter(isValid))
   }, [isValid, initialUpload, fileUploadConfig])

web/app/components/datasets/documents/create-from-pipeline/data-source/local-file/index.tsx

@@ -230,7 +230,7 @@ const LocalFile = ({
     if (!e.dataTransfer)
       return
 
-    let files = [...e.dataTransfer.files] as File[]
+    let files = Array.from(e.dataTransfer.files) as File[]
     if (!supportBatchUpload)
       files = files.slice(0, 1)
 
@@ -251,7 +251,7 @@ const LocalFile = ({
     updateFileList([...fileListRef.current])
   }
   const fileChangeHandle = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
-    let files = [...(e.target.files ?? [])] as File[]
+    let files = Array.from(e.target.files ?? []) as File[]
     files = files.slice(0, fileUploadConfig.batch_count_limit)
     initialUpload(files.filter(isValid))
   }, [isValid, initialUpload, fileUploadConfig.batch_count_limit])

web/app/components/datasets/documents/detail/batch-modal/csv-uploader.tsx

@@ -126,7 +126,7 @@ const CSVUploader: FC<Props> = ({
     setDragging(false)
     if (!e.dataTransfer)
       return
-    const files = [...e.dataTransfer.files]
+    const files = Array.from(e.dataTransfer.files)
     if (files.length > 1) {
       notify({ type: 'error', message: t('stepOne.uploader.validation.count', { ns: 'datasetCreation' }) })
       return

web/app/components/plugins/plugin-page/use-uploader.ts

@@ -36,7 +36,7 @@ export const useUploader = ({ onFileChange, containerRef, enabled = true }: Uplo
     setDragging(false)
     if (!e.dataTransfer)
       return
-    const files = [...e.dataTransfer.files]
+    const files = Array.from(e.dataTransfer.files)
     if (files.length > 0)
       onFileChange(files[0])
   }