export files

Author: MedAmine1212

src/frontend/UpupUploader.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef, useImperativeHandle } from 'react'
 import { TbLoader } from 'react-icons/tb/index.js'
 import { devinoDark, devinoLight, logoDark, logoLight } from '../assets/logos'
-import { FileWithProgress, UpupUploaderProps } from '../shared/types'
+import { FileWithParams, UpupUploaderProps } from '../shared/types'
 import DefaultLoaderIcon from './components/DefaultLoaderIcon'
 import MainBox from './components/MainBox'
 import ShouldRender from './components/shared/ShouldRender'
@@ -13,12 +13,15 @@ import { cn } from './lib/tailwind'
 export type UpupUploaderRef = {
     useUpload(): {
         error?: string
-        files: Array<FileWithProgress>
+        files: FileWithParams[]
         loading: boolean
         progress: number
         upload(): Promise<string[] | undefined>
+        dynamicUpload(
+            files: File[] | FileWithParams[],
+        ): Promise<string[] | undefined>
         setFiles(newFiles: File[]): void
-        dynamicallyReplaceFiles(files: File[]): void
+        dynamicallyReplaceFiles(files: File[] | FileWithParams[]): void
     }
 }
 
@@ -35,6 +38,7 @@ export default forwardRef<UpupUploaderRef, UpupUploaderProps>(
             upload: providerValues.upload,
             files: providerValues.files,
             setFiles: providerValues.setFiles,
+            dynamicUpload: providerValues.dynamicUpload,
             dynamicallyReplaceFiles: providerValues.dynamicallyReplaceFiles,
         })
 

src/frontend/context/RootContext.ts

@@ -62,7 +62,10 @@ export interface IRootContext {
 
     files: Map<string, FileWithParams>
     setFiles: (newFiles: File[]) => void
-    dynamicallyReplaceFiles: (files: File[]) => void
+    dynamicallyReplaceFiles: (files: File[] | FileWithParams[]) => void
+    dynamicUpload: (
+        files: File[] | FileWithParams[],
+    ) => Promise<string[] | undefined>
     isAddingMore: boolean
     setIsAddingMore: Dispatch<SetStateAction<boolean>>
 

src/frontend/hooks/useRootProvider.ts

@@ -122,12 +122,27 @@ export default function useRootProvider({
                   }),
         [warningHandler, toastContainerId],
     )
+    function isFileWithParamsArray(
+        files: File[] | FileWithParams[],
+    ): files is FileWithParams[] {
+        return files.length > 0 && 'id' in files[0]
+    }
+    async function dynamicUpload(files: File[] | FileWithParams[]) {
+        dynamicallyReplaceFiles(files)
+        return await proceedUpload()
+    }
+    function dynamicallyReplaceFiles(files: File[] | FileWithParams[]) {
+        const filesMap = new Map<string, FileWithParams>()
 
-    const dynamicallyReplaceFiles = (files: File[]) => {
-        const filesMap = new Map()
-        for (const file of files) {
-            const fileWithParams = fileAppendParams(file)
-            filesMap.set(fileWithParams.id, fileWithParams)
+        if (isFileWithParamsArray(files)) {
+            for (const f of files) {
+                filesMap.set(f.id, f)
+            }
+        } else {
+            for (const f of files) {
+                const fileWithParams = fileAppendParams(f)
+                filesMap.set(fileWithParams.id, fileWithParams)
+            }
         }
         setSelectedFilesMap(filesMap)
     }
@@ -216,7 +231,6 @@ export default function useRootProvider({
         },
         [onPrepareFiles],
     )
-
     const proceedUpload = async () => {
         if (!selectedFilesMap.size) return
 
@@ -309,6 +323,7 @@ export default function useRootProvider({
         setIsAddingMore,
         files: selectedFilesMap,
         setFiles: handleSetSelectedFiles,
+        dynamicUpload,
         dynamicallyReplaceFiles,
         handleDone,
         handleFileRemove,

src/frontend/hooks/useUpload.ts

@@ -5,35 +5,28 @@ export default function useUpload({
     files,
     setFiles,
     dynamicallyReplaceFiles,
+    dynamicUpload,
 }: Pick<
     IRootContext,
-    'upload' | 'files' | 'setFiles' | 'dynamicallyReplaceFiles'
+    | 'upload'
+    | 'files'
+    | 'setFiles'
+    | 'dynamicallyReplaceFiles'
+    | 'dynamicUpload'
 >) {
-    const {
-        proceedUpload,
-        filesProgressMap,
-        uploadStatus,
-        uploadError,
-        totalProgress,
-    } = upload || {}
+    const { proceedUpload, uploadStatus, uploadError, totalProgress } =
+        upload || {}
 
     return {
         upload: proceedUpload,
-        files: Array.from(files.values()).map(file => {
-            const progressObject = filesProgressMap?.[file.id]
-            const progress = progressObject?.total
-                ? Math.round(progressObject?.loaded / progressObject.total)
-                : 0
-
-            return {
-                ...file,
-                progress,
-            }
-        }),
         loading: uploadStatus === UploadStatus.ONGOING,
         error: uploadError,
         progress: totalProgress,
+        files: Array.from(files.values()).map(file => {
+            return file
+        }),
         setFiles,
         dynamicallyReplaceFiles,
+        dynamicUpload,
     }
 }

stories/UploaderWithHooks.stories.tsx

@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react'
 import React, { useEffect, useRef, useState } from 'react'
 import UpupUploader, { UpupUploaderRef } from '../src/frontend/UpupUploader'
 import {
+    FileWithParams,
     FileWithProgress,
     UploadAdapter,
     UpupProvider,
@@ -53,9 +54,12 @@ const meta = {
                 loading: false,
                 progress: 0,
                 upload: async () => [],
+                dynamicUpload(
+                    files: File[] | FileWithParams[],
+                ): Promise<string[] | undefined> {},
                 error: undefined,
                 setFiles(newFiles: File[]) {},
-                dynamicallyReplaceFiles(files: File[]) {},
+                dynamicallyReplaceFiles(files: File[] | FileWithParams[]) {},
             })
 
             // Track files directly instead of through a derived value
@@ -121,6 +125,7 @@ const meta = {
                         onFilesSelected={() => {
                             // Use setTimeout to ensure we get the updated state after React has processed the file selection
                             setTimeout(refreshUploadData, 0)
+                            console.log(ref?.current?.useUpload()?.files)
                         }}
                         onError={() => {
                             // Use setTimeout to ensure we get the updated state after React has processed the error