From 3a5dc4e739f433f86415a0693be9fdcc1db23f97 Mon Sep 17 00:00:00 2001
From: jasonchung1871 <101672465+jasonchung1871@users.noreply.github.com>
Date: Thu, 24 Oct 2024 18:16:01 -0700
Subject: [PATCH 1/2] Refactored FormViewer & FormViewerMultiUpload

The multi upload functionality has been separated from FormViewer, including the tests. They weren't necessary to all be dumped in FormViewer.

TODO: Tests for FormViewerMultiUpload
---
 .../src/components/designer/FormViewer.vue    |  359 +----
 .../designer/FormViewerMultiUpload.vue        | 1396 ++++++++++-------
 app/frontend/src/utils/transformUtils.js      |    4 +
 .../components/designer/FormViewer.spec.js    |  308 +---
 ....spec.js => FormViewerMultiUpload.spec.js} |  302 ++++
 5 files changed, 1166 insertions(+), 1203 deletions(-)
 rename app/frontend/tests/unit/components/designer/{MultiUpload.spec.js => FormViewerMultiUpload.spec.js} (56%)

diff --git a/app/frontend/src/components/designer/FormViewer.vue b/app/frontend/src/components/designer/FormViewer.vue
index 42c6714e2..ac88ab8a5 100644
--- a/app/frontend/src/components/designer/FormViewer.vue
+++ b/app/frontend/src/components/designer/FormViewer.vue
@@ -87,7 +87,6 @@ const forceNewTabLinks = ref(true);
 const form = ref({});
 const formDataEntered = ref(false);
 const formElement = ref(undefined);
-const formFields = ref([]);
 const formSchema = ref({});
 const isFormScheduleExpired = ref(false);
 const isLateSubmissionAllowed = ref(false);
@@ -102,14 +101,6 @@ const reRenderFormIo = ref(0);
 const saveDraftDialog = ref(false);
 const saveDraftState = ref(0);
 const saving = ref(false);
-const sbdMessage = ref({
-  message: String,
-  error: Boolean,
-  upload_state: Number,
-  response: [],
-  file_name: String,
-  typeError: Number,
-});
 const showModal = ref(false);
 const showSubmitConfirmDialog = ref(false);
 const submission = ref({ data: { lateEntry: false } });
@@ -424,7 +415,7 @@ async function getFormSchema() {
   }
 }
 
-function toggleBlock(e) {
+function isProcessingMultiUpload(e) {
   block.value = e;
 }
 
@@ -452,346 +443,6 @@ function jsonManager() {
   }
 }
 
-function resetMessage() {
-  sbdMessage.value.message = undefined;
-  sbdMessage.value.error = false;
-  sbdMessage.value.upload_state = 0;
-  sbdMessage.value.response = [];
-  sbdMessage.value.file_name = undefined;
-  sbdMessage.value.typeError = -1;
-  block.value = false;
-}
-
-async function saveBulkData(submissions) {
-  const payload = {
-    draft: true,
-    submission: Object.freeze({ data: submissions }),
-  };
-  block.value = true;
-  sendMultiSubmissionData(payload);
-}
-
-async function sendMultiSubmissionData(body) {
-  try {
-    saving.value = true;
-    let response = await formService.createMultiSubmission(
-      properties.formId,
-      versionIdToSubmitTo.value,
-      body
-    );
-    if ([200, 201].includes(response.status)) {
-      // all is good, flag no errors and carry on...
-      // store our submission result...
-      sbdMessage.value.message = t('trans.formViewer.multiDraftUploadSuccess');
-      sbdMessage.value.error = false;
-      sbdMessage.value.upload_state = 10;
-      sbdMessage.value.response = [];
-      block.value = false;
-      saving.value = false;
-      notificationStore.addNotification({
-        text: sbdMessage.value.message,
-        ...NotificationTypes.SUCCESS,
-      });
-    } else {
-      sbdMessage.value.message = t('trans.formViewer.failedResSubmissn', {
-        status: response.status,
-      });
-      sbdMessage.value.error = true;
-      sbdMessage.value.upload_state = 10;
-      block.value = false;
-      sbdMessage.value.response = [
-        { error_message: t('trans.formViewer.errSubmittingForm') },
-      ];
-      sbdMessage.value.file_name =
-        'error_report_' + form.value.name + '_' + Date.now();
-      saving.value = false;
-      throw new Error(
-        t('trans.formViewer.failedResSubmissn', {
-          status: response.status,
-        })
-      );
-    }
-  } catch (error) {
-    saving.value = false;
-    block.value = false;
-    setFinalError(error);
-    notificationStore.addNotification({
-      text: sbdMessage.value.message,
-      consoleError: t('trans.formViewer.errorSavingFile', {
-        fileName: json_csv.value.file_name,
-        error: error,
-      }),
-    });
-  }
-}
-
-async function setFinalError(error) {
-  try {
-    if (error.response.data != undefined) {
-      sbdMessage.value.message =
-        error.response.data.title == undefined
-          ? t('trans.formViewer.errSubmittingForm')
-          : error.response.data.title;
-      sbdMessage.value.response =
-        error.response.data.reports == undefined
-          ? [
-              {
-                error_message: t('trans.formViewer.errSubmittingForm'),
-              },
-            ]
-          : await formatResponse(error.response.data.reports);
-    } else {
-      sbdMessage.value.message = t('trans.formViewer.errSubmittingForm');
-      sbdMessage.value.response = [
-        { error_message: t('trans.formViewer.errSubmittingForm') },
-      ];
-    }
-  } catch (error_2) {
-    sbdMessage.value.message = t('trans.formViewer.errSubmittingForm');
-    sbdMessage.value.response = [
-      { error_message: t('trans.formViewer.errSubmittingForm') },
-    ];
-  } finally {
-    sbdMessage.value.error = true;
-    sbdMessage.value.upload_state = 10;
-    sbdMessage.value.file_name =
-      'error_report_' + form.value.name + '_' + Date.now();
-  }
-}
-
-function buildValidationFromComponent(obj) {
-  if (obj?.component?.validate) {
-    let validatorIdentity = '';
-    Object.keys(obj.component.validate).forEach((validity) => {
-      switch (validity) {
-        case 'maxSelectedCount':
-          if (obj.component.validate.maxSelectedCount) {
-            validatorIdentity +=
-              '|maxSelectedCount:' + obj.component.validate[validity];
-          }
-          break;
-
-        case 'minSelectedCount':
-          if (obj.component.validate.minSelectedCount) {
-            validatorIdentity +=
-              '|minSelectedCount:' + obj.component.validate[validity];
-          }
-          break;
-
-        case 'multiple':
-          if (obj.component.validate.multiple) {
-            validatorIdentity +=
-              '|multiple:' + obj.component.validate[validity];
-          }
-          break;
-
-        case 'onlyAvailableItems':
-          if (obj.component.validate.onlyAvailableItems) {
-            validatorIdentity +=
-              '|onlyAvailableItems:' + obj.component.validate[validity];
-          }
-          break;
-
-        case 'required':
-          if (obj.component.validate.required) {
-            validatorIdentity +=
-              '|required:' + obj.component.validate[validity];
-          }
-          break;
-
-        case 'strictDateValidation':
-          if (obj.component.validate.strictDateValidation) {
-            validatorIdentity +=
-              '|strictDateValidation:' + obj.component.validate[validity];
-          }
-          break;
-
-        case 'unique':
-          if (obj.component.validate.unique) {
-            validatorIdentity += '|unique:' + obj.component.validate[validity];
-          }
-          break;
-
-        case 'custom':
-          if (obj.component.validate.custom.length) {
-            validatorIdentity +=
-              '|custom:' +
-              obj.component.validate[validity].trim().replaceAll(',', '‚');
-          }
-          break;
-
-        case 'customMessage':
-          if (obj.component.validate.customMessage) {
-            validatorIdentity +=
-              '|customMessage:' +
-              obj.component.validate[validity].trim().replaceAll(',', '‚');
-          }
-          break;
-
-        case 'customPrivate':
-          if (obj.component.validate.customPrivate) {
-            validatorIdentity +=
-              '|customPrivate:' + obj.component.validate[validity].trim();
-          }
-          break;
-
-        case 'json':
-          if (obj.component.validate.json) {
-            validatorIdentity += '|json:' + obj.component.validate[validity];
-          }
-          break;
-
-        case 'pattern':
-          if (obj.component.validate.pattern) {
-            validatorIdentity += '|pattern:' + obj.component.validate[validity];
-          }
-          break;
-
-        case 'maxWords':
-          if (obj.component.validate.maxWords) {
-            validatorIdentity +=
-              '|maxWords:' + obj.component.validate[validity];
-          }
-          break;
-
-        case 'minWords':
-          if (obj.component.validate.minWords) {
-            validatorIdentity +=
-              '|minWords:' + obj.component.validate[validity];
-          }
-          break;
-
-        case 'maxLength':
-          if (obj.component.validate.maxLength) {
-            validatorIdentity +=
-              '|maxLength:' + obj.component.validate[validity];
-          }
-          break;
-
-        case 'minLength':
-          if (obj.component.validate.minLength) {
-            validatorIdentity +=
-              '|minLength:' + obj.component.validate[validity];
-          }
-          break;
-
-        default:
-          validatorIdentity +=
-            '|' + validity + ':' + obj.component.validate[validity];
-          break;
-      }
-    });
-    return validatorIdentity.replace(/^\|/, '');
-  } else if (obj?.messages[0]?.context?.validator) {
-    return obj.messages[0].context.validator;
-  } else {
-    return 'Unknown';
-  }
-}
-
-async function frontendFormatResponse(response) {
-  let newResponse = [];
-
-  for (const item of response) {
-    if (item != null && item != undefined) {
-      for (const obj of item.errors) {
-        let error = {};
-
-        if (obj.component != undefined) {
-          error = {
-            submission: item.submission,
-            key: obj.component.key,
-            label: obj.component.label,
-            validator: buildValidationFromComponent(obj),
-            error_message: obj.message,
-          };
-        } else {
-          error = {
-            submission: item.submission,
-            key: null,
-            label: null,
-            validator: null,
-            error_message: obj.message,
-          };
-        }
-
-        newResponse.push(error);
-      }
-    }
-  }
-
-  return newResponse;
-}
-
-async function formatResponse(response) {
-  let newResponse = [];
-  await response.forEach((item, index) => {
-    if (item != null && item != undefined) {
-      item.details.forEach((obj) => {
-        let error = {};
-        if (obj.context != undefined) {
-          error = Object({
-            submission: index,
-            key: obj.context.key,
-            label: obj.context.label,
-            validator: obj.context.validator,
-            error_message: obj.message,
-          });
-        } else {
-          error = Object({
-            submission: index,
-            key: null,
-            label: null,
-            validator: null,
-            error_message: obj.message,
-          });
-        }
-        newResponse.push(error);
-      });
-    }
-  });
-  return newResponse;
-}
-
-async function setError(error) {
-  sbdMessage.value = error;
-
-  try {
-    if (error.response.data != undefined) {
-      sbdMessage.value.message =
-        error.response.data.title == undefined
-          ? 'An error occurred submitting this form'
-          : error.response.data.title;
-      sbdMessage.value.error = true;
-      sbdMessage.value.upload_state = 10;
-      sbdMessage.value.response =
-        error.response.data.reports == undefined
-          ? [{ error_message: 'An error occurred submitting this form' }]
-          : await frontendFormatResponse(error.response.data.reports);
-      sbdMessage.value.file_name =
-        'error_report_' + form.value.name + '_' + Date.now();
-    } else {
-      sbdMessage.value.message = 'An error occurred submitting this form';
-      sbdMessage.value.error = true;
-      sbdMessage.value.upload_state = 10;
-      sbdMessage.value.response = [
-        { error_message: 'An error occurred submitting this form' },
-      ];
-      sbdMessage.value.file_name =
-        'error_report_' + form.value.name + '_' + Date.now();
-    }
-  } catch (error_2) {
-    sbdMessage.value.message = 'An error occurred submitting this form';
-    sbdMessage.value.error = true;
-    sbdMessage.value.upload_state = 10;
-    sbdMessage.value.response = [
-      { error_message: 'An error occurred submitting this form' },
-    ];
-    sbdMessage.value.file_name =
-      'error_report_' + form.value.name + '_' + Date.now();
-  }
-}
-
 async function saveDraft() {
   try {
     saving.value = true;
@@ -1291,16 +942,12 @@ async function uploadFile(file, config = {}) {
           </v-alert>
           <FormViewerMultiUpload
             v-if="!isLoading && form.allowSubmitterToUploadFile && bulkFile"
-            :response="sbdMessage"
             :form="form"
             :form-element="formElement"
             :form-schema="formSchema"
             :json-csv="json_csv"
-            :form-fields="formFields"
-            @save-bulk-data="saveBulkData"
-            @reset-message="resetMessage"
-            @set-error="setError"
-            @toggleBlock="toggleBlock"
+            :submission-version="versionIdToSubmitTo"
+            @isProcessing="isProcessingMultiUpload"
           />
 
           <Form
diff --git a/app/frontend/src/components/designer/FormViewerMultiUpload.vue b/app/frontend/src/components/designer/FormViewerMultiUpload.vue
index f603386c2..1aa5f891f 100644
--- a/app/frontend/src/components/designer/FormViewerMultiUpload.vue
+++ b/app/frontend/src/components/designer/FormViewerMultiUpload.vue
@@ -1,501 +1,809 @@
-<script>
+<script setup>
 import { Formio, Utils } from '@formio/vue';
 import _ from 'lodash';
-import { mapActions, mapState } from 'pinia';
+import { storeToRefs } from 'pinia';
+import { computed, nextTick, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
-import BaseInfoCard from '~/components/base/BaseInfoCard.vue';
+import { formService } from '~/services';
 import { useAppStore } from '~/store/app';
 import { useFormStore } from '~/store/form';
 import { useNotificationStore } from '~/store/notification';
+import { NotificationTypes } from '~/utils/constants';
+import { multiuploadTemplateFilename } from '~/utils/transformUtils';
 
-export default {
-  components: {
-    BaseInfoCard,
-  },
-  props: {
-    formElement: undefined,
-    form: {
-      type: Object,
-      default: () => {},
-    },
-    formSchema: {
-      type: Object,
-      default: () => {},
-    },
-    formFields: {
-      type: Array,
-      default: () => [],
-    },
-    block: Boolean,
-    response: {
-      type: Object,
-      default: () => {
-        return {
-          message: '',
-          error: false,
-          upload_state: 0,
-          response: [],
-          file_name: '',
-        };
-      },
-    },
-    jsonCsv: {
-      type: Object,
-      default: () => {
-        return {
-          data: [],
-          file_name: '',
-        };
-      },
-    },
-  },
-  emits: ['reset-message', 'save-bulk-data', 'set-error', 'toggleBlock'],
-  setup() {
-    const { t, locale } = useI18n({ useScope: 'global' });
+const { locale, t } = useI18n({ useScope: 'global' });
 
-    return { t, locale };
+const properties = defineProps({
+  // The form data
+  form: {
+    type: Object,
+    default: () => {},
   },
-  data() {
-    return {
-      file: undefined,
-      globalError: [],
-      index: 0,
-      Json: [],
-      max: 100,
-      max_file_size: 5,
-      percent: 0,
-      progress: false,
-      timeout: undefined,
-      upload_state: 0,
-      vForm: {},
-    };
+  // The form schema
+  formSchema: {
+    type: Object,
+    default: () => {},
   },
-  computed: {
-    ...mapState(useAppStore, ['config']),
-    ...mapState(useFormStore, ['isRTL']),
-
-    txt_colour() {
-      if (!this.response.error) return 'success-text';
-      else return 'fail-text';
-    },
-    fileSize() {
-      if (this.file.size < 1024) return this.file.size.toFixed(2) + ' bytes';
-      if (this.file.size < 1024 * 1024)
-        return (this.file.size / 1024).toFixed(2) + ' KB';
-      return (this.file.size / (1024 * 1024)).toFixed(2) + ' MB';
-    },
-    fileName() {
-      try {
-        const fs = this.file.name.split('_');
-        return fs[0] + '...' + fs[fs.length - 1];
-      } catch (e) {
-        return this.file.name;
-      }
-    },
+  // The version id to submit to
+  submissionVersion: {
+    type: String,
+    default: null,
   },
-  beforeUnmount() {
-    if (this.timeout) clearTimeout(this.timeout);
+  // This is the provided template
+  jsonCsv: {
+    type: Object,
+    default: () => {},
   },
-  methods: {
-    ...mapActions(useNotificationStore, ['addNotification']),
-    download(filename, data) {
-      if (
-        window.confirm(this.$t('trans.formViewerMultiUpload.confirmDownload'))
-      ) {
-        const blob = new Blob([JSON.stringify(data)], {
-          type: 'application/json',
-        });
-        const link = document.createElement('a');
-        link.href = URL.createObjectURL(blob);
-        link.download = filename;
-        link.click();
-        URL.revokeObjectURL(link.href);
-      }
-    },
+});
 
-    addFile(e, type) {
-      if (this.block) {
-        return;
-      }
+const emit = defineEmits(['isProcessingMultiUpload']);
+
+const appStore = useAppStore();
+const formStore = useFormStore();
+const notificationStore = useNotificationStore();
+
+const { isRTL } = storeToRefs(formStore);
+
+// This timeout is purely used for adding an artificial delay, some systems were having
+// an issue where they were running out of memory. The garbage collection for memory
+// was not happening early/fast enough. This seems to be a good middleground.
+const delayTimeout = ref(null);
+// These are the errors that occur while validating the submissions or the file
+const errors = ref([]);
+// The file to be uploaded
+const file = ref(null);
+// The file input reference
+const fileRef = ref(null);
+// If there is a file currently being processed
+const isProcessing = ref(false);
+// This is the data that is read using the FileReader, this is usually multiple submissions in an array
+const fileReaderData = ref(null);
+const progressBar = ref({
+  modelValue: 0,
+  max: 100,
+  message: '',
+});
+const sbdMessage = ref({
+  message: String,
+  error: Boolean,
+  upload_state: Number,
+  response: [],
+  file_name: String,
+  typeError: Number,
+});
+// This is the index in the list of submissions that are being uploaded
+const submissionIndex = ref(0);
+// This is purely for validating the submission
+const submissionToValidate = ref(null);
+
+const fileSize = computed(() => {
+  if (file.value.size < 1024) return file.value.size.toFixed(2) + ' bytes';
+  if (file.value.size < 1024 * 1024)
+    return (file.value.size / 1024).toFixed(2) + ' KB';
+  return (file.value.size / (1024 * 1024)).toFixed(2) + ' MB';
+});
 
-      if (this.file != undefined) {
-        this.addNotification({
-          text: this.$t('trans.formViewerMultiUpload.uploadMultipleFileErr'),
-          consoleError: this.$t(
-            'trans.formViewerMultiUpload.uploadMultipleFileErr'
-          ),
-        });
-        return;
+const txt_colour = computed(() => {
+  if (!sbdMessage.value.error) return 'success-text';
+  else return 'fail-text';
+});
+
+function download(filename, data) {
+  if (window.confirm(t('trans.formViewerMultiUpload.confirmDownload'))) {
+    const blob = new Blob([JSON.stringify(data)], {
+      type: 'application/json',
+    });
+    const link = document.createElement('a');
+    link.href = URL.createObjectURL(blob);
+    link.download = filename;
+    link.click();
+    URL.revokeObjectURL(link.href);
+  }
+}
+
+function addFile(e, type) {
+  if (isProcessing.value) return;
+
+  if (file.value != undefined) {
+    notificationStore.addNotification({
+      text: t('trans.formViewerMultiUpload.uploadMultipleFileErr'),
+      consoleError: t('trans.formViewerMultiUpload.uploadMultipleFileErr'),
+    });
+    return;
+  }
+  try {
+    let files = type == 0 ? e.dataTransfer.files : e.target.files;
+
+    if (!files || files == undefined) return;
+
+    if (files.length > 1) {
+      notificationStore.addNotification({
+        text: t('trans.formViewerMultiUpload.dragMultipleFileErr'),
+        consoleError: t('trans.formViewerMultiUpload.dragMultipleFileErr'),
+      });
+      return;
+    }
+
+    if (files[0]['type'] != 'application/json') {
+      notificationStore.addNotification({
+        text: t('trans.formViewerMultiUpload.fileFormatErr'),
+        consoleError: t('trans.formViewerMultiUpload.fileFormatErr'),
+      });
+      return;
+    }
+    if (files[0].size > appStore.config.uploads.fileMaxSizeBytes) {
+      notificationStore.addNotification({
+        text: t('trans.formViewerMultiUpload.fileSizeErr'),
+        consoleError: t('trans.formViewerMultiUpload.fileSizeErr'),
+      });
+      return;
+    }
+    file.value = files[0];
+    parseFile();
+  } catch (error) {
+    notificationStore.addNotification({
+      text: t('trans.formViewerMultiUpload.errorWhileValidate'),
+      consoleError:
+        t('trans.formViewerMultiUpload.errorWhileValidate') + `${error}`,
+    });
+    return;
+  }
+}
+
+function handleFile() {
+  if (file.value == undefined) {
+    fileRef.value.click();
+  }
+}
+
+function parseFile() {
+  try {
+    let reader = new FileReader();
+    reader.onload = (e) => {
+      // The file MUST be JSON. If it fails to parse then it will throw an error.
+      fileReaderData.value = popFormLevelInfo(JSON.parse(e.target.result));
+    };
+    reader.onloadend = preValidateSubmission;
+    reader.readAsText(file.value);
+  } catch (e) {
+    resetUploadState();
+    notificationStore.addNotification({
+      text: t('trans.formViewerMultiUpload.parseJsonErr'),
+      consoleError: e,
+    });
+  }
+}
+
+function popFormLevelInfo(jsonPayload = []) {
+  /** This function is purely made to remove un-necessery information
+   * from the json payload of submissions. It will also help to remove crucial data
+   * to be removed from the payload that should not be going to DB like confirmationId,
+   * formName,version,createdAt,fullName,username,email,status,assignee,assigneeEmail and
+   * lateEntry
+   * Example: Sometime end user use the export json file as a bulk
+   * upload payload that contains formId, confirmationId and User
+   * details as well so we need to remove those details from the payload.
+   *
+   */
+  if (jsonPayload.length) {
+    jsonPayload.forEach(function (submission) {
+      delete submission.submit;
+      delete submission.lateEntry;
+      if (Object.prototype.hasOwnProperty.call(submission, 'form')) {
+        const propsToRemove = [
+          'confirmationId',
+          'formName',
+          'version',
+          'createdAt',
+          'fullName',
+          'username',
+          'email',
+          'status',
+          'assignee',
+          'assigneeEmail',
+        ];
+        propsToRemove.forEach((key) => delete submission.form[key]);
       }
-      try {
-        let files = type == 0 ? e.dataTransfer.files : e.target.files;
+    });
+  }
+  return jsonPayload;
+}
 
-        if (!files || files == undefined) return;
+async function preValidateSubmission() {
+  try {
+    if (!Array.isArray(fileReaderData.value)) {
+      resetUploadState();
+      notificationStore.addNotification({
+        text: t('trans.formViewerMultiUpload.jsonObjNotArray'),
+        consoleError: t('trans.formViewerMultiUpload.jsonObjNotArrayConsErr'),
+      });
+      return;
+    }
+    if (fileReaderData.value.length == 0) {
+      resetUploadState();
+      notificationStore.addNotification({
+        text: t('trans.formViewerMultiUpload.jsonArrayEmpty'),
+        consoleError: t('trans.formViewerMultiUpload.fileIsEmpty'),
+      });
+      return;
+    }
+    errors.value = [];
+    submissionIndex.value = 0;
+    isProcessing.value = true;
+    emit('isProcessingMultiUpload', true);
+    const formHtml = document.getElementById('validateForm');
+    //Add custom validation to the Components those are not covered by FormIO Validation class
+    await Utils.eachComponent(
+      properties.formSchema.components,
+      function (component) {
+        //Need to cover Validation parts those are not performed by FormIO validate funciton
+        switch (component.type) {
+          case 'number':
+            component.validate.custom =
+              "if(component.validate.required === true || input){valid = _.isNumber(input) ? true : 'Only numbers are allowed in a number field.';}" +
+              component.validate.custom;
+            break;
 
-        if (files.length > 1) {
-          this.addNotification({
-            text: this.$t('trans.formViewerMultiUpload.dragMultipleFileErr'),
-            consoleError: this.$t(
-              'trans.formViewerMultiUpload.dragMultipleFileErr'
-            ),
-          });
-          return;
-        }
+          case 'simplenumber':
+            component.validate.custom =
+              "if(component.validate.required === true || input){valid = _.isNumber(input) ? true : 'Only numbers are allowed in a simple number field.';}" +
+              component.validate.custom;
+            break;
 
-        if (files[0]['type'] != 'application/json') {
-          this.addNotification({
-            text: this.$t('trans.formViewerMultiUpload.fileFormatErr'),
-            consoleError: this.$t('trans.formViewerMultiUpload.fileFormatErr'),
-          });
-          return;
-        }
-        if (files[0].size > this.config.uploads.fileMaxSizeBytes) {
-          this.addNotification({
-            text: this.$t('trans.formViewerMultiUpload.fileSizeErr'),
-            consoleError: this.$t('trans.formViewerMultiUpload.fileSizeErr'),
-          });
-          return;
+          case 'simplenumberadvanced':
+            component.validate.custom =
+              "if(component.validate.required === true || input){valid = _.isNumber(input) ? true : 'Only numbers are allowed in a simple number advanced field.';}" +
+              component.validate.custom;
+            break;
+
+          case 'simpledatetimeadvanced':
+            component.validate.custom =
+              "if(component.validate.required === true || input){valid = moment(input, _.replace('" +
+              component.widget.format +
+              "','dd','DD'), true).isValid() === true ? true : 'Wrong DateTime format.';}" +
+              component.validate.custom;
+            break;
+
+          case 'simpledatetime':
+            component.validate.custom =
+              "if(component.validate.required === true || input){valid = moment(input, _.replace('" +
+              component.widget.format +
+              "','dd','DD'), true).isValid() === true ? true : 'Wrong Date/Time format.';}" +
+              component.validate.custom;
+            break;
+
+          case 'simpletimeadvanced':
+            component.validate.custom =
+              "if(component.validate.required === true || input){valid = moment(input, _.replace('" +
+              component.widget.format +
+              "','dd','DD'), true).isValid() === true ? true : 'Wrong Time format.';}" +
+              component.validate.custom;
+            break;
+
+          default:
+            break;
         }
-        this.file = files[0];
-        this.parseFile();
-      } catch (error) {
-        this.addNotification({
-          text: this.$t('trans.formViewerMultiUpload.dragMultipleFileErr'),
-          consoleError:
-            this.$t('trans.formViewerMultiUpload.dragMultipleFileErr') +
-            `${error}`,
-        });
-        return;
       }
-    },
-    handleFile() {
-      if (this.file == undefined) {
-        this.$refs.fileRef.click();
+    );
+    submissionToValidate.value = await Formio.createForm(
+      formHtml,
+      properties.formSchema,
+      {
+        highlightErrors: true,
+        alwaysDirty: true,
+        hide: {
+          submit: true,
+        },
       }
-    },
-    removeFile(file) {
-      this.files = this.files.filter((f) => {
-        return f != file;
+    );
+    // In the next tick, we begin validating the submission
+    nextTick(() => {
+      validate(fileReaderData.value[submissionIndex.value], []);
+    });
+  } catch (error) {
+    resetUploadState();
+    notificationStore.addNotification({
+      text: t('trans.formViewerMultiUpload.errorWhileValidate'),
+      consoleError: error,
+    });
+    return;
+  }
+}
+
+async function getMemoryInfo() {
+  return new Promise((resolve) => {
+    if (window.performance && window.performance.memory) {
+      resolve(
+        (
+          (window.performance.memory.usedJSHeapSize * 100) /
+          window.performance.memory.jsHeapSizeLimit
+        ).toFixed(0)
+      );
+    }
+    resolve(undefined);
+  });
+}
+
+async function checkMemoryUsage() {
+  let time = 1000;
+  const memoryUsage = await getMemoryInfo();
+  if (memoryUsage != undefined) {
+    if (memoryUsage <= 50) {
+      time = 50;
+    } else if (memoryUsage > 50 || memoryUsage < 70) {
+      time = 1000;
+    } else if (memoryUsage > 70 || memoryUsage < 80) {
+      time = 2000;
+    } else if (memoryUsage > 80) {
+      time = 3000;
+    }
+  }
+  return time;
+}
+
+function convertEmptyArraysToNull(obj) {
+  /*
+   * This function is purely made to solve this https://github.com/formio/formio.js/issues/4515 formio bug
+   * where setSubmission mislead payload for submission. In our case if setSubmission got triggered multiple
+   * time it cache submission key's with old values that leads to trigger false validation errors.
+   * This function clear object with some empty arrays to null. Main problem was occured to columns and grids components.
+   */
+
+  if (_.isArray(obj)) {
+    return obj.length === 0 ? null : obj.map(convertEmptyArraysToNull);
+  } else if (_.isObject(obj)) {
+    return _.mapValues(obj, convertEmptyArraysToNull);
+  } else {
+    return obj;
+  }
+}
+
+async function validate(element, errors) {
+  await delay(500);
+  //this.checkMemoryUsage();
+  formIOValidation(element).then((response) => {
+    if (response.error) {
+      errors[submissionIndex.value] = {
+        submission: submissionIndex.value,
+        errors: response.data,
+      };
+    }
+    delete response.error;
+    delete response.data;
+    submissionToValidate.value.setSubmission({
+      data: undefined,
+    });
+    validationDispatcher(errors);
+  });
+}
+
+async function validationDispatcher(errors) {
+  /* we need this timer allow to the gargabe colector to have time
+    to clean the memory before starting  a new form validation */
+
+  submissionToValidate.value.clearServerErrors();
+  submissionToValidate.value.resetValue();
+  submissionToValidate.value.clear();
+  const response = await checkMemoryUsage();
+
+  await delay(response);
+  const check = {
+    shouldContinueValidation:
+      Number(submissionIndex.value) < Number(fileReaderData.value.length - 1), //Need to compare with JSON length - 1 because we only need to perform validation upto the last instance/object of Json array.
+  };
+  if (check.shouldContinueValidation) {
+    nextTick(() => {
+      submissionIndex.value++;
+      progressBar.value.percent = percentage(submissionIndex.value);
+    });
+    delete check.shouldContinueValidation;
+    nextTick(() => {
+      validate(fileReaderData.value[submissionIndex.value], errors);
+    });
+  } else {
+    nextTick(() => {
+      submissionIndex.value++;
+      progressBar.value.percent = percentage(submissionIndex.value);
+    });
+    endValidation(errors);
+  }
+}
+
+async function formIOValidation(element) {
+  return new Promise((resolve) => {
+    submissionToValidate.value.setSubmission({
+      data: convertEmptyArraysToNull(element),
+    });
+    submissionToValidate.value
+      .submit()
+      .then((submission) => {
+        resolve({ error: false, data: submission });
+      })
+      .catch((error) => {
+        resolve({ error: true, data: error });
       });
-    },
-
-    parseFile() {
-      try {
-        let reader = new FileReader();
-        reader.onload = (e) => {
-          this.Json = this.popFormLevelInfo(JSON.parse(e.target.result));
-        };
-        reader.onloadend = this.preValidateSubmission;
-        reader.readAsText(this.file);
-      } catch (e) {
-        this.resetUpload();
-        this.addNotification({
-          text: this.$t('trans.formViewerMultiUpload.parseJsonErr'),
-          consoleError: e,
-        });
-      }
-    },
-    popFormLevelInfo(jsonPayload = []) {
-      /** This function is purely made to remove un-necessery information
-       * from the json payload of submissions. It will also help to remove crucial data
-       * to be removed from the payload that should not be going to DB like confirmationId,
-       * formName,version,createdAt,fullName,username,email,status,assignee,assigneeEmail and
-       * lateEntry
-       * Example: Sometime end user use the export json file as a bulk
-       * upload payload that contains formId, confirmationId and User
-       * details as well so we need to remove those details from the payload.
-       *
-       */
-      if (jsonPayload.length) {
-        jsonPayload.forEach(function (submission) {
-          delete submission.submit;
-          delete submission.lateEntry;
-          if (Object.prototype.hasOwnProperty.call(submission, 'form')) {
-            const propsToRemove = [
-              'confirmationId',
-              'formName',
-              'version',
-              'createdAt',
-              'fullName',
-              'username',
-              'email',
-              'status',
-              'assignee',
-              'assigneeEmail',
-            ];
-            propsToRemove.forEach((key) => delete submission.form[key]);
+  });
+}
+
+function delay(ms) {
+  return new Promise((resolve) => {
+    delayTimeout.value = setTimeout(() => {
+      clearTimeout(delayTimeout.value);
+      resolve();
+    }, ms);
+  });
+}
+
+function percentage(i) {
+  let number_of_submission = fileReaderData.value.length;
+  if (number_of_submission > 0 && i > 0) {
+    return Math.ceil((i * progressBar.value.max) / number_of_submission);
+  }
+  return 0;
+}
+
+async function endValidation(errs) {
+  errors.value = errs;
+  isProcessing.value = false;
+  submissionToValidate.value.destroy();
+  submissionToValidate.value = null;
+  if (errors.value.length == 0) {
+    await saveBulkData(fileReaderData.value);
+    console.log('we should be emitting save-bulk-data now');
+  } else {
+    emit('isProcessingMultiUpload', false);
+    console.log('we should be emitting set-error now');
+    setError({
+      text: t('trans.formViewerMultiUpload.errAfterValidate'),
+      error: true,
+      upload_state: 10,
+      response: {
+        data: {
+          title: 'Validation Error',
+          reports: errors.value,
+        },
+      },
+      typeError: 0,
+    });
+  }
+}
+
+function resetUploadState() {
+  errors.value = [];
+  isProcessing.value = false;
+  file.value = undefined;
+  submissionIndex.value = 0;
+  progressBar.value = {
+    percent: 0,
+    message: '',
+  };
+}
+
+async function saveBulkData(submissions) {
+  const payload = {
+    draft: true,
+    submission: Object.freeze({ data: submissions }),
+  };
+  sendMultiSubmissionData(payload);
+}
+
+async function sendMultiSubmissionData(body) {
+  try {
+    isProcessing.value = true;
+    let response = await formService.createMultiSubmission(
+      properties.form.id,
+      properties.submissionVersion,
+      body
+    );
+    if ([200, 201].includes(response.status)) {
+      // all is good, flag no errors and carry on...
+      // store our submission result...
+      sbdMessage.value.message = t('trans.formViewer.multiDraftUploadSuccess');
+      sbdMessage.value.error = false;
+      sbdMessage.value.upload_state = 10;
+      sbdMessage.value.response = [];
+      notificationStore.addNotification({
+        text: sbdMessage.value.message,
+        ...NotificationTypes.SUCCESS,
+      });
+    } else {
+      sbdMessage.value.message = t('trans.formViewer.failedResSubmissn', {
+        status: response.status,
+      });
+      sbdMessage.value.error = true;
+      sbdMessage.value.upload_state = 10;
+      sbdMessage.value.response = [
+        { error_message: t('trans.formViewer.errSubmittingForm') },
+      ];
+      sbdMessage.value.file_name =
+        'error_report_' + properties.form.name + '_' + Date.now();
+      throw new Error(
+        t('trans.formViewer.failedResSubmissn', {
+          status: response.status,
+        })
+      );
+    }
+  } catch (error) {
+    setFinalError(error);
+    notificationStore.addNotification({
+      text: sbdMessage.value.message,
+      consoleError: t('trans.formViewer.errorSavingFile', {
+        fileName: file.value.name,
+        error: error,
+      }),
+    });
+  } finally {
+    isProcessing.value = false;
+  }
+}
+
+async function setFinalError(error) {
+  try {
+    if (error.response.data != undefined) {
+      sbdMessage.value.message =
+        error.response.data.title == undefined
+          ? t('trans.formViewer.errSubmittingForm')
+          : error.response.data.title;
+      sbdMessage.value.response =
+        error.response.data.reports == undefined
+          ? [
+              {
+                error_message: t('trans.formViewer.errSubmittingForm'),
+              },
+            ]
+          : await formatResponse(error.response.data.reports);
+    } else {
+      sbdMessage.value.message = t('trans.formViewer.errSubmittingForm');
+      sbdMessage.value.response = [
+        { error_message: t('trans.formViewer.errSubmittingForm') },
+      ];
+    }
+  } catch (error_2) {
+    sbdMessage.value.message = t('trans.formViewer.errSubmittingForm');
+    sbdMessage.value.response = [
+      { error_message: t('trans.formViewer.errSubmittingForm') },
+    ];
+  } finally {
+    sbdMessage.value.error = true;
+    sbdMessage.value.upload_state = 10;
+    sbdMessage.value.file_name =
+      'error_report_' + properties.form.name + '_' + Date.now();
+  }
+}
+
+function buildValidationFromComponent(obj) {
+  if (obj?.component?.validate) {
+    let validatorIdentity = '';
+    Object.keys(obj.component.validate).forEach((validity) => {
+      switch (validity) {
+        case 'maxSelectedCount':
+          if (obj.component.validate.maxSelectedCount) {
+            validatorIdentity +=
+              '|maxSelectedCount:' + obj.component.validate[validity];
           }
-        });
-      }
-      return jsonPayload;
-    },
-    async preValidateSubmission() {
-      try {
-        if (!Array.isArray(this.Json)) {
-          this.resetUpload();
-          this.addNotification({
-            text: this.$t('trans.formViewerMultiUpload.jsonObjNotArray'),
-            consoleError: this.$t(
-              'trans.formViewerMultiUpload.jsonObjNotArrayConsErr'
-            ),
-          });
-          return;
-        }
-        if (this.Json.length == 0) {
-          this.resetUpload();
-          this.addNotification({
-            text: this.$t('trans.formViewerMultiUpload.jsonArrayEmpty'),
-            consoleError: this.$t('trans.formViewerMultiUpload.fileIsEmpty'),
-          });
-          return;
-        }
-        this.globalError = [];
-        this.index = 0;
-        this.max = 100;
-        this.progress = true;
-        this.$emit('toggleBlock', true);
-        const formHtml = document.getElementById('validateForm');
-        //Add custom validation to the Components those are not covered by FormIO Validation class
-        await Utils.eachComponent(
-          this.formSchema.components,
-          function (component) {
-            //Need to cover Validation parts those are not performed by FormIO validate funciton
-            switch (component.type) {
-              case 'number':
-                component.validate.custom =
-                  "if(component.validate.required === true || input){valid = _.isNumber(input) ? true : 'Only numbers are allowed in a number field.';}" +
-                  component.validate.custom;
-                break;
-
-              case 'simplenumber':
-                component.validate.custom =
-                  "if(component.validate.required === true || input){valid = _.isNumber(input) ? true : 'Only numbers are allowed in a simple number field.';}" +
-                  component.validate.custom;
-                break;
-
-              case 'simplenumberadvanced':
-                component.validate.custom =
-                  "if(component.validate.required === true || input){valid = _.isNumber(input) ? true : 'Only numbers are allowed in a simple number advanced field.';}" +
-                  component.validate.custom;
-                break;
-
-              case 'simpledatetimeadvanced':
-                component.validate.custom =
-                  "if(component.validate.required === true || input){valid = moment(input, _.replace('" +
-                  component.widget.format +
-                  "','dd','DD'), true).isValid() === true ? true : 'Wrong DateTime format.';}" +
-                  component.validate.custom;
-                break;
-
-              case 'simpledatetime':
-                component.validate.custom =
-                  "if(component.validate.required === true || input){valid = moment(input, _.replace('" +
-                  component.widget.format +
-                  "','dd','DD'), true).isValid() === true ? true : 'Wrong Date/Time format.';}" +
-                  component.validate.custom;
-                break;
-
-              case 'simpletimeadvanced':
-                component.validate.custom =
-                  "if(component.validate.required === true || input){valid = moment(input, _.replace('" +
-                  component.widget.format +
-                  "','dd','DD'), true).isValid() === true ? true : 'Wrong Time format.';}" +
-                  component.validate.custom;
-                break;
-
-              default:
-                break;
-            }
+          break;
+
+        case 'minSelectedCount':
+          if (obj.component.validate.minSelectedCount) {
+            validatorIdentity +=
+              '|minSelectedCount:' + obj.component.validate[validity];
           }
-        );
-        this.vForm = await Formio.createForm(formHtml, this.formSchema, {
-          highlightErrors: true,
-          alwaysDirty: true,
-          hide: {
-            submit: true,
-          },
-        });
-        this.$nextTick(() => {
-          this.validate(this.Json[this.index], []);
-        });
-      } catch (error) {
-        this.resetUpload();
-        this.$emit('set-error', {
-          error: true,
-          text: this.$t('trans.formViewerMultiUpload.errorWhileValidate'),
-        });
-        this.addNotification({
-          text: this.$t('trans.formViewerMultiUpload.errorWhileValidate'),
-          consoleError: error,
-        });
-        return;
-      }
-    },
-    async getMemoryInfo() {
-      return new Promise((resolve) => {
-        if (window.performance && window.performance.memory) {
-          resolve(
-            (
-              (window.performance.memory.usedJSHeapSize * 100) /
-              window.performance.memory.jsHeapSizeLimit
-            ).toFixed(0)
-          );
-        }
-        resolve(undefined);
-      });
-    },
-    async checkMemoryUsage() {
-      let time = 1000;
-      const memoryUsage = await this.getMemoryInfo();
-      if (memoryUsage != undefined) {
-        if (memoryUsage <= 50) {
-          time = 50;
-        } else if (memoryUsage > 50 || memoryUsage < 70) {
-          time = 1000;
-        } else if (memoryUsage > 70 || memoryUsage < 80) {
-          time = 2000;
-        } else if (memoryUsage > 80) {
-          time = 3000;
-        }
-      }
-      return time;
-    },
-    convertEmptyArraysToNull(obj) {
-      /*
-       * This function is purely made to solve this https://github.com/formio/formio.js/issues/4515 formio bug
-       * where setSubmission mislead payload for submission. In our case if setSubmission got triggered multiple
-       * time it cache submission key's with old values that leads to trigger false validation errors.
-       * This function clear object with some empty arrays to null. Main problem was occured to columns and grids components.
-       */
-
-      if (_.isArray(obj)) {
-        return obj.length === 0 ? null : obj.map(this.convertEmptyArraysToNull);
-      } else if (_.isObject(obj)) {
-        return _.mapValues(obj, this.convertEmptyArraysToNull);
-      } else {
-        return obj;
+          break;
+
+        case 'multiple':
+          if (obj.component.validate.multiple) {
+            validatorIdentity +=
+              '|multiple:' + obj.component.validate[validity];
+          }
+          break;
+
+        case 'onlyAvailableItems':
+          if (obj.component.validate.onlyAvailableItems) {
+            validatorIdentity +=
+              '|onlyAvailableItems:' + obj.component.validate[validity];
+          }
+          break;
+
+        case 'required':
+          if (obj.component.validate.required) {
+            validatorIdentity +=
+              '|required:' + obj.component.validate[validity];
+          }
+          break;
+
+        case 'strictDateValidation':
+          if (obj.component.validate.strictDateValidation) {
+            validatorIdentity +=
+              '|strictDateValidation:' + obj.component.validate[validity];
+          }
+          break;
+
+        case 'unique':
+          if (obj.component.validate.unique) {
+            validatorIdentity += '|unique:' + obj.component.validate[validity];
+          }
+          break;
+
+        case 'custom':
+          if (obj.component.validate.custom.length) {
+            validatorIdentity +=
+              '|custom:' +
+              obj.component.validate[validity].trim().replaceAll(',', '‚');
+          }
+          break;
+
+        case 'customMessage':
+          if (obj.component.validate.customMessage) {
+            validatorIdentity +=
+              '|customMessage:' +
+              obj.component.validate[validity].trim().replaceAll(',', '‚');
+          }
+          break;
+
+        case 'customPrivate':
+          if (obj.component.validate.customPrivate) {
+            validatorIdentity +=
+              '|customPrivate:' + obj.component.validate[validity].trim();
+          }
+          break;
+
+        case 'json':
+          if (obj.component.validate.json) {
+            validatorIdentity += '|json:' + obj.component.validate[validity];
+          }
+          break;
+
+        case 'pattern':
+          if (obj.component.validate.pattern) {
+            validatorIdentity += '|pattern:' + obj.component.validate[validity];
+          }
+          break;
+
+        case 'maxWords':
+          if (obj.component.validate.maxWords) {
+            validatorIdentity +=
+              '|maxWords:' + obj.component.validate[validity];
+          }
+          break;
+
+        case 'minWords':
+          if (obj.component.validate.minWords) {
+            validatorIdentity +=
+              '|minWords:' + obj.component.validate[validity];
+          }
+          break;
+
+        case 'maxLength':
+          if (obj.component.validate.maxLength) {
+            validatorIdentity +=
+              '|maxLength:' + obj.component.validate[validity];
+          }
+          break;
+
+        case 'minLength':
+          if (obj.component.validate.minLength) {
+            validatorIdentity +=
+              '|minLength:' + obj.component.validate[validity];
+          }
+          break;
+
+        default:
+          validatorIdentity +=
+            '|' + validity + ':' + obj.component.validate[validity];
+          break;
       }
-    },
-    async validate(element, errors) {
-      await this.delay(500);
-      //this.checkMemoryUsage();
-      this.formIOValidation(element).then((response) => {
-        if (response.error) {
-          errors[this.index] = {
-            submission: this.index,
-            errors: response.data,
+    });
+    return validatorIdentity.replace(/^\|/, '');
+  } else if (obj?.messages[0]?.context?.validator) {
+    return obj.messages[0].context.validator;
+  } else {
+    return 'Unknown';
+  }
+}
+
+async function frontendFormatResponse(response) {
+  let newResponse = [];
+
+  for (const item of response) {
+    if (item != null && item != undefined) {
+      for (const obj of item.errors) {
+        let error = {};
+
+        if (obj.component != undefined) {
+          error = {
+            submission: item.submission,
+            key: obj.component.key,
+            label: obj.component.label,
+            validator: buildValidationFromComponent(obj),
+            error_message: obj.message,
+          };
+        } else {
+          error = {
+            submission: item.submission,
+            key: null,
+            label: null,
+            validator: null,
+            error_message: obj.message,
           };
         }
-        delete response.error;
-        delete response.data;
-        this.vForm.setSubmission({
-          data: undefined,
-        });
-        this.validationDispatcher(errors);
-      });
-    },
-    async validationDispatcher(errors) {
-      /* we need this timer allow to the gargabe colector to have time
-       to clean the memory before starting  a new form validation */
-
-      this.vForm.clearServerErrors();
-      this.vForm.resetValue();
-      this.vForm.clear();
-      const response = await this.checkMemoryUsage();
-
-      await this.delay(response);
-      // if (!response) {
-      const check = {
-        shouldContinueValidation:
-          Number(this.index) < Number(this.Json.length - 1), //Need to compare with JSON length - 1 because we only need to perform validation upto the last instance/object of Json array.
-      };
-      if (check.shouldContinueValidation) {
-        this.$nextTick(() => {
-          this.index++;
-          this.percent = this.percentage(this.index);
-        });
-        delete check.shouldContinueValidation;
-        this.$nextTick(() => {
-          this.validate(this.Json[this.index], errors);
-        });
-      } else {
-        this.$nextTick(() => {
-          this.index++;
-          this.value = this.percentage(this.index);
-        });
-        this.endValidation(errors);
+
+        newResponse.push(error);
       }
-    },
-    async formIOValidation(element) {
-      return new Promise((resolve) => {
-        this.vForm.setSubmission({
-          data: this.convertEmptyArraysToNull(element),
-        });
-        this.vForm
-          .submit()
-          .then((submission) => {
-            resolve({ error: false, data: submission });
-          })
-          .catch((error) => {
-            resolve({ error: true, data: error });
+    }
+  }
+
+  return newResponse;
+}
+
+async function formatResponse(response) {
+  let newResponse = [];
+  await response.forEach((item, index) => {
+    if (item != null && item != undefined) {
+      item.details.forEach((obj) => {
+        let error = {};
+        if (obj.context != undefined) {
+          error = Object({
+            submission: index,
+            key: obj.context.key,
+            label: obj.context.label,
+            validator: obj.context.validator,
+            error_message: obj.message,
           });
+        } else {
+          error = Object({
+            submission: index,
+            key: null,
+            label: null,
+            validator: null,
+            error_message: obj.message,
+          });
+        }
+        newResponse.push(error);
       });
-    },
-    delay(ms) {
-      return new Promise((resolve) => {
-        this.timeout = setTimeout(() => {
-          clearTimeout(this.timeout);
-          resolve();
-        }, ms);
-      });
-    },
+    }
+  });
+  return newResponse;
+}
 
-    percentage(i) {
-      let number_of_submission = this.Json.length;
-      if (number_of_submission > 0 && i > 0) {
-        return Math.ceil((i * this.max) / number_of_submission);
-      }
-      return 0;
-    },
-
-    endValidation(errors) {
-      this.progress = false;
-      this.globalError = errors;
-      this.vForm.destroy();
-      this.vForm = null;
-      if (this.globalError.length == 0) {
-        this.$emit('save-bulk-data', this.Json);
-      } else {
-        this.$emit('toggleBlock', false);
-        this.$emit('set-error', {
-          text: this.$t('trans.formViewerMultiUpload.errAfterValidate'),
-          error: true,
-          upload_state: 10,
-          response: {
-            data: {
-              title: 'Validation Error',
-              reports: this.globalError,
-            },
-          },
-          typeError: 0,
-        });
-      }
-    },
-
-    resetUpload() {
-      this.globalError = [];
-      this.file = undefined;
-      this.Json = [];
-      this.percent = 0;
-      this.upload_state = 0;
-      this.index = 0;
-      this.globalError = [];
-      this.progress = false;
-      this.$emit('reset-message');
-    },
-  },
-};
+async function setError(error) {
+  sbdMessage.value = error;
+
+  try {
+    if (error.response.data != undefined) {
+      sbdMessage.value.message =
+        error.response.data.title == undefined
+          ? 'An error occurred submitting this form'
+          : error.response.data.title;
+      sbdMessage.value.error = true;
+      sbdMessage.value.upload_state = 10;
+      sbdMessage.value.response =
+        error.response.data.reports == undefined
+          ? [{ error_message: 'An error occurred submitting this form' }]
+          : await frontendFormatResponse(error.response.data.reports);
+      sbdMessage.value.file_name =
+        'error_report_' + properties.form.name + '_' + Date.now();
+    } else {
+      sbdMessage.value.message = 'An error occurred submitting this form';
+      sbdMessage.value.error = true;
+      sbdMessage.value.upload_state = 10;
+      sbdMessage.value.response = [
+        { error_message: 'An error occurred submitting this form' },
+      ];
+      sbdMessage.value.file_name =
+        'error_report_' + properties.form.name + '_' + Date.now();
+    }
+  } catch (error_2) {
+    sbdMessage.value.message = 'An error occurred submitting this form';
+    sbdMessage.value.error = true;
+    sbdMessage.value.upload_state = 10;
+    sbdMessage.value.response = [
+      { error_message: 'An error occurred submitting this form' },
+    ];
+    sbdMessage.value.file_name =
+      'error_report_' + properties.form.name + '_' + Date.now();
+  }
+}
 </script>
 
 <template>
@@ -517,8 +825,8 @@ export default {
               :lang="locale"
               @click="
                 download(
-                  jsonCsv.file_name,
-                  jsonCsv.data,
+                  multiuploadTemplateFilename(form.name),
+                  jsonCsv,
                   $t('trans.formViewerMultiUpload.confirmDownload')
                 )
               "
@@ -561,10 +869,10 @@ export default {
         >
         </v-file-input>
       </div>
-      <div v-if="file" class="worker-zone">
+      <div v-else class="worker-zone">
         <div class="wz-top">
           <v-progress-linear
-            v-model="percent"
+            v-model="progressBar.percent"
             class="loading"
             rounded
             height="15"
@@ -578,85 +886,89 @@ export default {
               <label class="label-left">{{ file.name }}</label>
               <label class="label-right">
                 {{ fileSize }}
-                <p v-if="index > 0 && Json.length > 0">
-                  {{ index + '/' + Json.length }}
+                <p v-if="submissionIndex > 0 && fileReaderData.length > 0">
+                  {{ submissionIndex + '/' + fileReaderData.length }}
                 </p>
               </label>
             </v-col>
           </v-row>
-        </div>
-        <v-row class="p-1">
-          <v-col
-            v-if="!progress && response.upload_state == 10"
-            cols="12"
-            md="12"
-            class="message-block"
-          >
-            <hr v-if="response.error" />
-            <span>Report: </span>
-            <p :class="txt_colour">
-              <v-icon v-if="response.error" color="red" icon="mdi:mdi-close" />
-              <v-icon
-                v-if="!response.error"
-                color="green"
-                icon="mdi:mdi-check"
-              />
-              {{ response.message }}
-            </p>
-          </v-col>
-          <v-col cols="12" md="12">
-            <p
-              v-if="response.error && response.response.length > 0"
-              style="text-align: justify; line-height: 1.2"
-              :lang="locale"
+          <v-row class="p-1">
+            <v-col
+              v-if="!isProcessing && sbdMessage.upload_state == 10"
+              cols="12"
+              md="12"
+              class="message-block"
             >
-              {{ $t('trans.formViewerMultiUpload.downloadDraftSubmns') }}
-              <br />
-              <span class="link">
-                <a
-                  :lang="locale"
-                  @click="
-                    download(
-                      response.file_name,
-                      response.response,
-                      $t('trans.formViewerMultiUpload.doYouWantToDownload')
-                    )
-                  "
-                >
-                  {{ $t('trans.formViewerMultiUpload.downloadReport') }}</a
-                >
+              <hr v-if="sbdMessage.error" />
+              <span>Report: </span>
+              <p :class="txt_colour">
                 <v-icon
-                  class="mr-1"
-                  color="#003366"
-                  icon="mdi:mdi-download"
-                ></v-icon>
-              </span>
-            </p>
-          </v-col>
-          <v-col
-            v-if="
-              file &&
-              !progress &&
-              response.error &&
-              response.response.length > 0
-            "
-            cols="12"
-            md="12"
-          >
-            <span class="m-1 pull-right">
-              <v-btn
-                color="primary"
-                :title="$t('trans.formViewerMultiUpload.uploadNewFile')"
-                @click="resetUpload"
+                  v-if="sbdMessage.error"
+                  color="red"
+                  icon="mdi:mdi-close"
+                />
+                <v-icon
+                  v-if="!sbdMessage.error"
+                  color="green"
+                  icon="mdi:mdi-check"
+                />
+                {{ sbdMessage.message }}
+              </p>
+            </v-col>
+            <v-col cols="12" md="12">
+              <p
+                v-if="sbdMessage.error && sbdMessage.response.length > 0"
+                style="text-align: justify; line-height: 1.2"
+                :lang="locale"
               >
-                <span :lang="locale">{{
-                  $t('trans.formViewerMultiUpload.uploadNewFile')
-                }}</span>
-              </v-btn>
-            </span>
-          </v-col>
-        </v-row>
-        <v-row id="validateForm" class="displayNone"></v-row>
+                {{ $t('trans.formViewerMultiUpload.downloadDraftSubmns') }}
+                <br />
+                <span class="link">
+                  <a
+                    :lang="locale"
+                    @click="
+                      download(
+                        sbdMessage.file_name,
+                        sbdMessage.response,
+                        $t('trans.formViewerMultiUpload.doYouWantToDownload')
+                      )
+                    "
+                  >
+                    {{ $t('trans.formViewerMultiUpload.downloadReport') }}</a
+                  >
+                  <v-icon
+                    class="mr-1"
+                    color="#003366"
+                    icon="mdi:mdi-download"
+                  ></v-icon>
+                </span>
+              </p>
+            </v-col>
+            <v-col
+              v-if="
+                file &&
+                !isProcessing &&
+                sbdMessage.error &&
+                sbdMessage.response.length > 0
+              "
+              cols="12"
+              md="12"
+            >
+              <span class="m-1 pull-right">
+                <v-btn
+                  color="primary"
+                  :title="$t('trans.formViewerMultiUpload.uploadNewFile')"
+                  @click="resetUploadState"
+                >
+                  <span :lang="locale">{{
+                    $t('trans.formViewerMultiUpload.uploadNewFile')
+                  }}</span>
+                </v-btn>
+              </span>
+            </v-col>
+          </v-row>
+          <v-row id="validateForm" class="displayNone"></v-row>
+        </div>
       </div>
     </v-container>
   </div>
diff --git a/app/frontend/src/utils/transformUtils.js b/app/frontend/src/utils/transformUtils.js
index ebbb247c4..8ea18c377 100644
--- a/app/frontend/src/utils/transformUtils.js
+++ b/app/frontend/src/utils/transformUtils.js
@@ -231,3 +231,7 @@ export function fileToBase64(file) {
     reader.onerror = (error) => reject(error);
   });
 }
+
+export function multiuploadTemplateFilename(name, date = Date.now()) {
+  return `template_${name.replace(/\s/g, '_').toLowerCase()}_${date}`;
+}
diff --git a/app/frontend/tests/unit/components/designer/FormViewer.spec.js b/app/frontend/tests/unit/components/designer/FormViewer.spec.js
index b1bc4b02c..249c6ebae 100644
--- a/app/frontend/tests/unit/components/designer/FormViewer.spec.js
+++ b/app/frontend/tests/unit/components/designer/FormViewer.spec.js
@@ -820,7 +820,7 @@ describe('FormViewer.vue', () => {
     expect(addNotificationSpy).toBeCalledTimes(0);
   });
 
-  it('toggleBlock will set the block variable to true or false', async () => {
+  it('isProcessingMultiUpload will set the block variable to true or false', async () => {
     const wrapper = shallowMount(FormViewer, {
       props: {
         formId: formId,
@@ -837,9 +837,9 @@ describe('FormViewer.vue', () => {
 
     await flushPromises();
 
-    wrapper.vm.toggleBlock(true);
+    wrapper.vm.isProcessingMultiUpload(true);
     expect(wrapper.vm.block).toBeTruthy();
-    wrapper.vm.toggleBlock(false);
+    wrapper.vm.isProcessingMultiUpload(false);
     expect(wrapper.vm.block).toBeFalsy();
   });
 
@@ -891,308 +891,6 @@ describe('FormViewer.vue', () => {
     });
   });
 
-  it('resetMessage will reset sbdMessage to default values', async () => {
-    const wrapper = shallowMount(FormViewer, {
-      props: {
-        formId: formId,
-        displayTitle: true,
-        draftId: '123',
-      },
-      global: {
-        provide: {
-          setWideLayout: vi.fn(),
-        },
-        plugins: [pinia],
-        stubs: STUBS,
-      },
-    });
-
-    await flushPromises();
-
-    wrapper.vm.sbdMessage = {
-      message: '',
-      error: '',
-      upload_state: 1,
-      response: ['something'],
-      file_name: '',
-      typeError: 0,
-    };
-    wrapper.vm.block = true;
-
-    wrapper.vm.resetMessage();
-
-    expect(wrapper.vm.sbdMessage).toEqual({
-      message: undefined,
-      error: false,
-      upload_state: 0,
-      response: [],
-      file_name: undefined,
-      typeError: -1,
-    });
-    expect(wrapper.vm.block).toBeFalsy();
-  });
-
-  describe('saveBulkData and sendMultiSubmissionData', () => {
-    it('sendMultiSubmissionData sets success message for sbdMessage and addsNotification on success', async () => {
-      const wrapper = shallowMount(FormViewer, {
-        props: {
-          formId: formId,
-          displayTitle: true,
-          draftId: '123',
-        },
-        global: {
-          provide: {
-            setWideLayout: vi.fn(),
-          },
-          plugins: [pinia],
-          stubs: STUBS,
-        },
-      });
-
-      await flushPromises();
-
-      addNotificationSpy.mockReset();
-
-      const createMultiSubmissionSpy = vi.spyOn(
-        formService,
-        'createMultiSubmission'
-      );
-      createMultiSubmissionSpy.mockImplementationOnce(() => {
-        return {
-          status: 200,
-        };
-      });
-
-      wrapper.vm.versionIdToSubmitTo = 1;
-      await wrapper.vm.sendMultiSubmissionData({});
-      expect(createMultiSubmissionSpy).toBeCalledTimes(1);
-      expect(addNotificationSpy).toBeCalledWith({
-        text: 'trans.formViewer.multiDraftUploadSuccess',
-        color: 'success',
-        icon: 'mdi:mdi-check-circle',
-        type: 'success',
-      });
-      expect(addNotificationSpy).toBeCalledTimes(1);
-      expect(wrapper.vm.sbdMessage).toEqual({
-        file_name: String,
-        typeError: Number,
-        message: 'trans.formViewer.multiDraftUploadSuccess',
-        error: false,
-        upload_state: 10,
-        response: [],
-      });
-      expect(wrapper.vm.block).toBeFalsy();
-      expect(wrapper.vm.saving).toBeFalsy();
-    });
-    it('saveBulkData will call sendMultiSubmissionData with the submissions given', async () => {
-      const wrapper = shallowMount(FormViewer, {
-        props: {
-          formId: formId,
-          displayTitle: true,
-          draftId: '123',
-        },
-        global: {
-          provide: {
-            setWideLayout: vi.fn(),
-          },
-          plugins: [pinia],
-          stubs: STUBS,
-        },
-      });
-
-      await flushPromises();
-
-      addNotificationSpy.mockReset();
-
-      const createMultiSubmissionSpy = vi.spyOn(
-        formService,
-        'createMultiSubmission'
-      );
-      createMultiSubmissionSpy.mockImplementationOnce(() => {
-        return {
-          status: 200,
-        };
-      });
-
-      wrapper.vm.versionIdToSubmitTo = 1;
-      await wrapper.vm.saveBulkData([
-        {
-          id: '123',
-        },
-        {
-          id: '124',
-        },
-      ]);
-      expect(createMultiSubmissionSpy).toBeCalledTimes(1);
-      expect(createMultiSubmissionSpy).toBeCalledWith(formId, 1, {
-        draft: true,
-        submission: {
-          data: [
-            {
-              id: '123',
-            },
-            {
-              id: '124',
-            },
-          ],
-        },
-      });
-    });
-    it('sendMultiSubmissionData sets failure message for sbdMessage and addsNotification if response status does not contain status 200 or 201', async () => {
-      const wrapper = shallowMount(FormViewer, {
-        props: {
-          formId: formId,
-          displayTitle: true,
-          draftId: '123',
-        },
-        global: {
-          provide: {
-            setWideLayout: vi.fn(),
-          },
-          plugins: [pinia],
-          stubs: STUBS,
-        },
-      });
-
-      await flushPromises();
-      addNotificationSpy.mockReset();
-      const createMultiSubmissionSpy = vi.spyOn(
-        formService,
-        'createMultiSubmission'
-      );
-      createMultiSubmissionSpy.mockImplementationOnce(() => {
-        return {
-          status: 500,
-        };
-      });
-
-      wrapper.vm.versionIdToSubmitTo = 1;
-      await wrapper.vm.sendMultiSubmissionData({});
-      expect(createMultiSubmissionSpy).toBeCalledTimes(1);
-      expect(addNotificationSpy).toBeCalledWith({
-        text: 'trans.formViewer.errSubmittingForm',
-        consoleError: 'trans.formViewer.errorSavingFile',
-      });
-      expect(addNotificationSpy).toBeCalledTimes(1);
-    });
-  });
-
-  describe('setFinalError', () => {
-    it('by default it will set sbdMessage message, error, upload_state, response', async () => {
-      const wrapper = shallowMount(FormViewer, {
-        props: {
-          formId: formId,
-          displayTitle: true,
-        },
-        global: {
-          provide: {
-            setWideLayout: vi.fn(),
-          },
-          plugins: [pinia],
-          stubs: STUBS,
-        },
-      });
-
-      await flushPromises();
-
-      await wrapper.vm.setFinalError({
-        response: {},
-      });
-
-      expect(wrapper.vm.sbdMessage.message).toEqual(
-        'trans.formViewer.errSubmittingForm'
-      );
-      expect(wrapper.vm.sbdMessage.error).toBeTruthy();
-      expect(wrapper.vm.sbdMessage.upload_state).toEqual(10);
-      expect(wrapper.vm.sbdMessage.response).toEqual([
-        {
-          error_message: 'trans.formViewer.errSubmittingForm',
-        },
-      ]);
-    });
-    it('if error.response.data is not undefined then it will give a default message if response reports is undefined', async () => {
-      const wrapper = shallowMount(FormViewer, {
-        props: {
-          formId: formId,
-          displayTitle: true,
-        },
-        global: {
-          provide: {
-            setWideLayout: vi.fn(),
-          },
-          plugins: [pinia],
-          stubs: STUBS,
-        },
-      });
-
-      await flushPromises();
-
-      await wrapper.vm.setFinalError({
-        response: {
-          data: {
-            title: 'some title',
-          },
-        },
-      });
-
-      expect(wrapper.vm.sbdMessage.message).toEqual('some title');
-      expect(wrapper.vm.sbdMessage.error).toBeTruthy();
-      expect(wrapper.vm.sbdMessage.upload_state).toEqual(10);
-      expect(wrapper.vm.sbdMessage.response).toEqual([
-        {
-          error_message: 'trans.formViewer.errSubmittingForm',
-        },
-      ]);
-    });
-    it('if error.response.data is not undefined then it will format that error message', async () => {
-      const wrapper = shallowMount(FormViewer, {
-        props: {
-          formId: formId,
-          displayTitle: true,
-        },
-        global: {
-          provide: {
-            setWideLayout: vi.fn(),
-          },
-          plugins: [pinia],
-          stubs: STUBS,
-        },
-      });
-
-      await flushPromises();
-
-      await wrapper.vm.setFinalError({
-        response: {
-          data: {
-            title: 'some title',
-            reports: [
-              {
-                details: [
-                  {
-                    message: 'an error occurred',
-                  },
-                ],
-              },
-            ],
-          },
-        },
-      });
-
-      expect(wrapper.vm.sbdMessage.message).toEqual('some title');
-      expect(wrapper.vm.sbdMessage.error).toBeTruthy();
-      expect(wrapper.vm.sbdMessage.upload_state).toEqual(10);
-      expect(wrapper.vm.sbdMessage.response).toEqual([
-        {
-          key: null,
-          label: null,
-          submission: 0,
-          validator: null,
-          error_message: 'an error occurred',
-        },
-      ]);
-    });
-  });
-
   it('saveDraft will call updateSubmission and replace the route if there is a submission id and it is not a duplicate', async () => {
     const updateSubmissionSpy = vi.spyOn(formService, 'updateSubmission');
     updateSubmissionSpy.mockImplementationOnce(() => {});
diff --git a/app/frontend/tests/unit/components/designer/MultiUpload.spec.js b/app/frontend/tests/unit/components/designer/FormViewerMultiUpload.spec.js
similarity index 56%
rename from app/frontend/tests/unit/components/designer/MultiUpload.spec.js
rename to app/frontend/tests/unit/components/designer/FormViewerMultiUpload.spec.js
index da7329332..06b8973cd 100644
--- a/app/frontend/tests/unit/components/designer/MultiUpload.spec.js
+++ b/app/frontend/tests/unit/components/designer/FormViewerMultiUpload.spec.js
@@ -367,4 +367,306 @@ describe('FormViewerMultiUpload.vue', () => {
     });
   });
   // it is not necessary to test if the FileReader functionality or JSON.parse functionality works.
+
+  /* it('resetMessage will reset sbdMessage to default values', async () => {
+    const wrapper = shallowMount(FormViewer, {
+      props: {
+        formId: formId,
+        displayTitle: true,
+        draftId: '123',
+      },
+      global: {
+        provide: {
+          setWideLayout: vi.fn(),
+        },
+        plugins: [pinia],
+        stubs: STUBS,
+      },
+    });
+
+    await flushPromises();
+
+    wrapper.vm.sbdMessage = {
+      message: '',
+      error: '',
+      upload_state: 1,
+      response: ['something'],
+      file_name: '',
+      typeError: 0,
+    };
+    wrapper.vm.block = true;
+
+    wrapper.vm.resetMessage();
+
+    expect(wrapper.vm.sbdMessage).toEqual({
+      message: undefined,
+      error: false,
+      upload_state: 0,
+      response: [],
+      file_name: undefined,
+      typeError: -1,
+    });
+    expect(wrapper.vm.block).toBeFalsy();
+  });
+
+  describe('saveBulkData and sendMultiSubmissionData', () => {
+    it('sendMultiSubmissionData sets success message for sbdMessage and addsNotification on success', async () => {
+      const wrapper = shallowMount(FormViewer, {
+        props: {
+          formId: formId,
+          displayTitle: true,
+          draftId: '123',
+        },
+        global: {
+          provide: {
+            setWideLayout: vi.fn(),
+          },
+          plugins: [pinia],
+          stubs: STUBS,
+        },
+      });
+
+      await flushPromises();
+
+      addNotificationSpy.mockReset();
+
+      const createMultiSubmissionSpy = vi.spyOn(
+        formService,
+        'createMultiSubmission'
+      );
+      createMultiSubmissionSpy.mockImplementationOnce(() => {
+        return {
+          status: 200,
+        };
+      });
+
+      wrapper.vm.versionIdToSubmitTo = 1;
+      await wrapper.vm.sendMultiSubmissionData({});
+      expect(createMultiSubmissionSpy).toBeCalledTimes(1);
+      expect(addNotificationSpy).toBeCalledWith({
+        text: 'trans.formViewer.multiDraftUploadSuccess',
+        color: 'success',
+        icon: 'mdi:mdi-check-circle',
+        type: 'success',
+      });
+      expect(addNotificationSpy).toBeCalledTimes(1);
+      expect(wrapper.vm.sbdMessage).toEqual({
+        file_name: String,
+        typeError: Number,
+        message: 'trans.formViewer.multiDraftUploadSuccess',
+        error: false,
+        upload_state: 10,
+        response: [],
+      });
+      expect(wrapper.vm.block).toBeFalsy();
+      expect(wrapper.vm.saving).toBeFalsy();
+    });
+    it('saveBulkData will call sendMultiSubmissionData with the submissions given', async () => {
+      const wrapper = shallowMount(FormViewer, {
+        props: {
+          formId: formId,
+          displayTitle: true,
+          draftId: '123',
+        },
+        global: {
+          provide: {
+            setWideLayout: vi.fn(),
+          },
+          plugins: [pinia],
+          stubs: STUBS,
+        },
+      });
+
+      await flushPromises();
+
+      addNotificationSpy.mockReset();
+
+      const createMultiSubmissionSpy = vi.spyOn(
+        formService,
+        'createMultiSubmission'
+      );
+      createMultiSubmissionSpy.mockImplementationOnce(() => {
+        return {
+          status: 200,
+        };
+      });
+
+      wrapper.vm.versionIdToSubmitTo = 1;
+      await wrapper.vm.saveBulkData([
+        {
+          id: '123',
+        },
+        {
+          id: '124',
+        },
+      ]);
+      expect(createMultiSubmissionSpy).toBeCalledTimes(1);
+      expect(createMultiSubmissionSpy).toBeCalledWith(formId, 1, {
+        draft: true,
+        submission: {
+          data: [
+            {
+              id: '123',
+            },
+            {
+              id: '124',
+            },
+          ],
+        },
+      });
+    });
+    it('sendMultiSubmissionData sets failure message for sbdMessage and addsNotification if response status does not contain status 200 or 201', async () => {
+      const wrapper = shallowMount(FormViewer, {
+        props: {
+          formId: formId,
+          displayTitle: true,
+          draftId: '123',
+        },
+        global: {
+          provide: {
+            setWideLayout: vi.fn(),
+          },
+          plugins: [pinia],
+          stubs: STUBS,
+        },
+      });
+
+      await flushPromises();
+      addNotificationSpy.mockReset();
+      const createMultiSubmissionSpy = vi.spyOn(
+        formService,
+        'createMultiSubmission'
+      );
+      createMultiSubmissionSpy.mockImplementationOnce(() => {
+        return {
+          status: 500,
+        };
+      });
+
+      wrapper.vm.versionIdToSubmitTo = 1;
+      await wrapper.vm.sendMultiSubmissionData({});
+      expect(createMultiSubmissionSpy).toBeCalledTimes(1);
+      expect(addNotificationSpy).toBeCalledWith({
+        text: 'trans.formViewer.errSubmittingForm',
+        consoleError: 'trans.formViewer.errorSavingFile',
+      });
+      expect(addNotificationSpy).toBeCalledTimes(1);
+    });
+  });
+
+  describe('setFinalError', () => {
+    it('by default it will set sbdMessage message, error, upload_state, response', async () => {
+      const wrapper = shallowMount(FormViewer, {
+        props: {
+          formId: formId,
+          displayTitle: true,
+        },
+        global: {
+          provide: {
+            setWideLayout: vi.fn(),
+          },
+          plugins: [pinia],
+          stubs: STUBS,
+        },
+      });
+
+      await flushPromises();
+
+      await wrapper.vm.setFinalError({
+        response: {},
+      });
+
+      expect(wrapper.vm.sbdMessage.message).toEqual(
+        'trans.formViewer.errSubmittingForm'
+      );
+      expect(wrapper.vm.sbdMessage.error).toBeTruthy();
+      expect(wrapper.vm.sbdMessage.upload_state).toEqual(10);
+      expect(wrapper.vm.sbdMessage.response).toEqual([
+        {
+          error_message: 'trans.formViewer.errSubmittingForm',
+        },
+      ]);
+    });
+    it('if error.response.data is not undefined then it will give a default message if response reports is undefined', async () => {
+      const wrapper = shallowMount(FormViewer, {
+        props: {
+          formId: formId,
+          displayTitle: true,
+        },
+        global: {
+          provide: {
+            setWideLayout: vi.fn(),
+          },
+          plugins: [pinia],
+          stubs: STUBS,
+        },
+      });
+
+      await flushPromises();
+
+      await wrapper.vm.setFinalError({
+        response: {
+          data: {
+            title: 'some title',
+          },
+        },
+      });
+
+      expect(wrapper.vm.sbdMessage.message).toEqual('some title');
+      expect(wrapper.vm.sbdMessage.error).toBeTruthy();
+      expect(wrapper.vm.sbdMessage.upload_state).toEqual(10);
+      expect(wrapper.vm.sbdMessage.response).toEqual([
+        {
+          error_message: 'trans.formViewer.errSubmittingForm',
+        },
+      ]);
+    });
+    it('if error.response.data is not undefined then it will format that error message', async () => {
+      const wrapper = shallowMount(FormViewer, {
+        props: {
+          formId: formId,
+          displayTitle: true,
+        },
+        global: {
+          provide: {
+            setWideLayout: vi.fn(),
+          },
+          plugins: [pinia],
+          stubs: STUBS,
+        },
+      });
+
+      await flushPromises();
+
+      await wrapper.vm.setFinalError({
+        response: {
+          data: {
+            title: 'some title',
+            reports: [
+              {
+                details: [
+                  {
+                    message: 'an error occurred',
+                  },
+                ],
+              },
+            ],
+          },
+        },
+      });
+
+      expect(wrapper.vm.sbdMessage.message).toEqual('some title');
+      expect(wrapper.vm.sbdMessage.error).toBeTruthy();
+      expect(wrapper.vm.sbdMessage.upload_state).toEqual(10);
+      expect(wrapper.vm.sbdMessage.response).toEqual([
+        {
+          key: null,
+          label: null,
+          submission: 0,
+          validator: null,
+          error_message: 'an error occurred',
+        },
+      ]);
+    });
+  }); */
 });

From 3c61cbb5694000f198b137224658827d0888cb24 Mon Sep 17 00:00:00 2001
From: jasonchung1871 <101672465+jasonchung1871@users.noreply.github.com>
Date: Tue, 29 Oct 2024 14:42:57 -0700
Subject: [PATCH 2/2] Tests for FormViewerMultiUpload

A lot of tests added for FormViewerMultiUpload. Nearly 100%.
---
 .../src/components/designer/FormViewer.vue    |    2 +-
 .../designer/FormViewerMultiUpload.vue        |  108 +-
 app/frontend/src/composables/form.js          |   14 +
 .../designer/FormViewerMultiUpload.spec.js    | 1053 +++++++++++++----
 4 files changed, 881 insertions(+), 296 deletions(-)

diff --git a/app/frontend/src/components/designer/FormViewer.vue b/app/frontend/src/components/designer/FormViewer.vue
index ac88ab8a5..afbe9877a 100644
--- a/app/frontend/src/components/designer/FormViewer.vue
+++ b/app/frontend/src/components/designer/FormViewer.vue
@@ -947,7 +947,7 @@ async function uploadFile(file, config = {}) {
             :form-schema="formSchema"
             :json-csv="json_csv"
             :submission-version="versionIdToSubmitTo"
-            @isProcessing="isProcessingMultiUpload"
+            @isProcessingMultiUpload="isProcessingMultiUpload"
           />
 
           <Form
diff --git a/app/frontend/src/components/designer/FormViewerMultiUpload.vue b/app/frontend/src/components/designer/FormViewerMultiUpload.vue
index 1aa5f891f..0ece2792a 100644
--- a/app/frontend/src/components/designer/FormViewerMultiUpload.vue
+++ b/app/frontend/src/components/designer/FormViewerMultiUpload.vue
@@ -5,6 +5,7 @@ import { storeToRefs } from 'pinia';
 import { computed, nextTick, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
+import { delay } from '~/composables/form';
 import { formService } from '~/services';
 import { useAppStore } from '~/store/app';
 import { useFormStore } from '~/store/form';
@@ -48,11 +49,11 @@ const { isRTL } = storeToRefs(formStore);
 // This timeout is purely used for adding an artificial delay, some systems were having
 // an issue where they were running out of memory. The garbage collection for memory
 // was not happening early/fast enough. This seems to be a good middleground.
-const delayTimeout = ref(null);
+const delayTime = ref(500);
 // These are the errors that occur while validating the submissions or the file
 const errors = ref([]);
 // The file to be uploaded
-const file = ref(null);
+const file = ref(undefined);
 // The file input reference
 const fileRef = ref(null);
 // If there is a file currently being processed
@@ -65,12 +66,12 @@ const progressBar = ref({
   message: '',
 });
 const sbdMessage = ref({
-  message: String,
-  error: Boolean,
-  upload_state: Number,
+  message: undefined,
+  error: false,
+  upload_state: 0,
   response: [],
-  file_name: String,
-  typeError: Number,
+  file_name: undefined,
+  typeError: -1,
 });
 // This is the index in the list of submissions that are being uploaded
 const submissionIndex = ref(0);
@@ -176,7 +177,7 @@ function parseFile() {
 }
 
 function popFormLevelInfo(jsonPayload = []) {
-  /** This function is purely made to remove un-necessery information
+  /** This function is purely made to remove unnecessary information
    * from the json payload of submissions. It will also help to remove crucial data
    * to be removed from the payload that should not be going to DB like confirmationId,
    * formName,version,createdAt,fullName,username,email,status,assignee,assigneeEmail and
@@ -313,6 +314,7 @@ async function preValidateSubmission() {
 
 async function getMemoryInfo() {
   return new Promise((resolve) => {
+    // window.performance.memory is DEPRECATED, this needs to be replaced
     if (window.performance && window.performance.memory) {
       resolve(
         (
@@ -360,22 +362,21 @@ function convertEmptyArraysToNull(obj) {
 }
 
 async function validate(element, errors) {
-  await delay(500);
+  await delay(delayTime.value);
   //this.checkMemoryUsage();
-  formIOValidation(element).then((response) => {
-    if (response.error) {
-      errors[submissionIndex.value] = {
-        submission: submissionIndex.value,
-        errors: response.data,
-      };
-    }
-    delete response.error;
-    delete response.data;
-    submissionToValidate.value.setSubmission({
-      data: undefined,
-    });
-    validationDispatcher(errors);
+  const response = await formIOValidation(element);
+  if (response.error) {
+    errors[submissionIndex.value] = {
+      submission: submissionIndex.value,
+      errors: response.data,
+    };
+  }
+  delete response.error;
+  delete response.data;
+  submissionToValidate.value.setSubmission({
+    data: undefined,
   });
+  validationDispatcher(errors);
 }
 
 async function validationDispatcher(errors) {
@@ -386,7 +387,6 @@ async function validationDispatcher(errors) {
   submissionToValidate.value.resetValue();
   submissionToValidate.value.clear();
   const response = await checkMemoryUsage();
-
   await delay(response);
   const check = {
     shouldContinueValidation:
@@ -426,15 +426,6 @@ async function formIOValidation(element) {
   });
 }
 
-function delay(ms) {
-  return new Promise((resolve) => {
-    delayTimeout.value = setTimeout(() => {
-      clearTimeout(delayTimeout.value);
-      resolve();
-    }, ms);
-  });
-}
-
 function percentage(i) {
   let number_of_submission = fileReaderData.value.length;
   if (number_of_submission > 0 && i > 0) {
@@ -450,10 +441,8 @@ async function endValidation(errs) {
   submissionToValidate.value = null;
   if (errors.value.length == 0) {
     await saveBulkData(fileReaderData.value);
-    console.log('we should be emitting save-bulk-data now');
   } else {
     emit('isProcessingMultiUpload', false);
-    console.log('we should be emitting set-error now');
     setError({
       text: t('trans.formViewerMultiUpload.errAfterValidate'),
       error: true,
@@ -478,6 +467,14 @@ function resetUploadState() {
     percent: 0,
     message: '',
   };
+  sbdMessage.value = {
+    message: undefined,
+    error: false,
+    upload_state: 0,
+    response: [],
+    file_name: undefined,
+    typeError: -1,
+  };
 }
 
 async function saveBulkData(submissions) {
@@ -485,7 +482,7 @@ async function saveBulkData(submissions) {
     draft: true,
     submission: Object.freeze({ data: submissions }),
   };
-  sendMultiSubmissionData(payload);
+  await sendMultiSubmissionData(payload);
 }
 
 async function sendMultiSubmissionData(body) {
@@ -538,9 +535,9 @@ async function sendMultiSubmissionData(body) {
   }
 }
 
-async function setFinalError(error) {
+function setFinalError(error) {
   try {
-    if (error.response.data != undefined) {
+    if (error.response.data != undefined && error.response.data !== '') {
       sbdMessage.value.message =
         error.response.data.title == undefined
           ? t('trans.formViewer.errSubmittingForm')
@@ -552,14 +549,14 @@ async function setFinalError(error) {
                 error_message: t('trans.formViewer.errSubmittingForm'),
               },
             ]
-          : await formatResponse(error.response.data.reports);
+          : formatResponse(error.response.data.reports);
     } else {
       sbdMessage.value.message = t('trans.formViewer.errSubmittingForm');
       sbdMessage.value.response = [
         { error_message: t('trans.formViewer.errSubmittingForm') },
       ];
     }
-  } catch (error_2) {
+  } catch (err) {
     sbdMessage.value.message = t('trans.formViewer.errSubmittingForm');
     sbdMessage.value.response = [
       { error_message: t('trans.formViewer.errSubmittingForm') },
@@ -695,14 +692,17 @@ function buildValidationFromComponent(obj) {
       }
     });
     return validatorIdentity.replace(/^\|/, '');
-  } else if (obj?.messages[0]?.context?.validator) {
+  } else if (
+    obj?.messages?.length > 0 &&
+    obj?.messages[0]?.context?.validator
+  ) {
     return obj.messages[0].context.validator;
   } else {
     return 'Unknown';
   }
 }
 
-async function frontendFormatResponse(response) {
+function frontendFormatResponse(response) {
   let newResponse = [];
 
   for (const item of response) {
@@ -736,9 +736,9 @@ async function frontendFormatResponse(response) {
   return newResponse;
 }
 
-async function formatResponse(response) {
+function formatResponse(response) {
   let newResponse = [];
-  await response.forEach((item, index) => {
+  response.forEach((item, index) => {
     if (item != null && item != undefined) {
       item.details.forEach((obj) => {
         let error = {};
@@ -766,39 +766,39 @@ async function formatResponse(response) {
   return newResponse;
 }
 
-async function setError(error) {
+function setError(error) {
   sbdMessage.value = error;
 
   try {
     if (error.response.data != undefined) {
       sbdMessage.value.message =
-        error.response.data.title == undefined
-          ? 'An error occurred submitting this form'
+        error.response.data.title === undefined
+          ? t('trans.formViewer.errSubmittingForm')
           : error.response.data.title;
       sbdMessage.value.error = true;
       sbdMessage.value.upload_state = 10;
       sbdMessage.value.response =
         error.response.data.reports == undefined
-          ? [{ error_message: 'An error occurred submitting this form' }]
-          : await frontendFormatResponse(error.response.data.reports);
+          ? [{ error_message: t('trans.formViewer.errSubmittingForm') }]
+          : frontendFormatResponse(error.response.data.reports);
       sbdMessage.value.file_name =
         'error_report_' + properties.form.name + '_' + Date.now();
     } else {
-      sbdMessage.value.message = 'An error occurred submitting this form';
+      sbdMessage.value.message = t('trans.formViewer.errSubmittingForm');
       sbdMessage.value.error = true;
       sbdMessage.value.upload_state = 10;
       sbdMessage.value.response = [
-        { error_message: 'An error occurred submitting this form' },
+        { error_message: t('trans.formViewer.errSubmittingForm') },
       ];
       sbdMessage.value.file_name =
         'error_report_' + properties.form.name + '_' + Date.now();
     }
-  } catch (error_2) {
-    sbdMessage.value.message = 'An error occurred submitting this form';
+  } catch (err) {
+    sbdMessage.value.message = t('trans.formViewer.errSubmittingForm');
     sbdMessage.value.error = true;
     sbdMessage.value.upload_state = 10;
     sbdMessage.value.response = [
-      { error_message: 'An error occurred submitting this form' },
+      { error_message: t('trans.formViewer.errSubmittingForm') },
     ];
     sbdMessage.value.file_name =
       'error_report_' + properties.form.name + '_' + Date.now();
@@ -826,7 +826,7 @@ async function setError(error) {
               @click="
                 download(
                   multiuploadTemplateFilename(form.name),
-                  jsonCsv,
+                  jsonCsv.data,
                   $t('trans.formViewerMultiUpload.confirmDownload')
                 )
               "
diff --git a/app/frontend/src/composables/form.js b/app/frontend/src/composables/form.js
index 3b02517b8..6d4b279fc 100644
--- a/app/frontend/src/composables/form.js
+++ b/app/frontend/src/composables/form.js
@@ -1,3 +1,5 @@
+import { onUnmounted } from 'vue';
+
 export function exportFormSchema(formName, formSchema, snake) {
   let snek = snake;
   if (!snek) {
@@ -31,3 +33,15 @@ export function importFormSchemaFromFile(file) {
     fileReader.readAsText(file);
   });
 }
+
+export function delay(ms) {
+  let timeout;
+  onUnmounted(() => clearTimeout(timeout));
+
+  return new Promise((resolve) => {
+    timeout = setTimeout(() => {
+      clearTimeout(timeout);
+      resolve();
+    }, ms);
+  });
+}
diff --git a/app/frontend/tests/unit/components/designer/FormViewerMultiUpload.spec.js b/app/frontend/tests/unit/components/designer/FormViewerMultiUpload.spec.js
index 06b8973cd..a26b19901 100644
--- a/app/frontend/tests/unit/components/designer/FormViewerMultiUpload.spec.js
+++ b/app/frontend/tests/unit/components/designer/FormViewerMultiUpload.spec.js
@@ -1,12 +1,18 @@
-import { mount } from '@vue/test-utils';
+// @vitest-environment happy-dom
+// happy-dom is required to access window.URL
+
+import { flushPromises, mount, shallowMount } from '@vue/test-utils';
+import { Formio } from '@formio/vue';
 import { setActivePinia, createPinia } from 'pinia';
 import { createRouter, createWebHistory } from 'vue-router';
 import { beforeEach, expect, vi } from 'vitest';
 
 import getRouter from '~/router';
 import FormViewerMultiUpload from '~/components/designer/FormViewerMultiUpload.vue';
+import { formService } from '~/services';
 import { useAppStore } from '~/store/app';
 import { useNotificationStore } from '~/store/notification';
+import { nextTick } from 'vue';
 
 const ERROR = {
   UPLOAD_MULTIPLE_FILE_ERROR:
@@ -22,7 +28,40 @@ const ERROR = {
   ERROR_AFTER_VALIDATE: 'Some errors found, see below for more information.',
 };
 
+const SUBMISSION_VERSION = '123';
+
+const PROPS = {
+  form: {
+    id: '123-456',
+    name: 'test form',
+  },
+  formSchema: {},
+  submissionVersion: SUBMISSION_VERSION,
+  jsonCsv: {
+    data: [],
+    file_name: '',
+  },
+};
+
+const STUBS = {
+  BaseInfoCard: {
+    name: 'BaseInfoCard',
+    template: '<div class="base-info-card-stub"><slot /></div>',
+  },
+};
+
+vi.mock('@formio/vue', () => ({
+  Formio: {
+    createForm: vi.fn(),
+  },
+}));
+
+vi.mock('~/composables/form', () => ({
+  delay: vi.fn(),
+}));
+
 describe('FormViewerMultiUpload.vue', () => {
+  const formId = '123-456';
   const pinia = createPinia();
   const router = createRouter({
     history: createWebHistory(),
@@ -33,6 +72,7 @@ describe('FormViewerMultiUpload.vue', () => {
   const appStore = useAppStore();
   const notificationStore = useNotificationStore();
   const addNotificationSpy = vi.spyOn(notificationStore, 'addNotification');
+
   const fileData = (sizeInByte) => {
     // Generate fake file data
     const bytesPerItem = Math.floor(sizeInByte / 100); // adjust as needed
@@ -62,26 +102,10 @@ describe('FormViewerMultiUpload.vue', () => {
 
   it('renders', () => {
     const wrapper = mount(FormViewerMultiUpload, {
-      props: {
-        formElement: undefined,
-        form: {},
-        formSchema: {},
-        formFields: [],
-        block: false,
-        response: {
-          message: '',
-          error: false,
-          upload_state: 0,
-          response: [],
-          file_name: '',
-        },
-        jsonCsv: {
-          data: [],
-          file_name: '',
-        },
-      },
+      props: PROPS,
       global: {
         plugins: [router, pinia],
+        stubs: STUBS,
       },
     });
 
@@ -89,61 +113,115 @@ describe('FormViewerMultiUpload.vue', () => {
     expect(wrapper.text()).toContain('trans.formViewerMultiUpload.json');
   });
 
+  it('fileSize returns the file size according to the size bytes, KB, MB', async () => {
+    const wrapper = shallowMount(FormViewerMultiUpload, {
+      global: {
+        plugins: [router, pinia],
+        stubs: STUBS,
+      },
+    });
+
+    await flushPromises();
+
+    wrapper.vm.file = {
+      size: 0,
+    };
+
+    expect(wrapper.vm.fileSize).toEqual('0.00 bytes');
+
+    wrapper.vm.file = {
+      size: 1024,
+    };
+
+    expect(wrapper.vm.fileSize).toEqual('1.00 KB');
+
+    wrapper.vm.file = {
+      size: 1048576,
+    };
+
+    expect(wrapper.vm.fileSize).toEqual('1.00 MB');
+  });
+
+  it('txt_colour returns success-text if there is no error in sbdMessage otherwise fail-text', async () => {
+    const wrapper = shallowMount(FormViewerMultiUpload, {
+      global: {
+        plugins: [router, pinia],
+        stubs: STUBS,
+      },
+    });
+
+    await flushPromises();
+
+    expect(wrapper.vm.txt_colour).toEqual('success-text');
+
+    wrapper.vm.sbdMessage = {
+      error: true,
+    };
+
+    expect(wrapper.vm.txt_colour).toEqual('fail-text');
+  });
+
+  it('download calls createObjectURL and revokeObjectURL', async () => {
+    let createObjectURLSpy = vi.spyOn(window.URL, 'createObjectURL');
+    createObjectURLSpy.mockImplementation((data) => data);
+    let revokeObjectURLSpy = vi.spyOn(window.URL, 'revokeObjectURL');
+    revokeObjectURLSpy.mockImplementation((data) => data);
+    let windowConfirmSpy = vi.spyOn(window, 'confirm');
+    windowConfirmSpy.mockImplementation(() => true);
+    const wrapper = shallowMount(FormViewerMultiUpload, {
+      global: {
+        plugins: [router, pinia],
+        stubs: STUBS,
+      },
+    });
+
+    await flushPromises();
+
+    wrapper.vm.download('filename.txt', {});
+
+    expect(createObjectURLSpy).toBeCalledTimes(1);
+    expect(revokeObjectURLSpy).toBeCalledTimes(1);
+  });
+
   describe('#addFile', () => {
     it('should return undefined when some data is in process', () => {
-      const wrapper = mount(FormViewerMultiUpload, {
-        props: {
-          formElement: undefined,
-          form: {},
-          formSchema: {},
-          formFields: [],
-          block: true,
-          response: {
-            message: '',
-            error: false,
-            upload_state: 0,
-            response: [],
-            file_name: '',
-          },
-          jsonCsv: {
-            data: [],
-            file_name: '',
-          },
-        },
+      const wrapper = shallowMount(FormViewerMultiUpload, {
+        props: PROPS,
         global: {
           plugins: [router, pinia],
+          stubs: STUBS,
         },
       });
-      const parseFileSpy = vi.spyOn(wrapper.vm, 'parseFile');
+
+      // Mock FileReader
+      window.FileReader = function () {
+        this.readAsText = vi.fn();
+        this.onload = null;
+        this.onloadend = null;
+      };
+
+      wrapper.vm.isProcessing = true;
+
       // act
-      wrapper.vm.addFile(null, 0);
+      wrapper.vm.addFile(
+        {
+          dataTransfer: {
+            files: [],
+          },
+        },
+        0
+      );
+
       // assert
       expect(addNotificationSpy).not.toHaveBeenCalled();
-      expect(parseFileSpy).not.toHaveBeenCalled();
     });
 
     it('should return undefined when no file select', () => {
-      const wrapper = mount(FormViewerMultiUpload, {
-        props: {
-          formElement: undefined,
-          form: {},
-          formSchema: {},
-          formFields: [],
-          block: false,
-          response: {
-            message: '',
-            error: false,
-            upload_state: 0,
-            response: [],
-            file_name: '',
-          },
-          jsonCsv: {
-            data: [],
-            file_name: '',
-          },
-        },
+      const wrapper = shallowMount(FormViewerMultiUpload, {
+        props: PROPS,
         global: {
           plugins: [router, pinia],
+          stubs: STUBS,
         },
       });
       // act
@@ -153,27 +231,11 @@ describe('FormViewerMultiUpload.vue', () => {
     });
 
     it('should return undefined when no file drag', () => {
-      const wrapper = mount(FormViewerMultiUpload, {
-        props: {
-          formElement: undefined,
-          form: {},
-          formSchema: {},
-          formFields: [],
-          block: false,
-          response: {
-            message: '',
-            error: false,
-            upload_state: 0,
-            response: [],
-            file_name: '',
-          },
-          jsonCsv: {
-            data: [],
-            file_name: '',
-          },
-        },
+      const wrapper = shallowMount(FormViewerMultiUpload, {
+        props: PROPS,
         global: {
           plugins: [router, pinia],
+          stubs: STUBS,
         },
       });
       // act
@@ -183,33 +245,18 @@ describe('FormViewerMultiUpload.vue', () => {
     });
 
     it('should return undefined when a file already drag', () => {
-      const wrapper = mount(FormViewerMultiUpload, {
-        props: {
-          formElement: undefined,
-          form: {},
-          formSchema: {},
-          formFields: [],
-          block: false,
-          response: {
-            message: '',
-            error: false,
-            upload_state: 0,
-            response: [],
-            file_name: '',
-          },
-          jsonCsv: {
-            data: [],
-            file_name: '',
-          },
-        },
+      const wrapper = shallowMount(FormViewerMultiUpload, {
+        props: PROPS,
         global: {
           plugins: [router, pinia],
+          stubs: STUBS,
         },
       });
       const file = new File(['{}'], 'test.json', {
         type: 'application/json',
       });
-      wrapper.setData({ file: file });
+
+      wrapper.vm.file = file;
 
       // act
       wrapper.vm.addFile({}, 0);
@@ -221,27 +268,11 @@ describe('FormViewerMultiUpload.vue', () => {
     });
 
     it('should show notification when submitter drag multiple files', () => {
-      const wrapper = mount(FormViewerMultiUpload, {
-        props: {
-          formElement: undefined,
-          form: {},
-          formSchema: {},
-          formFields: [],
-          block: false,
-          response: {
-            message: '',
-            error: false,
-            upload_state: 0,
-            response: [],
-            file_name: '',
-          },
-          jsonCsv: {
-            data: [],
-            file_name: '',
-          },
-        },
+      const wrapper = shallowMount(FormViewerMultiUpload, {
+        props: PROPS,
         global: {
           plugins: [router, pinia],
+          stubs: STUBS,
         },
       });
       const file = new File(['{}'], 'test.json', {
@@ -258,27 +289,11 @@ describe('FormViewerMultiUpload.vue', () => {
     });
 
     it('should show notification when file format is not JSON', () => {
-      const wrapper = mount(FormViewerMultiUpload, {
-        props: {
-          formElement: undefined,
-          form: {},
-          formSchema: {},
-          formFields: [],
-          block: false,
-          response: {
-            message: '',
-            error: false,
-            upload_state: 0,
-            response: [],
-            file_name: '',
-          },
-          jsonCsv: {
-            data: [],
-            file_name: '',
-          },
-        },
+      const wrapper = shallowMount(FormViewerMultiUpload, {
+        props: PROPS,
         global: {
           plugins: [router, pinia],
+          stubs: STUBS,
         },
       });
       const file = new File(['{}'], 'test.csv', {
@@ -295,27 +310,11 @@ describe('FormViewerMultiUpload.vue', () => {
     });
 
     it('should show notification when file size is over', () => {
-      const wrapper = mount(FormViewerMultiUpload, {
-        props: {
-          formElement: undefined,
-          form: {},
-          formSchema: {},
-          formFields: [],
-          block: false,
-          response: {
-            message: '',
-            error: false,
-            upload_state: 0,
-            response: [],
-            file_name: '',
-          },
-          jsonCsv: {
-            data: [],
-            file_name: '',
-          },
-        },
+      const wrapper = shallowMount(FormViewerMultiUpload, {
+        props: PROPS,
         global: {
           plugins: [router, pinia],
+          stubs: STUBS,
         },
       });
       // act
@@ -332,20 +331,184 @@ describe('FormViewerMultiUpload.vue', () => {
     });
 
     it('should show no notification when file is ok', () => {
+      const wrapper = shallowMount(FormViewerMultiUpload, {
+        props: PROPS,
+        global: {
+          plugins: [router, pinia],
+          stubs: STUBS,
+        },
+      });
+
+      // Mock FileReader
+      window.FileReader = function () {
+        this.readAsText = vi.fn();
+        this.onload = null;
+        this.onloadend = null;
+      };
+      // act
+      const file = new File(['{}'], 'test.json', {
+        type: 'application/json',
+      });
+      wrapper.vm.addFile({ target: { files: [file] } }, 1);
+      // assert
+      expect(addNotificationSpy).not.toHaveBeenCalled();
+    });
+  });
+  // it is not necessary to test if the FileReader functionality or JSON.parse functionality works.
+
+  it('handleFile will call fileRefs click function if file is undefined', async () => {
+    const wrapper = shallowMount(FormViewerMultiUpload, {
+      props: PROPS,
+      global: {
+        plugins: [router, pinia],
+        stubs: STUBS,
+      },
+    });
+
+    await flushPromises();
+
+    const clickSpy = vi.fn();
+
+    wrapper.vm.fileRef = {
+      click: clickSpy,
+    };
+
+    wrapper.vm.handleFile();
+
+    expect(clickSpy).toHaveBeenCalledTimes(1);
+  });
+
+  it('popFormLevelInfo will remove unnecessary information from the json payload of submissions', async () => {
+    const wrapper = shallowMount(FormViewerMultiUpload, {
+      props: PROPS,
+      global: {
+        plugins: [router, pinia],
+        stubs: STUBS,
+      },
+    });
+
+    await flushPromises();
+
+    expect(
+      wrapper.vm.popFormLevelInfo([
+        {
+          submit: true,
+          lateEntry: true,
+          form: {
+            confirmationId: '',
+            formName: '',
+            version: '',
+            createdAt: '',
+            fullName: '',
+            username: '',
+            email: '',
+            status: '',
+            assignee: '',
+            assigneeEmail: '',
+          },
+        },
+      ])
+    ).toEqual([{ form: {} }]);
+  });
+
+  describe('preValidateSubmission', () => {
+    it('will addNotification and return if fileReaderData is not an array', async () => {
+      const wrapper = shallowMount(FormViewerMultiUpload, {
+        props: PROPS,
+        global: {
+          plugins: [router, pinia],
+          stubs: STUBS,
+        },
+      });
+
+      await flushPromises();
+
+      wrapper.vm.fileReaderData = {};
+
+      await wrapper.vm.preValidateSubmission();
+
+      expect(addNotificationSpy).toBeCalledTimes(1);
+      expect(addNotificationSpy).toBeCalledWith({
+        text: 'trans.formViewerMultiUpload.jsonObjNotArray',
+        consoleError: 'trans.formViewerMultiUpload.jsonObjNotArrayConsErr',
+      });
+    });
+    it('will addNotification and return if fileReaderData is an empty array', async () => {
+      const wrapper = shallowMount(FormViewerMultiUpload, {
+        props: PROPS,
+        global: {
+          plugins: [router, pinia],
+          stubs: STUBS,
+        },
+      });
+
+      await flushPromises();
+
+      wrapper.vm.fileReaderData = [];
+
+      await wrapper.vm.preValidateSubmission();
+
+      expect(addNotificationSpy).toBeCalledTimes(1);
+      expect(addNotificationSpy).toBeCalledWith({
+        text: 'trans.formViewerMultiUpload.jsonArrayEmpty',
+        consoleError: 'trans.formViewerMultiUpload.fileIsEmpty',
+      });
+    });
+    it('will try to validate a submission', async () => {
       const wrapper = mount(FormViewerMultiUpload, {
         props: {
-          formElement: undefined,
           form: {},
-          formSchema: {},
-          formFields: [],
-          block: false,
-          response: {
-            message: '',
-            error: false,
-            upload_state: 0,
-            response: [],
-            file_name: '',
+          formSchema: {
+            components: [
+              {
+                type: 'number',
+                key: 'firstname',
+                validate: {
+                  custom: '',
+                },
+              },
+              {
+                type: 'simplenumber',
+                validate: {
+                  custom: '',
+                },
+              },
+              {
+                type: 'simplenumberadvanced',
+                validate: {
+                  custom: '',
+                },
+              },
+              {
+                type: 'simpledatetimeadvanced',
+                validate: {
+                  custom: '',
+                },
+                widget: {
+                  format: '',
+                },
+              },
+              {
+                type: 'simpledatetime',
+                validate: {
+                  custom: '',
+                },
+                widget: {
+                  format: '',
+                },
+              },
+              {
+                type: 'simpletimeadvanced',
+                validate: {
+                  custom: '',
+                },
+                widget: {
+                  format: '',
+                },
+              },
+            ],
           },
+          submissionVersion: SUBMISSION_VERSION,
           jsonCsv: {
             data: [],
             file_name: '',
@@ -353,28 +516,207 @@ describe('FormViewerMultiUpload.vue', () => {
         },
         global: {
           plugins: [router, pinia],
+          stubs: STUBS,
         },
       });
-      // act
-      const parseFileSpy = vi.spyOn(wrapper.vm, 'parseFile');
-      const file = new File(['{}'], 'test.json', {
-        type: 'application/json',
+
+      await flushPromises();
+
+      addNotificationSpy.mockReset();
+
+      const createMultiSubmissionSpy = vi.spyOn(
+        formService,
+        'createMultiSubmission'
+      );
+      createMultiSubmissionSpy.mockImplementationOnce(() => {
+        return {
+          status: 200,
+        };
       });
-      wrapper.vm.addFile({ target: { files: [file] } }, 1);
-      // assert
-      expect(addNotificationSpy).not.toHaveBeenCalled();
-      expect(parseFileSpy).toHaveBeenCalled();
+
+      wrapper.vm.fileReaderData = [
+        {
+          firstname: 'john',
+        },
+      ];
+
+      wrapper.vm.delayTime = 0;
+
+      const createFormSpy = vi.fn();
+      const submitSpy = vi.fn();
+      createFormSpy.mockImplementation(() => {
+        return {
+          setSubmission: vi.fn(),
+          clearServerErrors: vi.fn(),
+          resetValue: vi.fn(),
+          clear: vi.fn(),
+          submit: submitSpy,
+          destroy: vi.fn(),
+        };
+      });
+
+      Formio.createForm = createFormSpy;
+
+      submitSpy.mockImplementation(() => {
+        return Promise.resolve({});
+      });
+
+      await wrapper.vm.preValidateSubmission();
+
+      // Multiple nextTicks called
+      // calling nextTick in preValidateSubmission
+      await nextTick();
+      // calling nextTick in validationDispatcher
+      await nextTick();
+
+      expect(wrapper.emitted()).toHaveProperty('isProcessingMultiUpload');
     });
   });
-  // it is not necessary to test if the FileReader functionality or JSON.parse functionality works.
 
-  /* it('resetMessage will reset sbdMessage to default values', async () => {
-    const wrapper = shallowMount(FormViewer, {
-      props: {
-        formId: formId,
-        displayTitle: true,
-        draftId: '123',
+  it('convertEmptyArraysToNull will convert all empty arrays to null', async () => {
+    const wrapper = shallowMount(FormViewerMultiUpload, {
+      props: PROPS,
+      global: {
+        plugins: [router, pinia],
+        stubs: STUBS,
+      },
+    });
+
+    expect(wrapper.vm.convertEmptyArraysToNull([{ shouldBeNull: [] }])).toEqual(
+      [{ shouldBeNull: null }]
+    );
+    expect(wrapper.vm.convertEmptyArraysToNull({ shouldBeNull: [] })).toEqual({
+      shouldBeNull: null,
+    });
+    expect(wrapper.vm.convertEmptyArraysToNull('')).toEqual('');
+  });
+
+  it('formIOValidation will resolve with an object of error false if it is valid', async () => {
+    const wrapper = shallowMount(FormViewerMultiUpload, {
+      props: PROPS,
+      global: {
+        plugins: [router, pinia],
+        stubs: STUBS,
+      },
+    });
+
+    await flushPromises();
+
+    const setSubmissionSpy = vi.fn();
+    const submitSpy = vi.fn();
+
+    submitSpy.mockImplementationOnce(() => {
+      return Promise.resolve({});
+    });
+
+    wrapper.vm.submissionToValidate = {
+      setSubmission: setSubmissionSpy,
+      submit: submitSpy,
+    };
+
+    expect(await wrapper.vm.formIOValidation({})).toEqual({
+      error: false,
+      data: {},
+    });
+    expect(setSubmissionSpy).toBeCalledTimes(1);
+    expect(submitSpy).toBeCalledTimes(1);
+
+    setSubmissionSpy.mockReset();
+    submitSpy.mockReset();
+
+    submitSpy.mockImplementationOnce(() => {
+      return Promise.reject({});
+    });
+
+    wrapper.vm.submissionToValidate = {
+      setSubmission: setSubmissionSpy,
+      submit: submitSpy,
+    };
+
+    expect(await wrapper.vm.formIOValidation({})).toEqual({
+      error: true,
+      data: {},
+    });
+    expect(setSubmissionSpy).toBeCalledTimes(1);
+    expect(submitSpy).toBeCalledTimes(1);
+  });
+
+  it('percentage will return a percentage based on fileReaderData', async () => {
+    const wrapper = shallowMount(FormViewerMultiUpload, {
+      props: PROPS,
+      global: {
+        plugins: [router, pinia],
+        stubs: STUBS,
+      },
+    });
+
+    wrapper.vm.fileReaderData = [0, 0];
+    expect(wrapper.vm.percentage(0)).toEqual(0);
+    expect(wrapper.vm.percentage(1)).toEqual(50);
+    expect(wrapper.vm.percentage(2)).toEqual(100);
+  });
+
+  it('endValidation will sendSubmissionData if there are no errors', async () => {
+    const wrapper = shallowMount(FormViewerMultiUpload, {
+      props: PROPS,
+      global: {
+        plugins: [router, pinia],
+        stubs: STUBS,
+      },
+    });
+
+    await flushPromises();
+
+    const createMultiSubmissionSpy = vi.spyOn(
+      formService,
+      'createMultiSubmission'
+    );
+    createMultiSubmissionSpy.mockImplementationOnce(() => {
+      return Promise.resolve({
+        status: 500,
+      });
+    });
+
+    wrapper.vm.submissionToValidate = {
+      destroy: vi.fn(),
+    };
+
+    wrapper.vm.file = {
+      name: 'filename.txt',
+    };
+
+    await wrapper.vm.endValidation([]);
+
+    expect(createMultiSubmissionSpy).toBeCalledTimes(1);
+  });
+
+  it('endValidation will emit isProcessingMultiUpload with false if there are errors', async () => {
+    const wrapper = shallowMount(FormViewerMultiUpload, {
+      props: PROPS,
+      global: {
+        plugins: [router, pinia],
+        stubs: STUBS,
       },
+    });
+
+    await flushPromises();
+
+    wrapper.vm.submissionToValidate = {
+      destroy: vi.fn(),
+    };
+
+    await wrapper.vm.endValidation([
+      {
+        message: '123',
+      },
+    ]);
+
+    expect(wrapper.emitted()).toHaveProperty('isProcessingMultiUpload');
+  });
+
+  it('resetUploadState will reset sbdMessage to default values', async () => {
+    const wrapper = shallowMount(FormViewerMultiUpload, {
+      props: PROPS,
       global: {
         provide: {
           setWideLayout: vi.fn(),
@@ -394,9 +736,9 @@ describe('FormViewerMultiUpload.vue', () => {
       file_name: '',
       typeError: 0,
     };
-    wrapper.vm.block = true;
+    wrapper.vm.isProcessing = true;
 
-    wrapper.vm.resetMessage();
+    wrapper.vm.resetUploadState();
 
     expect(wrapper.vm.sbdMessage).toEqual({
       message: undefined,
@@ -406,17 +748,13 @@ describe('FormViewerMultiUpload.vue', () => {
       file_name: undefined,
       typeError: -1,
     });
-    expect(wrapper.vm.block).toBeFalsy();
+    expect(wrapper.vm.isProcessing).toBeFalsy();
   });
 
   describe('saveBulkData and sendMultiSubmissionData', () => {
     it('sendMultiSubmissionData sets success message for sbdMessage and addsNotification on success', async () => {
-      const wrapper = shallowMount(FormViewer, {
-        props: {
-          formId: formId,
-          displayTitle: true,
-          draftId: '123',
-        },
+      const wrapper = shallowMount(FormViewerMultiUpload, {
+        props: PROPS,
         global: {
           provide: {
             setWideLayout: vi.fn(),
@@ -435,9 +773,9 @@ describe('FormViewerMultiUpload.vue', () => {
         'createMultiSubmission'
       );
       createMultiSubmissionSpy.mockImplementationOnce(() => {
-        return {
+        return Promise.resolve({
           status: 200,
-        };
+        });
       });
 
       wrapper.vm.versionIdToSubmitTo = 1;
@@ -451,23 +789,19 @@ describe('FormViewerMultiUpload.vue', () => {
       });
       expect(addNotificationSpy).toBeCalledTimes(1);
       expect(wrapper.vm.sbdMessage).toEqual({
-        file_name: String,
-        typeError: Number,
+        file_name: undefined,
+        typeError: -1,
         message: 'trans.formViewer.multiDraftUploadSuccess',
         error: false,
         upload_state: 10,
         response: [],
       });
-      expect(wrapper.vm.block).toBeFalsy();
+      expect(wrapper.vm.isProcessing).toBeFalsy();
       expect(wrapper.vm.saving).toBeFalsy();
     });
     it('saveBulkData will call sendMultiSubmissionData with the submissions given', async () => {
-      const wrapper = shallowMount(FormViewer, {
-        props: {
-          formId: formId,
-          displayTitle: true,
-          draftId: '123',
-        },
+      const wrapper = shallowMount(FormViewerMultiUpload, {
+        props: PROPS,
         global: {
           provide: {
             setWideLayout: vi.fn(),
@@ -486,9 +820,9 @@ describe('FormViewerMultiUpload.vue', () => {
         'createMultiSubmission'
       );
       createMultiSubmissionSpy.mockImplementationOnce(() => {
-        return {
+        return Promise.resolve({
           status: 200,
-        };
+        });
       });
 
       wrapper.vm.versionIdToSubmitTo = 1;
@@ -501,27 +835,27 @@ describe('FormViewerMultiUpload.vue', () => {
         },
       ]);
       expect(createMultiSubmissionSpy).toBeCalledTimes(1);
-      expect(createMultiSubmissionSpy).toBeCalledWith(formId, 1, {
-        draft: true,
-        submission: {
-          data: [
-            {
-              id: '123',
-            },
-            {
-              id: '124',
-            },
-          ],
-        },
-      });
+      expect(createMultiSubmissionSpy).toBeCalledWith(
+        formId,
+        SUBMISSION_VERSION,
+        {
+          draft: true,
+          submission: {
+            data: [
+              {
+                id: '123',
+              },
+              {
+                id: '124',
+              },
+            ],
+          },
+        }
+      );
     });
     it('sendMultiSubmissionData sets failure message for sbdMessage and addsNotification if response status does not contain status 200 or 201', async () => {
-      const wrapper = shallowMount(FormViewer, {
-        props: {
-          formId: formId,
-          displayTitle: true,
-          draftId: '123',
-        },
+      const wrapper = shallowMount(FormViewerMultiUpload, {
+        props: PROPS,
         global: {
           provide: {
             setWideLayout: vi.fn(),
@@ -537,12 +871,19 @@ describe('FormViewerMultiUpload.vue', () => {
         formService,
         'createMultiSubmission'
       );
-      createMultiSubmissionSpy.mockImplementationOnce(() => {
-        return {
+      createMultiSubmissionSpy.mockImplementationOnce(async () => {
+        return Promise.resolve({
           status: 500,
-        };
+          response: {
+            data: '',
+            status: 500,
+          },
+        });
       });
 
+      wrapper.vm.file = {
+        name: 'filename.txt',
+      };
       wrapper.vm.versionIdToSubmitTo = 1;
       await wrapper.vm.sendMultiSubmissionData({});
       expect(createMultiSubmissionSpy).toBeCalledTimes(1);
@@ -556,11 +897,8 @@ describe('FormViewerMultiUpload.vue', () => {
 
   describe('setFinalError', () => {
     it('by default it will set sbdMessage message, error, upload_state, response', async () => {
-      const wrapper = shallowMount(FormViewer, {
-        props: {
-          formId: formId,
-          displayTitle: true,
-        },
+      const wrapper = shallowMount(FormViewerMultiUpload, {
+        props: PROPS,
         global: {
           provide: {
             setWideLayout: vi.fn(),
@@ -588,11 +926,8 @@ describe('FormViewerMultiUpload.vue', () => {
       ]);
     });
     it('if error.response.data is not undefined then it will give a default message if response reports is undefined', async () => {
-      const wrapper = shallowMount(FormViewer, {
-        props: {
-          formId: formId,
-          displayTitle: true,
-        },
+      const wrapper = shallowMount(FormViewerMultiUpload, {
+        props: PROPS,
         global: {
           provide: {
             setWideLayout: vi.fn(),
@@ -622,11 +957,8 @@ describe('FormViewerMultiUpload.vue', () => {
       ]);
     });
     it('if error.response.data is not undefined then it will format that error message', async () => {
-      const wrapper = shallowMount(FormViewer, {
-        props: {
-          formId: formId,
-          displayTitle: true,
-        },
+      const wrapper = shallowMount(FormViewerMultiUpload, {
+        props: PROPS,
         global: {
           provide: {
             setWideLayout: vi.fn(),
@@ -639,6 +971,9 @@ describe('FormViewerMultiUpload.vue', () => {
       await flushPromises();
 
       await wrapper.vm.setFinalError({
+        error: true,
+        file_name: 'error_report_000000',
+        message: 'Validation Error',
         response: {
           data: {
             title: 'some title',
@@ -648,11 +983,22 @@ describe('FormViewerMultiUpload.vue', () => {
                   {
                     message: 'an error occurred',
                   },
+                  {
+                    context: {
+                      key: null,
+                      label: null,
+                      validator: null,
+                      message: 'context error',
+                    },
+                  },
                 ],
               },
             ],
           },
         },
+        text: 'Some errors found, see below for more information.',
+        typeError: 0,
+        upload_state: 10,
       });
 
       expect(wrapper.vm.sbdMessage.message).toEqual('some title');
@@ -666,7 +1012,232 @@ describe('FormViewerMultiUpload.vue', () => {
           validator: null,
           error_message: 'an error occurred',
         },
+        {
+          key: null,
+          label: null,
+          submission: 0,
+          validator: null,
+          error_message: undefined,
+        },
       ]);
     });
-  }); */
+  });
+
+  it('buildValidationFromComponent returns unknown if it is not a valid object', async () => {
+    const wrapper = shallowMount(FormViewerMultiUpload, {
+      props: PROPS,
+      global: {
+        plugins: [router, pinia],
+        stubs: STUBS,
+      },
+    });
+
+    await flushPromises();
+
+    expect(wrapper.vm.buildValidationFromComponent({})).toEqual('Unknown');
+    expect(
+      wrapper.vm.buildValidationFromComponent({
+        messages: [
+          {
+            context: {
+              validator: 'validator',
+            },
+          },
+        ],
+      })
+    ).toEqual('validator');
+    expect(
+      wrapper.vm.buildValidationFromComponent({
+        component: {
+          validate: {
+            maxSelectedCount: 10,
+            minSelectedCount: 1,
+            multiple: true,
+            onlyAvailableItems: true,
+            required: true,
+            strictDateValidation: true,
+            unique: true,
+            custom: 'if(component.validate.required === true){}',
+            customMessage: 'custom message',
+            customPrivate: '  d',
+            json: '{}',
+            pattern: '123',
+            maxWords: 10,
+            minWords: 1,
+            maxLength: 10,
+            minLength: 1,
+            something: '123',
+          },
+        },
+      })
+    ).toEqual(
+      'maxSelectedCount:10|minSelectedCount:1|multiple:true|onlyAvailableItems:true|required:true|strictDateValidation:true|unique:true|custom:if(component.validate.required === true){}|customMessage:custom message|customPrivate:d|json:{}|pattern:123|maxWords:10|minWords:1|maxLength:10|minLength:1|something:123'
+    );
+  });
+
+  it('frontendFormatResponse will format the response message', async () => {
+    const wrapper = shallowMount(FormViewerMultiUpload, {
+      props: PROPS,
+      global: {
+        plugins: [router, pinia],
+        stubs: STUBS,
+      },
+    });
+
+    await flushPromises();
+
+    expect(
+      await wrapper.vm.frontendFormatResponse([
+        {
+          submission: 0,
+          errors: [
+            {
+              message: 'Date / Time is required',
+              external: false,
+              formattedKeyOrPath: 'simpledatetimeadvanced',
+              component: {
+                key: 'simpledatetime',
+                label: 'End Date',
+                type: 'simpledatetime',
+              },
+              messages: [
+                {
+                  message: 'Date / Time is required',
+                  level: 'error',
+                },
+              ],
+            },
+            {
+              message: 'This is the validation error message',
+            },
+          ],
+        },
+      ])
+    ).toEqual([
+      {
+        error_message: 'Date / Time is required',
+        key: 'simpledatetime',
+        label: 'End Date',
+        submission: 0,
+        validator: 'Unknown',
+      },
+      {
+        error_message: 'This is the validation error message',
+        key: null,
+        label: null,
+        submission: 0,
+        validator: null,
+      },
+    ]);
+  });
+
+  it('setError will give a default error if there is no response data', async () => {
+    const wrapper = shallowMount(FormViewerMultiUpload, {
+      props: PROPS,
+      global: {
+        provide: {
+          setWideLayout: vi.fn(),
+        },
+        plugins: [pinia],
+        stubs: STUBS,
+      },
+    });
+
+    await flushPromises();
+
+    await wrapper.vm.setError({
+      response: {},
+    });
+
+    expect(wrapper.vm.sbdMessage.message).toEqual(
+      'trans.formViewer.errSubmittingForm'
+    );
+    expect(wrapper.vm.sbdMessage.error).toBeTruthy();
+    expect(wrapper.vm.sbdMessage.upload_state).toEqual(10);
+    expect(wrapper.vm.sbdMessage.response).toEqual([
+      {
+        error_message: 'trans.formViewer.errSubmittingForm',
+      },
+    ]);
+  });
+
+  it('setError will format the response if there is response data', async () => {
+    const wrapper = shallowMount(FormViewerMultiUpload, {
+      props: PROPS,
+      global: {
+        provide: {
+          setWideLayout: vi.fn(),
+        },
+        plugins: [pinia],
+        stubs: STUBS,
+      },
+    });
+
+    await flushPromises();
+
+    await wrapper.vm.setError({
+      response: {
+        data: {
+          title: 'some title',
+          reports: [
+            {
+              errors: [
+                {
+                  message: 'some error',
+                },
+              ],
+            },
+          ],
+        },
+      },
+    });
+
+    expect(wrapper.vm.sbdMessage.message).toEqual('some title');
+    expect(wrapper.vm.sbdMessage.error).toBeTruthy();
+    expect(wrapper.vm.sbdMessage.upload_state).toEqual(10);
+    expect(wrapper.vm.sbdMessage.response).toEqual([
+      {
+        key: null,
+        label: null,
+        submission: undefined,
+        validator: null,
+        error_message: 'some error',
+      },
+    ]);
+  });
+
+  it('setError will give a default error if an error occurs', async () => {
+    const wrapper = shallowMount(FormViewerMultiUpload, {
+      props: PROPS,
+      global: {
+        provide: {
+          setWideLayout: vi.fn(),
+        },
+        plugins: [pinia],
+        stubs: STUBS,
+      },
+    });
+
+    await flushPromises();
+
+    await wrapper.vm.setError({
+      response: {
+        data: {
+          title: 'some title',
+          reports: {},
+        },
+      },
+    });
+
+    expect(wrapper.vm.sbdMessage.message).toEqual(
+      'trans.formViewer.errSubmittingForm'
+    );
+    expect(wrapper.vm.sbdMessage.error).toBeTruthy();
+    expect(wrapper.vm.sbdMessage.upload_state).toEqual(10);
+    expect(wrapper.vm.sbdMessage.response).toEqual([
+      {
+        error_message: 'trans.formViewer.errSubmittingForm',
+      },
+    ]);
+  });
 });