Merge pull request #235 from DevinoSolutions/master

?

README.md

@@ -1,16 +1,12 @@
-<h1 align="center">
-   Upup
-</h1>
+![upup_logo_dark](https://github.com/DevinoSolutions/upup/assets/43147238/b5477db9-cb23-43c7-8c12-518beb31af53)
 
 <br/>
 
 <div align="center">
-  Easily handle your file upload needs. Easily integrate our API into your application to upload files to the cloud.
-
-Goodbye to nasty configs, painful APIs and hello to a simple, easy to use, file uploader.
-
+   An open-source, free-to-use NPM component that easily handles your file upload needs with seamless Google Drive and OneDrive integration.
+
 </div>
-
+<br/>
 <p align="center">
   <a href="https://github.com/uNotesOfficial/upup">
     <img src="https://img.shields.io/badge/gzipped-206kb-4ba0f6" />

src/UpupUploader.tsx

@@ -57,6 +57,7 @@ export interface UpupUploaderProps {
 
 export type UploadFilesRef = {
     uploadFiles: () => Promise<string[] | null>
+    dynamicUploadFiles: (files: File[]) => Promise<string[] | null>
 }
 
 /**
@@ -127,12 +128,20 @@ export const UpupUploader: FC<UpupUploaderProps & RefAttributes<any>> =
          * Expose the handleUpload function to the parent component
          */
         useImperativeHandle(ref, () => ({
+            async dynamicUploadFiles(dynamicFiles: File[]) {
+                if (dynamicFiles.length === 0) return null
+                return await this.proceedUpload(dynamicFiles)
+            },
             async uploadFiles() {
                 if (files.length === 0) return null
                 const filesList =
                     mutatedFiles && mutatedFiles.length > 0
                         ? mutatedFiles
                         : files
+                return await this.proceedUpload(filesList)
+            },
+
+            async proceedUpload(filesList: File[]) {
                 return new Promise(async (resolve, reject) => {
                     /**
                      * Check if the total size of files is less than the maximum size
@@ -149,13 +158,11 @@ export const UpupUploader: FC<UpupUploaderProps & RefAttributes<any>> =
                             ),
                         )
                     }
-
                     /**
                      * Upload the file to the cloud storage
                      */
                     let filesToUpload: File[]
                     let keys: string[] = []
-
                     /**
                      * Compress the file before uploading it to the cloud storage
                      */
@@ -172,11 +179,9 @@ export const UpupUploader: FC<UpupUploaderProps & RefAttributes<any>> =
                             }),
                         )
                     else filesToUpload = filesList
-
                     /**
                      * Loop through the files array and upload the files
                      */
-
                     if (filesToUpload) {
                         try {
                             filesToUpload.map(async file => {

src/version.ts

@@ -1 +1 @@
-export const LIB_VERSION = "2.3.4";
+export const LIB_VERSION = "2.3.6";

stories/Uploader.stories.tsx

@@ -1,6 +1,6 @@
 import { CircularProgress } from '@mui/material'
 import { Meta } from '@storybook/react'
-import { useRef } from 'react'
+import { useRef, useState } from 'react'
 import {
     UPLOAD_ADAPTER,
     UploadAdapter,
@@ -19,8 +19,10 @@ const meta: Meta<typeof UpupUploader> = {
 export default meta
 
 const Uploader = args => {
+    const [files, setFiles] = useState<File[]>([])
     const { baseConfigs, cloudStorageConfigs, googleConfigs, oneDriveConfigs } =
         useUpup({
+            setFiles: setFiles,
             accept: '*',
             multiple: true,
             limit: 5,
@@ -49,6 +51,16 @@ const Uploader = args => {
             console.error('Error uploading files:', error)
         }
     }
+    const handleDynamicUpload = async () => {
+        try {
+            const testFiles: any[] = []
+            testFiles.push(files[0])
+            const data = await upupRef.current?.dynamicUploadFiles(testFiles)
+            console.log(`Upload ${data ? 'successful' : 'returned null.'} `)
+        } catch (error) {
+            console.error('Error uploading files:', error)
+        }
+    }
 
     const loader = <CircularProgress size={100} />
 
@@ -64,7 +76,15 @@ const Uploader = args => {
                 loader={loader}
                 ref={upupRef}
             />
-            <button onClick={handleUpload}>Upload</button>
+            <button className="border-2 border-red-100" onClick={handleUpload}>
+                Upload
+            </button>
+            <button
+                className="ml-3 border-2 border-red-100"
+                onClick={handleDynamicUpload}
+            >
+                Dynamic Upload
+            </button>
         </>
     )
 }