@worksafevictoria/wcl7.5 1.1.0-beta.104 → 1.1.0-beta.105

package/src/components/SubComponents/FormInstance/components/renderer/index.vue

@@ -12,10 +12,14 @@
       @nextPage="next($event)"
       @prevPage="prev($event)"
     ></formio>
+    <BModal centered v-model="modal" title="File Error" ok-only>
+      {{ fileMessage }}</BModal
+    >
   </div>
 </template>
 
 <script>
+import { BModal } from 'bootstrap-vue-next'
 import { Form, Formio } from '@formio/vue'
 import '@fortawesome/fontawesome-free/css/all.min.css'
 import '@fortawesome/fontawesome-free/css/v4-shims.min.css'
@@ -23,7 +27,7 @@ import 'formiojs/dist/formio.builder.min.css'
 
 export default {
   name: 'FormRenderer',
-  components: { formio: Form },
+  components: { formio: Form, BModal },
   props: {
     formiodefinition: {
       type: Object,
@@ -46,6 +50,8 @@ export default {
       debouncedSubmission: this.debounce(this.submit, 250),
       firstEl: null,
       started: false,
+      modal: false,
+      fileMessage: '',
     }
   },
   mounted() {
@@ -100,7 +106,7 @@ export default {
         }
       }
     },
-    changed(_e, event) {
+    async changed(_e, event) {
       // File upload validation
       if (event.changed?.component.type === 'file') {
         const maxFiles = event.changed.component.fileMaxCount || 1
@@ -122,17 +128,27 @@ export default {
         const maxTotalBytes = convertToBytes(maxTotalSize)
         const files = event.changed.instance.dataValue || []
         if (files.length > maxFiles) {
-          event.changed.instance.dataValue = files.slice(0, files.length - 1)
+          event.changed.instance.dataValue = files.slice(0, maxFiles)
+          this.fileMessage = `You have exceeded the maximum number of files allowed. Only the first ${maxFiles} files have been uploaded.`
+          this.modal = true
+
           event.changed.instance.triggerChange()
           event.changed.instance.triggerRedraw()
-          alert(`You can only upload up to ${maxFiles} files.`)
         }
-        const totalSize = files.reduce((sum, file) => sum + (file.size || 0), 0)
+        let totalSize = files.reduce((sum, file) => sum + (file.size || 0), 0)
         if (totalSize > maxTotalBytes) {
-          event.changed.instance.dataValue = files.slice(0, files.length - 1)
+          let limit = []
+          while (totalSize > maxTotalBytes) {
+            const file = files.pop()
+            limit.push(file.name)
+            totalSize -= file.size
+          }
+          event.changed.instance.dataValue = files //.slice(0, files.length - 1)
+          this.fileMessage = `You have exceeded the maximum total file size allowed. Only ${files.length} files have been uploaded.`
+          this.modal = true
+          console.log('🚀 ~ changed ~ limit.length:', limit.length)
           event.changed.instance.triggerChange()
           event.changed.instance.triggerRedraw()
-          alert(`Total file size cannot exceed ${maxTotalSize}.`)
           return
         }
       }

package/src/components/SubComponents/FormInstance/models/overrides/file.js

@@ -39,8 +39,13 @@ export class FileFormElement extends BaseFormElement {
       webcam: false,
       multiple: true,
       description: `No more than ${this.webformElement['#multiple']} files accepted. Maximum total size is ${this.webformElement['#max_filesize']}MB.`,
-      filePattern:
-        '*.png,*.jpg,*.jpeg,*.pdf,*.doc,*.docx,*.xls,*.xlsx,*.csv,*.txt',
+      filePattern: this.webformElement['#file_extensions']
+        ? this.webformElement['#file_extensions']
+            .split(' ')
+            .map((ext) => `.${ext}`)
+            .join(',')
+        : '',
+
       fileKey: `files[${this.webformElement['#name']}]`,
       fileMaxSize: `${this.webformElement['#max_filesize']}MB`,
       fileMaxCount: this.webformElement['#multiple'],

package/src/index.js

@@ -43,6 +43,7 @@ import MarketingBanner from './components/Paragraphs/MarketingBanner/index.vue'
 import RelatedInformation from './components/Paragraphs/RelatedInformation/index.vue'
 import Calculator from './components/Paragraphs/Calculator/index.vue'
 import Chart from './components/Paragraphs/Chart/index.vue'
+import GeoChart from './components/Paragraphs/Map/index.vue'
 
 // SubComponents
 import FormAddressPostcode from './components/SubComponents/FormAddressPostcode/index.vue'
@@ -108,6 +109,7 @@ export {
   RelatedInformation,
   Calculator,
   Chart,
+  GeoChart,
 }
 
 // Export Sub Components