From 5b7583531187a77b2522cc8934b8a2c1ef7fd966 Mon Sep 17 00:00:00 2001 From: J-michalek Date: Wed, 6 Aug 2025 19:25:54 +0200 Subject: [PATCH 1/5] fix(FileUpload): accept any subtype The accept prop did not work with image/* etc. --- src/runtime/composables/useFileUpload.ts | 28 +++++++++++++++++++++--- 1 file changed, 25 insertions(+), 3 deletions(-) diff --git a/src/runtime/composables/useFileUpload.ts b/src/runtime/composables/useFileUpload.ts index 9f7c15612b..8d5c257aa7 100644 --- a/src/runtime/composables/useFileUpload.ts +++ b/src/runtime/composables/useFileUpload.ts @@ -67,9 +67,31 @@ export function useFileUpload(options: UseFileUploadOptions) { } onMounted(() => { - const { isOverDropZone } = dropzone - ? useDropZone(dropzoneRef, { dataTypes: dataTypes.value, onDrop }) - : { isOverDropZone: ref(false) } + const { isOverDropZone } = useDropZone(dropzoneRef, { + dataTypes: (types) => { + if (dataTypes.value === undefined || accept === '*') { + return true + } + + return types.some((type) => { + return dataTypes.value?.some((acceptedType) => { + if (acceptedType.endsWith('/*')) { + const base = acceptedType.slice(0, acceptedType.indexOf('/')) + return type.startsWith(base + '/') + } else { + return type === acceptedType + } + }) + }) + }, onDrop: (files, event) => { + if (!dropzone) { + event.preventDefault() + return + } + + onDrop(files) + } + }) watch(isOverDropZone, (value) => { isDragging.value = value From dffdeaf5a814686aa1bc0ffb94c5d23117ad9518 Mon Sep 17 00:00:00 2001 From: J-michalek Date: Wed, 6 Aug 2025 19:27:52 +0200 Subject: [PATCH 2/5] Revert "fix(FileUpload): accept any subtype" This reverts commit 5b7583531187a77b2522cc8934b8a2c1ef7fd966. --- src/runtime/composables/useFileUpload.ts | 28 +++--------------------- 1 file changed, 3 insertions(+), 25 deletions(-) diff --git a/src/runtime/composables/useFileUpload.ts b/src/runtime/composables/useFileUpload.ts index 8d5c257aa7..9f7c15612b 100644 --- a/src/runtime/composables/useFileUpload.ts +++ b/src/runtime/composables/useFileUpload.ts @@ -67,31 +67,9 @@ export function useFileUpload(options: UseFileUploadOptions) { } onMounted(() => { - const { isOverDropZone } = useDropZone(dropzoneRef, { - dataTypes: (types) => { - if (dataTypes.value === undefined || accept === '*') { - return true - } - - return types.some((type) => { - return dataTypes.value?.some((acceptedType) => { - if (acceptedType.endsWith('/*')) { - const base = acceptedType.slice(0, acceptedType.indexOf('/')) - return type.startsWith(base + '/') - } else { - return type === acceptedType - } - }) - }) - }, onDrop: (files, event) => { - if (!dropzone) { - event.preventDefault() - return - } - - onDrop(files) - } - }) + const { isOverDropZone } = dropzone + ? useDropZone(dropzoneRef, { dataTypes: dataTypes.value, onDrop }) + : { isOverDropZone: ref(false) } watch(isOverDropZone, (value) => { isDragging.value = value From 9d83bf78b19b909e3e4ac01defbaf9805f70d3b3 Mon Sep 17 00:00:00 2001 From: J-michalek Date: Wed, 6 Aug 2025 19:28:15 +0200 Subject: [PATCH 3/5] fix(FileUpload): accept any subtype The accept prop did not work with image/* etc. --- src/runtime/composables/useFileUpload.ts | 28 +++++++++++++++++++++--- 1 file changed, 25 insertions(+), 3 deletions(-) diff --git a/src/runtime/composables/useFileUpload.ts b/src/runtime/composables/useFileUpload.ts index 9f7c15612b..8d5c257aa7 100644 --- a/src/runtime/composables/useFileUpload.ts +++ b/src/runtime/composables/useFileUpload.ts @@ -67,9 +67,31 @@ export function useFileUpload(options: UseFileUploadOptions) { } onMounted(() => { - const { isOverDropZone } = dropzone - ? useDropZone(dropzoneRef, { dataTypes: dataTypes.value, onDrop }) - : { isOverDropZone: ref(false) } + const { isOverDropZone } = useDropZone(dropzoneRef, { + dataTypes: (types) => { + if (dataTypes.value === undefined || accept === '*') { + return true + } + + return types.some((type) => { + return dataTypes.value?.some((acceptedType) => { + if (acceptedType.endsWith('/*')) { + const base = acceptedType.slice(0, acceptedType.indexOf('/')) + return type.startsWith(base + '/') + } else { + return type === acceptedType + } + }) + }) + }, onDrop: (files, event) => { + if (!dropzone) { + event.preventDefault() + return + } + + onDrop(files) + } + }) watch(isOverDropZone, (value) => { isDragging.value = value From a7d132b4fef8a5e0a88bbc8d55a2319aae1b0c41 Mon Sep 17 00:00:00 2001 From: Jakub Date: Thu, 7 Aug 2025 13:12:58 +0200 Subject: [PATCH 4/5] Revert "fix(FileUpload): accept any subtype" This reverts commit 9d83bf78b19b909e3e4ac01defbaf9805f70d3b3. --- src/runtime/composables/useFileUpload.ts | 28 +++--------------------- 1 file changed, 3 insertions(+), 25 deletions(-) diff --git a/src/runtime/composables/useFileUpload.ts b/src/runtime/composables/useFileUpload.ts index 8d5c257aa7..9f7c15612b 100644 --- a/src/runtime/composables/useFileUpload.ts +++ b/src/runtime/composables/useFileUpload.ts @@ -67,31 +67,9 @@ export function useFileUpload(options: UseFileUploadOptions) { } onMounted(() => { - const { isOverDropZone } = useDropZone(dropzoneRef, { - dataTypes: (types) => { - if (dataTypes.value === undefined || accept === '*') { - return true - } - - return types.some((type) => { - return dataTypes.value?.some((acceptedType) => { - if (acceptedType.endsWith('/*')) { - const base = acceptedType.slice(0, acceptedType.indexOf('/')) - return type.startsWith(base + '/') - } else { - return type === acceptedType - } - }) - }) - }, onDrop: (files, event) => { - if (!dropzone) { - event.preventDefault() - return - } - - onDrop(files) - } - }) + const { isOverDropZone } = dropzone + ? useDropZone(dropzoneRef, { dataTypes: dataTypes.value, onDrop }) + : { isOverDropZone: ref(false) } watch(isOverDropZone, (value) => { isDragging.value = value From 6952c39e4dfefad07b563c0b0cc633f36cbe2664 Mon Sep 17 00:00:00 2001 From: Jakub Date: Thu, 7 Aug 2025 13:25:38 +0200 Subject: [PATCH 5/5] refactor(useFileUpload): simplify data type check --- src/runtime/composables/useFileUpload.ts | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/runtime/composables/useFileUpload.ts b/src/runtime/composables/useFileUpload.ts index 9f7c15612b..308a8c51ce 100644 --- a/src/runtime/composables/useFileUpload.ts +++ b/src/runtime/composables/useFileUpload.ts @@ -22,7 +22,14 @@ function parseAcceptToDataTypes(accept: string): string[] | undefined { const types = accept .split(',') - .map(type => type.trim()) + .map((type) => { + const trimmedType = type.trim() + + if (trimmedType.includes('/') && trimmedType.endsWith('/*')) { + return trimmedType.split('/')[0] || trimmedType + } + return trimmedType + }) .filter((type) => { return !type.startsWith('.') })