From 49a8cf28e490c3b828ce561e7b599bdc4a35e6f6 Mon Sep 17 00:00:00 2001 From: wangyaomin <2856572867@qq.com> Date: Wed, 8 Nov 2023 17:01:29 +0800 Subject: [PATCH] Upload: added hook function 'on-drag-invalid-accept' --- examples/docs/en-US/upload.md | 1 + examples/docs/es/upload.md | 1 + examples/docs/fr-FR/upload.md | 1 + examples/docs/zh-CN/upload.md | 1 + packages/upload/src/index.vue | 7 ++++++- packages/upload/src/upload-dragger.vue | 20 +++++++++++++++++--- packages/upload/src/upload.vue | 8 +++++--- types/upload.d.ts | 3 +++ 8 files changed, 35 insertions(+), 7 deletions(-) diff --git a/examples/docs/en-US/upload.md b/examples/docs/en-US/upload.md index 0d377f276..84d3e6891 100644 --- a/examples/docs/en-US/upload.md +++ b/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 | diff --git a/examples/docs/es/upload.md b/examples/docs/es/upload.md index 6e571e9ad..b0e5376ad 100644 --- a/examples/docs/es/upload.md +++ b/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 | diff --git a/examples/docs/fr-FR/upload.md b/examples/docs/fr-FR/upload.md index b5fd2d683..793dd4093 100644 --- a/examples/docs/fr-FR/upload.md +++ b/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 diff --git a/examples/docs/zh-CN/upload.md b/examples/docs/zh-CN/upload.md index 6fbc37d78..a2f070aba 100644 --- a/examples/docs/zh-CN/upload.md +++ b/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 | 说明 | diff --git a/packages/upload/src/index.vue b/packages/upload/src/index.vue index e73565359..b69afc376 100644 --- a/packages/upload/src/index.vue +++ b/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' }; diff --git a/packages/upload/src/upload-dragger.vue b/packages/upload/src/upload-dragger.vue index b3293c6f5..1805ebda5 100644 --- a/packages/upload/src/upload-dragger.vue +++ b/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; }); })); diff --git a/packages/upload/src/upload.vue b/packages/upload/src/upload.vue index 200ca0ac9..4719f8519 100644 --- a/packages/upload/src/upload.vue +++ b/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 {
{ drag - ? {this.$slots.default} + ? {this.$slots.default} : this.$slots.default } diff --git a/types/upload.d.ts b/types/upload.d.ts index 525fc3684..d32e72bcf 100644 --- a/types/upload.d.ts +++ b/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;