fix(useUpload): append file

packages/core/useUpload/index.ts

@@ -10,8 +10,9 @@ import { ref } from 'vue'
 
 interface UseUploadOptions {
   url: string
-  multiple?: boolean
   accept?: string
+  maxSize?: number // default infinity
+  maxCount?: number // default inifinity
 }
 
 interface UseUploadFile {
@@ -72,7 +73,7 @@ const genUploadFile = async (file: File): UseUploadFile => ({
 })
 
 export const useUpload = (options: UseUploadOptions): UseUploadReturn => {
-  const { url, multiple = false, accept = '' } = options
+  const { url, accept = '', maxSize = Infinity, maxCount = Infinity } = options
   const acceptList = accept.split(',').map((type) => type.trim())
   const files = ref<UseUploadFile[]>([])
 
@@ -97,26 +98,31 @@ export const useUpload = (options: UseUploadOptions): UseUploadReturn => {
     })
   }
 
-  const append = async (file: File | File[]) => {
-    if (!multiple && Array.isArray(file)) {
-      console.warn(
-        'if you want upload multiple files, set options multiple is `true`'
-      )
-    }
-    if (multiple) {
-      if (!(file as File[]).every(validFileType)) {
-        throw new Error('Have some File reject')
-      }
-      files.value = [
-        ...files.value,
-        ...(await (file as File[]).map(async (f) => genUploadFile(f))),
-      ]
+  const append = async (file: File | File[] | FileList) => {
+    let appendFiles = []
+    if (file instanceof FileList) {
+      appendFiles = Array.from(file)
+    } else if (Array.isArray(file)) {
+      appendFiles = file
+    } else if (file instanceof File) {
+      appendFiles = [file]
     } else {
-      if (!validFileType(file as File)) {
-        throw new Error('File type reject.')
-      }
-      files.value.push(await genUploadFile(file))
+      // nothing
     }
+    // check max size
+    if (files.value.length + appendFiles.length >= maxCount) {
+      throw new Error('Exceed the maximum number of files')
+    }
+    if (!(appendFiles as File[]).every(validFileType)) {
+      throw new Error('Have some File reject')
+    }
+
+    files.value = [
+      ...files.value,
+      ...(await Promise.all(
+        (appendFiles as File[]).map(async (f) => genUploadFile(f))
+      )),
+    ]
   }
 
   const remove = (index: number[] | number): UseUploadFile[] => {

src/demo/UseUpload.vue

@@ -3,10 +3,10 @@ import { watch, ref, h, VNode } from 'vue'
 import { useUpload } from '@noi/core'
 
 const url = 'https://run.mocky.io/v3/da20c84f-fbe5-4510-8f24-80fa61474790'
-const { upload, append, files } = useUpload({ url })
+const { upload, append, files } = useUpload({ url, maxSize: 100, maxCount: 3 })
 
 const inputChange = (event) => {
-  append(event.target.files[0])
+  append(event.target.files)
 }
 </script>
 
@@ -21,7 +21,7 @@ const inputChange = (event) => {
     <hr />
   </div>
   <br />
-  <input accept="" type="file" @change="inputChange" />
+  <input accept="" type="file" @change="inputChange" multiple />
   <br />
   <button @click="upload">upload</button>
 </template>