feat: support onFileAdded and onFilesAdded

Author: dolymood

README.md

@@ -54,23 +54,30 @@ app.mount('#app')
 
 ``` vue
 <template>
-  <uploader :options="options" class="uploader-example">
-    <uploader-unsupport></uploader-unsupport>
+  <uploader
+    :options="options"
+    :file-status-text="statusText"
+    class="uploader-example"
+    ref="uploaderRef"
+    @file-complete="fileComplete"
+    @complete="complete"
+  >
+    <!-- <uploader-unsupport></uploader-unsupport>
     <uploader-drop>
       <p>Drop files here to upload or</p>
       <uploader-btn>select files</uploader-btn>
       <uploader-btn :attrs="attrs">select images</uploader-btn>
       <uploader-btn :directory="true">select folder</uploader-btn>
     </uploader-drop>
-    <uploader-list></uploader-list>
+    <uploader-list></uploader-list> -->
   </uploader>
 </template>
 
 <script>
   import { nextTick, ref, onMounted } from 'vue'
   export default {
     setup () {
-      const uploader = ref(null)
+      const uploaderRef = ref(null)
       const options = {
         target: '//localhost:3000/upload', // '//jsonplaceholder.typicode.com/posts/',
         testChunks: false
@@ -93,11 +100,11 @@ app.mount('#app')
       }
       onMounted(() => {
         nextTick(() => {
-          window.uploader = uploader.value.uploader
+          window.uploader = uploaderRef.value.uploader
         })
       })
       return {
-        uploader,
+        uploaderRef,
         options,
         attrs,
         statusText,
@@ -212,6 +219,18 @@ Root component.
   }
   ```
 
+* `onFileAdded(file) {Function}`
+  
+  After `1.0.0`.
+
+  Called when file is added, this function is used for file validation. To reject(filter) this file you should `return false`.
+
+* `onFilesAdded(files, fileList) {Function}`
+
+  After `1.0.0`.
+
+  Called when files are added, this function is used for files validation. To reject(filter) these files you should `return false`.
+
 #### Events
 
 See [simple-uploader.js uploader/events](https://github.com/simple-uploader/Uploader#events)

README_zh-CN.md

@@ -57,23 +57,30 @@ app.mount('#app')
 
 ``` vue
 <template>
-  <uploader :options="options" class="uploader-example">
-    <uploader-unsupport></uploader-unsupport>
+  <uploader
+    :options="options"
+    :file-status-text="statusText"
+    class="uploader-example"
+    ref="uploaderRef"
+    @file-complete="fileComplete"
+    @complete="complete"
+  >
+    <!-- <uploader-unsupport></uploader-unsupport>
     <uploader-drop>
       <p>Drop files here to upload or</p>
       <uploader-btn>select files</uploader-btn>
       <uploader-btn :attrs="attrs">select images</uploader-btn>
       <uploader-btn :directory="true">select folder</uploader-btn>
     </uploader-drop>
-    <uploader-list></uploader-list>
+    <uploader-list></uploader-list> -->
   </uploader>
 </template>
 
 <script>
   import { nextTick, ref, onMounted } from 'vue'
   export default {
     setup () {
-      const uploader = ref(null)
+      const uploaderRef = ref(null)
       const options = {
         target: '//localhost:3000/upload', // '//jsonplaceholder.typicode.com/posts/',
         testChunks: false
@@ -82,11 +89,11 @@ app.mount('#app')
         accept: 'image/*'
       }
       const statusText = {
-        success: '成功了',
-        error: '出错了',
-        uploading: '上传中',
-        paused: '暂停中',
-        waiting: '等待中'
+        success: 'success',
+        error: 'error',
+        uploading: 'uploading',
+        paused: 'paused',
+        waiting: 'waiting'
       }
       const complete = () => {
         console.log('complete', arguments)
@@ -96,11 +103,11 @@ app.mount('#app')
       }
       onMounted(() => {
         nextTick(() => {
-          window.uploader = uploader.value.uploader
+          window.uploader = uploaderRef.value.uploader
         })
       })
       return {
-        uploader,
+        uploaderRef,
         options,
         attrs,
         statusText,
@@ -216,6 +223,19 @@ app.mount('#app')
   }
   ```
 
+
+* `onFileAdded(file) {Function}`
+  
+  `1.0.0+` 版本可用。
+
+  当文件添加的时候调用，一般用于文件的校验。如果你想过滤掉当前文件，那么你应该在此函数中 `return false`。
+
+* `onFilesAdded(files, fileList) {Function}`
+
+  `1.0.0+` 版本可用。
+
+  当一批文件添加的时候调用，一般用于的校验。如果你想过滤掉这些文件，那么你应该在此函数中 `return false`。
+
 #### 事件
 
 参见 [simple-uploader.js uploader 事件](https://github.com/simple-uploader/Uploader/blob/develop/README_zh-CN.md#事件)

src/components/uploader.vue

@@ -52,7 +52,9 @@
             waiting: 'waiting'
           }
         }
-      }
+      },
+      onFileAdded: Function,
+      onFilesAdded: Function
     },
     setup (props, { emit }) {
       const uploaderList = ref(null)
@@ -66,13 +68,25 @@
       }
       const fileAdded = (file) => {
         const _file = reactive(file)
+        if (props.onFileAdded) {
+          const ignored = props.onFileAdded(_file)
+          if (ignored === false) {
+            return false
+          }
+        }
         emit(kebabCase(FILE_ADDED_EVENT), _file)
         if (_file.ignored) {
           // is ignored, filter it
           return false
         }
       }
       const filesAdded = (files, fileList) => {
+        if (props.onFilesAdded) {
+          const ignored = props.onFilesAdded(files, fileList)
+          if (ignored === false) {
+            return false
+          }
+        }
         emit(kebabCase(FILES_ADDED_EVENT), files, fileList)
         if (files.ignored || fileList.ignored) {
           // is ignored, filter it