diff --git a/packages/bbui/src/Form/Core/Dropzone.svelte b/packages/bbui/src/Form/Core/Dropzone.svelte index d739e751c9..36515acbc5 100644 --- a/packages/bbui/src/Form/Core/Dropzone.svelte +++ b/packages/bbui/src/Form/Core/Dropzone.svelte @@ -18,6 +18,7 @@ export let fileSizeLimit = BYTES_IN_MB * 20 export let processFiles = null export let handleFileTooLarge = null + export let handleTooManyFiles = null export let gallery = true export let error = null export let fileTags = [] @@ -71,6 +72,13 @@ handleFileTooLarge(fileSizeLimit, value) return } + + const fileCount = fileList.length + value.length + if (handleTooManyFiles && maximum && fileCount > maximum) { + handleTooManyFiles(maximum) + return + } + if (processFiles) { const processedFiles = await processFiles(fileList) const newValue = [...value, ...processedFiles] diff --git a/packages/bbui/src/Form/Dropzone.svelte b/packages/bbui/src/Form/Dropzone.svelte index 757d76398b..f1b548f7f1 100644 --- a/packages/bbui/src/Form/Dropzone.svelte +++ b/packages/bbui/src/Form/Dropzone.svelte @@ -11,6 +11,7 @@ export let fileSizeLimit = undefined export let processFiles = undefined export let handleFileTooLarge = undefined + export let handleTooManyFiles = undefined export let gallery = true export let fileTags = [] export let maximum = undefined @@ -30,6 +31,7 @@ {fileSizeLimit} {processFiles} {handleFileTooLarge} + {handleTooManyFiles} {gallery} {fileTags} {maximum} diff --git a/packages/client/manifest.json b/packages/client/manifest.json index 80828c70e5..b36563b202 100644 --- a/packages/client/manifest.json +++ b/packages/client/manifest.json @@ -2791,6 +2791,12 @@ "label": "Extensions", "key": "extensions" }, + { + "type": "number", + "label": "No. of attachment", + "key": "maximum", + "min": 1 + }, { "type": "event", "label": "On Change", diff --git a/packages/client/src/components/app/forms/AttachmentField.svelte b/packages/client/src/components/app/forms/AttachmentField.svelte index 5b2eab0c42..5023e77ae5 100644 --- a/packages/client/src/components/app/forms/AttachmentField.svelte +++ b/packages/client/src/components/app/forms/AttachmentField.svelte @@ -9,6 +9,7 @@ export let validation export let extensions export let onChange + export let maximum = undefined let fieldState let fieldApi @@ -25,6 +26,12 @@ ) } + const handleTooManyFiles = fileLimit => { + notificationStore.actions.warning( + `Please select a maximum of ${fileLimit} files.` + ) + } + const processFiles = async fileList => { let data = new FormData() for (let i = 0; i < fileList.length; i++) { @@ -66,6 +73,8 @@ on:change={handleChange} {processFiles} {handleFileTooLarge} + {handleTooManyFiles} + {maximum} {extensions} /> {/if}