Upload: added hook function 'on-drag-invalid-accept'

examples/docs/en-US/upload.md

@@ -368,6 +368,7 @@ http-request | override default xhr behavior, allowing you to implement your own
 disabled | whether to disable upload | boolean | — | false |
 limit | maximum number of uploads allowed | number | — | — |
 on-exceed | hook function when limit is exceeded | function(files, fileList) | — | - |
+on-drag-invalid-accept | hook function when the format of the file placed by dragging does not comply with the accept rules | function(file) | — | — |
 
 ### Slot
 | Name | Description |

examples/docs/es/upload.md

@@ -364,6 +364,7 @@ Puede arrastrar el archivo dentro de un área en especifico para cargar el archi
 | disabled         | especifica si se deshabilita la carga de archivos            | boolean                            | —                         | false       |
 | limit            | número máximo de cargas permitidas                           | number                             | —                         | —           |
 | on-exceed        | _hook_ lanzado cuando el límite ha sido excedido             | function(files, fileList)          | —                         | -           |
+| on-drag-invalid-accept | _hook_ The format of files placed via drag and drop does not comply with the accept rules | function(file) | — | - |
 
 ### Slot
 | Nombre       | Descripción                   |

examples/docs/fr-FR/upload.md

@@ -369,6 +369,7 @@ http-request | Écrase le xhr par défaut, afin que vous puissiez implémenter v
 disabled | Si le composant est désactivé. | boolean | — | false |
 limit | Nombre maximum d'envoi autorisés. | number | — | — |
 on-exceed | Fonction pour quand la limite d'envoi est dépassée. | function(files, fileList) | — | - |
+on-drag-invalid-accept | hook function when the format of the file placed by dragging does not comply with the accept rules | function(file) | — | — |
 
 ### Slot
 

examples/docs/zh-CN/upload.md

@@ -376,6 +376,7 @@
 | disabled | 是否禁用 | boolean | — | false |
 | limit | 最大允许上传个数 |  number | — | — |
 | on-exceed | 文件超出个数限制时的钩子 | function(files, fileList) | — | - |
+| on-drag-invalid-accept | 以拖拽方式放入的文件，格式不符合 accept 规则时的钩子 | function(file) | — | - |
 
 ### Slot
 | name | 说明 |

packages/upload/src/index.vue

@@ -103,6 +103,10 @@ export default {
     onExceed: {
       type: Function,
       default: noop
+    },
+    onDragInvalidAccept: {
+      type: Function,
+      default: noop
     }
   },
 
@@ -313,7 +317,8 @@ export default {
         'on-error': this.handleError,
         'on-preview': this.onPreview,
         'on-remove': this.handleRemove,
-        'http-request': this.httpRequest
+        'http-request': this.httpRequest,
+        'on-drag-invalid-accept': this.onDragInvalidAccept
       },
       ref: 'upload-inner'
     };

packages/upload/src/upload-dragger.vue

@@ -51,15 +51,29 @@
             .map(type => type.trim())
             .filter(type => type)
             .some(acceptedType => {
+              let pass = true;
               if (/\..+$/.test(acceptedType)) {
-                return extension === acceptedType;
+                pass = extension === acceptedType;
+                if (!pass) {
+                  this.$emit('drag-invalid-accept', file);
+                }
+                return pass;
               }
               if (/\/\*$/.test(acceptedType)) {
-                return baseType === acceptedType.replace(/\/\*$/, '');
+                pass = baseType === acceptedType.replace(/\/\*$/, '');
+                if (!pass) {
+                  this.$emit('drag-invalid-accept', file);
+                }
+                return pass;
               }
               if (/^[^\/]+\/[^\/]+$/.test(acceptedType)) {
-                return type === acceptedType;
+                pass = type === acceptedType;
+                if (!pass) {
+                  this.$emit('drag-invalid-accept', file);
+                }
+                return pass;
               }
+              this.$emit('drag-invalid-accept', file);
               return false;
             });
         }));

packages/upload/src/upload.vue

@@ -45,7 +45,8 @@ export default {
     },
     disabled: Boolean,
     limit: Number,
-    onExceed: Function
+    onExceed: Function,
+    onDragInvalidAccept: Function
   },
 
   data() {
@@ -184,7 +185,8 @@ export default {
       listType,
       uploadFiles,
       disabled,
-      handleKeydown
+      handleKeydown,
+      onDragInvalidAccept
     } = this;
     const data = {
       class: {
@@ -200,7 +202,7 @@ export default {
       <div {...data} tabindex="0" >
         {
           drag
-            ? <upload-dragger disabled={disabled} on-file={uploadFiles}>{this.$slots.default}</upload-dragger>
+            ? <upload-dragger disabled={disabled} on-file={uploadFiles} on-drag-invalid-accept={onDragInvalidAccept}>{this.$slots.default}</upload-dragger>
             : this.$slots.default
         }
         <input class="el-upload__input" type="file" ref="input" name={name} on-change={handleChange} multiple={multiple} accept={accept}></input>

types/upload.d.ts

@@ -113,6 +113,9 @@ export declare class ElUpload extends ElementUIComponent {
   /** Hook function when limit is exceeded */
   onExceed: (file: ElUploadInternalFileDetail, fileList: ElUploadInternalFileDetail[]) => void
 
+  /** hook function when the format of the file placed by dragging does not comply with the accept rules */
+  onDragInvalidAccept: (file: ElUploadInternalFileDetail) => void
+
   /** Clear the upload file list */
   clearFiles (): void;