Merge pull request #6058 from HMXHIU/feature/attachmentLimit

Expose option to limit amount of uploads in attatchment field

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]

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}

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",

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}