Upload: filter accepted file types in dragger (#10278)

packages/upload/src/index.vue

@@ -19,8 +19,10 @@ export default {
     IframeUpload
   },
 
-  provide: {
-    uploader: this
+  provide() {
+    return {
+      uploader: this
+    };
   },
 
   inject: {

packages/upload/src/upload-dragger.vue

@@ -17,6 +17,11 @@
     props: {
       disabled: Boolean
     },
+    inject: {
+      uploader: {
+        default: ''
+      }
+    },
     data() {
       return {
         dragover: false
@@ -29,10 +34,35 @@
         }
       },
       onDrop(e) {
-        if (!this.disabled) {
-          this.dragover = false;
+        if (this.disabled || !this.uploader) return;
+        const accept = this.uploader.accept;
+        this.dragover = false;
+        if (!accept) {
           this.$emit('file', e.dataTransfer.files);
+          return;
         }
+        this.$emit('file', [].slice.call(e.dataTransfer.files).filter(file => {
+          const { type, name } = file;
+          const extension = name.indexOf('.') > -1
+            ? `.${ name.split('.').pop() }`
+            : '';
+          const baseType = type.replace(/\/.*$/, '');
+          return accept.split(',')
+            .map(type => type.trim())
+            .filter(type => type)
+            .some(acceptedType => {
+              if (/\..+$/.test(acceptedType)) {
+                return extension === acceptedType;
+              }
+              if (/\/\*$/.test(acceptedType)) {
+                return baseType === acceptedType.replace(/\/\*$/, '');
+              }
+              if (/^[^\/]+\/[^\/]+$/.test(acceptedType)) {
+                return type === acceptedType;
+              }
+              return false;
+            });
+        }));
       }
     }
   };