fix: #215

Author: dolymood

src/components/btn.vue

@@ -29,7 +29,7 @@
     },
     setup (props) {
       const btn = ref(null)
-      const uploader = inject('uploader')
+      const uploader = inject('uploader').proxy.uploader
       const support = uploader.support
       onMounted(() => {
         nextTick(() => {

src/components/drop.vue

@@ -12,7 +12,7 @@
   export default {
     name: COMPONENT_NAME,
     setup () {
-      const uploader = inject('uploader')
+      const uploader = inject('uploader').proxy.uploader
       let drop = ref(null)
       let dropClass = ref('')
       const support = uploader.support

src/components/files.vue

@@ -11,7 +11,7 @@
 </template>
 
 <script>
-  import { inject } from 'vue'
+  import { inject, computed } from 'vue'
   import UploaderFile from './file.vue'
 
   const COMPONENT_NAME = 'uploader-files'
@@ -22,10 +22,10 @@
       UploaderFile
     },
     setup () {
-      const uploader = inject('uploader')
+      const uploader = inject('uploader').proxy
 
       return {
-        files: uploader.files
+        files: computed(() => uploader.files)
       }
     }
   }

src/components/list.vue

@@ -11,7 +11,7 @@
 </template>
 
 <script>
-  import { inject } from 'vue'
+  import { inject, computed } from 'vue'
   import UploaderFile from './file.vue'
 
   const COMPONENT_NAME = 'uploader-list'
@@ -22,10 +22,10 @@
       UploaderFile
     },
     setup () {
-      const uploader = inject('uploader')
+      const uploader = inject('uploader').proxy
 
       return {
-        fileList: uploader.fileList
+        fileList: computed(() => uploader.fileList)
       }
     }
   }

src/components/unsupport.vue

@@ -15,7 +15,7 @@
   export default {
     name: COMPONENT_NAME,
     setup () {
-      const uploader = inject('uploader')
+      const uploader = inject('uploader').proxy.uploader
       const support = uploader.support
       return {
         support

src/components/uploader.vue

@@ -13,7 +13,7 @@
 </template>
 
 <script>
-  import { provide, ref, reactive, onUnmounted, getCurrentInstance } from 'vue'
+  import { provide, ref, onUnmounted, getCurrentInstance } from 'vue'
   import Uploader from 'simple-uploader.js'
   import { kebabCase } from '../common/utils'
   import UploaderBtn from './btn.vue'
@@ -28,6 +28,24 @@
   const FILES_ADDED_EVENT = 'filesAdded'
   const UPLOAD_START_EVENT = 'uploadStart'
 
+  const ALL_EVENTS = [
+    'change',
+    'dragover',
+    'dragenter',
+    'dragleave',
+    'file-success',
+    'file-complete',
+    'file-progress',
+    'file-added',
+    'files-added',
+    'files-submitted',
+    'file-removed',
+    'file-retry',
+    'file-error',
+    'upload-start',
+    'complete'
+  ]
+
   export default {
     name: COMPONENT_NAME,
     props: {
@@ -56,8 +74,8 @@
       onFileAdded: Function,
       onFilesAdded: Function
     },
+    emits: ALL_EVENTS,
     setup (props, { emit }) {
-      const uploaderList = ref(null)
       const started = ref(false)
       const files = ref([])
       const fileList = ref([])
@@ -67,17 +85,18 @@
         started.value = true
       }
       const fileAdded = (file) => {
-        const _file = reactive(file)
+        const _file = 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
+        } else {
+          emit(kebabCase(FILE_ADDED_EVENT), _file)
+          if (_file.ignored) {
+            // is ignored, filter it
+            return false
+          }
         }
       }
       const filesAdded = (files, fileList) => {
@@ -86,20 +105,21 @@
           if (ignored === false) {
             return false
           }
-        }
-        emit(kebabCase(FILES_ADDED_EVENT), files, fileList)
-        if (files.ignored || fileList.ignored) {
-          // is ignored, filter it
-          return false
+        } else {
+          emit(kebabCase(FILES_ADDED_EVENT), files, fileList)
+          if (files.ignored || fileList.ignored) {
+            // is ignored, filter it
+            return false
+          }
         }
       }
       const fileRemoved = () => {
-        files.value = uploader.files
-        fileList.value = uploader.fileList
+        files.value = [...uploader.files]
+        fileList.value = [...uploader.fileList]
       }
       const filesSubmitted = () => {
-        files.value = uploader.files
-        fileList.value = uploader.fileList
+        files.value = [...uploader.files]
+        fileList.value = [...uploader.fileList]
         if (props.autoStart) {
           uploader.upload()
         }
@@ -140,7 +160,8 @@
         uploader = null
       })
 
-      provide('uploader', reactive(uploader))
+      provide('uploader', instance)
+
       return {
         uploader,
         started,
@@ -151,8 +172,7 @@
         filesAdded,
         fileRemoved,
         filesSubmitted,
-        allEvent,
-        uploaderList
+        allEvent
       }
     },
     components: {