diff --git a/src/components/CreateMappingModal.vue b/src/components/CreateMappingModal.vue
new file mode 100644
index 00000000..48e34f0c
--- /dev/null
+++ b/src/components/CreateMappingModal.vue
@@ -0,0 +1,132 @@
+<template>
+    <ion-header>
+      <ion-toolbar>
+        <ion-buttons slot="start">
+          <ion-button @click="closeModal"> 
+            <ion-icon :icon="close" />
+          </ion-button>
+        </ion-buttons>
+        <ion-title>{{ translate("CSV Mapping") }}</ion-title>
+      </ion-toolbar>
+    </ion-header>
+  
+    <ion-item>
+      <ion-input :label="translate('Mapping name')" :placeholder="translate('Field mapping name')" v-model="mappingName" />
+    </ion-item>
+  
+    <ion-content>
+      <div>
+        <ion-list>
+          <ion-item-divider>
+            <ion-label>{{ translate("Required") }} </ion-label>
+          </ion-item-divider>
+          <ion-item :key="field" v-for="(fieldValues, field) in getFields(fields, true)">
+            <ion-select :label="translate(fieldValues.label)" interface="popover" :placeholder = "translate('Select')" v-model="fieldMapping[field]">
+              <ion-select-option :key="index" v-for="(prop, index) in fileColumns">{{ prop }}</ion-select-option>
+            </ion-select>
+          </ion-item>
+          <ion-item-divider>
+            <ion-label>{{ translate("Optional") }} </ion-label>
+          </ion-item-divider>
+          <ion-item :key="field" v-for="(fieldValues, field) in getFields(fields, false)">
+            <ion-select :label="translate(fieldValues.label)" interface="popover" :placeholder = "translate('Select')" v-model="fieldMapping[field]">
+              <ion-select-option :key="index" v-for="(prop, index) in fileColumns">{{ prop }}</ion-select-option>
+            </ion-select>
+          </ion-item>
+        </ion-list>
+      </div>
+      <ion-fab vertical="bottom" horizontal="end" slot="fixed">
+        <ion-fab-button @click="saveMapping">
+          <ion-icon :icon="saveOutline" />
+        </ion-fab-button>
+      </ion-fab>
+    </ion-content>
+  </template>
+
+<script setup>
+import {
+  IonButtons,
+  IonButton,
+  IonContent,
+  IonFab,
+  IonFabButton,
+  IonHeader,
+  IonIcon,
+  IonInput,
+  IonItem,
+  IonItemDivider,
+  IonLabel,
+  IonSelect,
+  IonSelectOption,
+  IonTitle,
+  IonToolbar,
+  IonList,
+  modalController
+} from '@ionic/vue';
+
+import { close, save, saveOutline } from "ionicons/icons";
+import { computed, defineProps, onMounted, ref } from "vue";
+import { useStore } from "vuex";
+import { showToast } from '@/utils';
+import { translate } from "@hotwax/dxp-components";
+
+const store = useStore();
+
+const props = defineProps(["content", "seletedFieldMapping", "mappingType"])
+const fieldMappings = computed(() => store.getters["user/getFieldMappings"])
+
+let mappingName = ref(null)
+let fieldMapping = ref ({})
+let fileColumns = ref([])
+let identificationTypeId = ref('SKU')
+const fields = process.env["VUE_APP_MAPPING_INVCOUNT"] ? JSON.parse(process.env["VUE_APP_MAPPING_INVCOUNT"]) : {}
+
+onMounted(() => {
+  fieldMapping.value = { ...props.seletedFieldMapping }
+  fileColumns.value = Object.keys(props.content[0]);
+})
+
+function getFields(fields, required = true) {
+  return Object.keys(fields).reduce((result, key) => {
+    if (fields[key].required === required) {
+      result[key] = fields[key];
+    }
+    return result;
+  }, {});
+}
+function closeModal() {
+  modalController.dismiss({ dismissed: true });
+}
+async function saveMapping() {
+  if(!mappingName.value || !mappingName.value.trim()) {
+    showToast(translate("Enter mapping name"));
+    return
+  }
+  if (!areAllFieldsSelected()) {
+    showToast(translate("Map all required fields"));
+    return
+  }
+  const id = generateUniqueMappingPrefId();
+  await store.dispatch("user/createFieldMapping", { id, name: mappingName.value, value: fieldMapping.value, mappingType: props.mappingType })
+  closeModal();
+}
+
+function areAllFieldsSelected() {
+  const requiredFields = Object.keys(getFields(fields, true));
+  const selectedFields = Object.keys(fieldMapping.value).filter(key => fieldMapping.value[key] !== '')
+
+  return requiredFields.every(field => selectedFields.includes(field));
+}
+
+//Todo: Generating unique identifiers as we are currently storing in local storage. Need to remove it as we will be storing data on server.
+function generateUniqueMappingPrefId() {
+  const id = Math.floor(Math.random() * 1000);
+  return !fieldMappings.value[id] ? id : this.generateUniqueMappingPrefId();
+}
+
+</script>
+<style scoped>
+  ion-content {
+    --padding-bottom: 80px;
+  }
+</style>
\ No newline at end of file
diff --git a/src/components/CycleCountUploadActionPopover.vue b/src/components/CycleCountUploadActionPopover.vue
new file mode 100644
index 00000000..48e34f0c
--- /dev/null
+++ b/src/components/CycleCountUploadActionPopover.vue
@@ -0,0 +1,132 @@
+<template>
+    <ion-header>
+      <ion-toolbar>
+        <ion-buttons slot="start">
+          <ion-button @click="closeModal"> 
+            <ion-icon :icon="close" />
+          </ion-button>
+        </ion-buttons>
+        <ion-title>{{ translate("CSV Mapping") }}</ion-title>
+      </ion-toolbar>
+    </ion-header>
+  
+    <ion-item>
+      <ion-input :label="translate('Mapping name')" :placeholder="translate('Field mapping name')" v-model="mappingName" />
+    </ion-item>
+  
+    <ion-content>
+      <div>
+        <ion-list>
+          <ion-item-divider>
+            <ion-label>{{ translate("Required") }} </ion-label>
+          </ion-item-divider>
+          <ion-item :key="field" v-for="(fieldValues, field) in getFields(fields, true)">
+            <ion-select :label="translate(fieldValues.label)" interface="popover" :placeholder = "translate('Select')" v-model="fieldMapping[field]">
+              <ion-select-option :key="index" v-for="(prop, index) in fileColumns">{{ prop }}</ion-select-option>
+            </ion-select>
+          </ion-item>
+          <ion-item-divider>
+            <ion-label>{{ translate("Optional") }} </ion-label>
+          </ion-item-divider>
+          <ion-item :key="field" v-for="(fieldValues, field) in getFields(fields, false)">
+            <ion-select :label="translate(fieldValues.label)" interface="popover" :placeholder = "translate('Select')" v-model="fieldMapping[field]">
+              <ion-select-option :key="index" v-for="(prop, index) in fileColumns">{{ prop }}</ion-select-option>
+            </ion-select>
+          </ion-item>
+        </ion-list>
+      </div>
+      <ion-fab vertical="bottom" horizontal="end" slot="fixed">
+        <ion-fab-button @click="saveMapping">
+          <ion-icon :icon="saveOutline" />
+        </ion-fab-button>
+      </ion-fab>
+    </ion-content>
+  </template>
+
+<script setup>
+import {
+  IonButtons,
+  IonButton,
+  IonContent,
+  IonFab,
+  IonFabButton,
+  IonHeader,
+  IonIcon,
+  IonInput,
+  IonItem,
+  IonItemDivider,
+  IonLabel,
+  IonSelect,
+  IonSelectOption,
+  IonTitle,
+  IonToolbar,
+  IonList,
+  modalController
+} from '@ionic/vue';
+
+import { close, save, saveOutline } from "ionicons/icons";
+import { computed, defineProps, onMounted, ref } from "vue";
+import { useStore } from "vuex";
+import { showToast } from '@/utils';
+import { translate } from "@hotwax/dxp-components";
+
+const store = useStore();
+
+const props = defineProps(["content", "seletedFieldMapping", "mappingType"])
+const fieldMappings = computed(() => store.getters["user/getFieldMappings"])
+
+let mappingName = ref(null)
+let fieldMapping = ref ({})
+let fileColumns = ref([])
+let identificationTypeId = ref('SKU')
+const fields = process.env["VUE_APP_MAPPING_INVCOUNT"] ? JSON.parse(process.env["VUE_APP_MAPPING_INVCOUNT"]) : {}
+
+onMounted(() => {
+  fieldMapping.value = { ...props.seletedFieldMapping }
+  fileColumns.value = Object.keys(props.content[0]);
+})
+
+function getFields(fields, required = true) {
+  return Object.keys(fields).reduce((result, key) => {
+    if (fields[key].required === required) {
+      result[key] = fields[key];
+    }
+    return result;
+  }, {});
+}
+function closeModal() {
+  modalController.dismiss({ dismissed: true });
+}
+async function saveMapping() {
+  if(!mappingName.value || !mappingName.value.trim()) {
+    showToast(translate("Enter mapping name"));
+    return
+  }
+  if (!areAllFieldsSelected()) {
+    showToast(translate("Map all required fields"));
+    return
+  }
+  const id = generateUniqueMappingPrefId();
+  await store.dispatch("user/createFieldMapping", { id, name: mappingName.value, value: fieldMapping.value, mappingType: props.mappingType })
+  closeModal();
+}
+
+function areAllFieldsSelected() {
+  const requiredFields = Object.keys(getFields(fields, true));
+  const selectedFields = Object.keys(fieldMapping.value).filter(key => fieldMapping.value[key] !== '')
+
+  return requiredFields.every(field => selectedFields.includes(field));
+}
+
+//Todo: Generating unique identifiers as we are currently storing in local storage. Need to remove it as we will be storing data on server.
+function generateUniqueMappingPrefId() {
+  const id = Math.floor(Math.random() * 1000);
+  return !fieldMappings.value[id] ? id : this.generateUniqueMappingPrefId();
+}
+
+</script>
+<style scoped>
+  ion-content {
+    --padding-bottom: 80px;
+  }
+</style>
\ No newline at end of file
diff --git a/src/components/Menu.vue b/src/components/Menu.vue
index b0e7aad5..5802cb03 100644
--- a/src/components/Menu.vue
+++ b/src/components/Menu.vue
@@ -62,6 +62,12 @@ export default defineComponent({
     const store = useStore();
     const router = useRouter();
     const appPages = [
+      {
+        title: "Bulk Upload",
+        url: "/bulkUpload",
+        iosIcon: createOutline,
+        mdIcon: createOutline
+      },
       {
         title: "Draft",
         url: "/draft",
diff --git a/src/router/index.ts b/src/router/index.ts
index a800df54..b629c014 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -17,6 +17,7 @@ import Settings from "@/views/Settings.vue";
 import HardCount from "@/views/HardCount.vue"
 import HardCountDetail from "@/views/HardCountDetail.vue"
 import SessionCountDetail from "@/views/SessionCountDetail.vue"
+import BulkUpload from "@/views/BulkUpload.vue";
 
 // Defining types for the meta values
 declare module 'vue-router' {
@@ -146,6 +147,15 @@ const routes: Array<RouteRecordRaw> = [
       permissionId: "APP_PENDING_REVIEW_VIEW"
     }
   },
+  {
+    path: '/bulkUpload',
+    name: 'Draft bulk',
+    component: BulkUpload,
+    beforeEnter: authGuard,
+    meta: {
+      permissionId: "APP_DRAFT_VIEW"
+    }
+  },
   {
     path: '/settings',
     name: 'Settings',
diff --git a/src/services/CountService.ts b/src/services/CountService.ts
index a55a14af..936acb0c 100644
--- a/src/services/CountService.ts
+++ b/src/services/CountService.ts
@@ -28,8 +28,26 @@ const getInventoryCountImportSession = async (params: { workEffortId: string; in
   });
 }
 
+const bulkUploadInventoryCounts = async (payload: any): Promise <any>  => {
+  return api({
+    url: `inventory-cycle-count/cycleCounts/upload`,
+    method: "post",
+    ...payload
+  });
+}
+
+const fetchCycleCountImportSystemMessages = async (payload: any): Promise <any>  => {
+  return api({
+    url: `inventory-cycle-count/cycleCounts/systemMessages`,
+    method: "get",
+    params: payload
+  });
+}
+
 export const CountService = {
   getAssignedWorkEfforts,
   getInventoryCountImportsByWorkEffort,
-  getInventoryCountImportSession
+  getInventoryCountImportSession,
+  bulkUploadInventoryCounts,
+  fetchCycleCountImportSystemMessages
 }
\ No newline at end of file
diff --git a/src/store/modules/count/actions.ts b/src/store/modules/count/actions.ts
index 5ba2150b..dadb030c 100644
--- a/src/store/modules/count/actions.ts
+++ b/src/store/modules/count/actions.ts
@@ -59,6 +59,26 @@ const actions: ActionTree<CountState, RootState> = {
 
     commit(types.COUNT_ASSIGNED_WORK_EFFORTS_UPDATED, { assignedWorkEfforts, total, isScrollable })
   },
+  async fetchCycleCountImportSystemMessages({commit} ,payload) {
+    let systemMessages;
+    try {
+      const twentyFourHoursEarlier = DateTime.now().minus({ hours: 24 });
+      const resp = await CountService.fetchCycleCountImportSystemMessages({
+        systemMessageTypeId: "ImportInventoryCounts",
+        initDate_from: twentyFourHoursEarlier.toMillis(),
+        orderByField: 'initDate desc, processedDate desc',
+        pageSize: 100
+      })
+      if (!hasError(resp)) {
+        systemMessages = resp.data
+      } else {
+        throw resp.data;
+      }
+    } catch (err: any) {
+      logger.error(err)
+    }
+    commit(types.COUNT_IMPORT_SYSTEM_MESSAGES_UPDATED, systemMessages)
+  },
   setCountDetailPageActive({ commit }, isPageActive) {
     commit(types.COUNT_DETAIL_PAGE_ACTIVE_UPDATED, isPageActive);
   }
diff --git a/src/store/modules/count/getters.ts b/src/store/modules/count/getters.ts
index 65e283f1..6a32a872 100644
--- a/src/store/modules/count/getters.ts
+++ b/src/store/modules/count/getters.ts
@@ -11,6 +11,9 @@ const getters: GetterTree<CountState, RootState> = {
   },
   isCountDetailPageActive(state) {
     return state.isCountDetailPageActive;
+  },
+  getCycleCountImportSystemMessages(state) {
+    return state.cycleCountImportSystemMessages
   }
 };
 
diff --git a/src/store/modules/count/mutation-types.ts b/src/store/modules/count/mutation-types.ts
index 247eb0ac..0c8bdc4a 100644
--- a/src/store/modules/count/mutation-types.ts
+++ b/src/store/modules/count/mutation-types.ts
@@ -1,3 +1,4 @@
 export const SN_COUNT = "count"
 export const COUNT_DETAIL_PAGE_ACTIVE_UPDATED = SN_COUNT + '/DETAIL_PAGE_ACTIVE_UPDATED'
-export const COUNT_ASSIGNED_WORK_EFFORTS_UPDATED = SN_COUNT + "/ASSIGNED_WORK_EFFORTS_UPDATED"
\ No newline at end of file
+export const COUNT_ASSIGNED_WORK_EFFORTS_UPDATED = SN_COUNT + "/ASSIGNED_WORK_EFFORTS_UPDATED"
+export const COUNT_IMPORT_SYSTEM_MESSAGES_UPDATED = SN_COUNT + "/IMPORT_SYSTEM_MESSAGES_UPDATED"
\ No newline at end of file
diff --git a/src/store/modules/count/mutations.ts b/src/store/modules/count/mutations.ts
index 01345b65..82c444a4 100644
--- a/src/store/modules/count/mutations.ts
+++ b/src/store/modules/count/mutations.ts
@@ -10,6 +10,9 @@ const mutations: MutationTree <CountState> = {
     state.assignedWorkEfforts = payload.assignedWorkEfforts
     state.total = payload.total
     state.isScrollable = payload.isScrollable;
+  },
+  [types.COUNT_IMPORT_SYSTEM_MESSAGES_UPDATED] (state, payload) {
+    state.cycleCountImportSystemMessages = payload
   }
 }	
 export default mutations;	
diff --git a/src/views/BulkUpload.vue b/src/views/BulkUpload.vue
new file mode 100644
index 00000000..341c699b
--- /dev/null
+++ b/src/views/BulkUpload.vue
@@ -0,0 +1,314 @@
+<template>
+  <ion-page>
+    <ion-header :translucent="true">
+      <ion-toolbar>
+        <ion-back-button slot="start" default-href="/draft" />
+        <ion-title>{{ translate("Draft bulk") }}</ion-title>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content>
+      <div class="main">
+        <ion-item>
+          <ion-label>{{ translate("Cycle count") }}</ion-label>
+          <ion-label class="ion-text-right ion-padding-end">{{ uploadedFile.name }}</ion-label>
+          <input @change="parse" ref="file" class="ion-hide" type="file" id="inventoryCountInputFile"/>
+          <label for="inventoryCountInputFile">{{ translate("Upload") }}</label>
+        </ion-item>
+
+        <ion-list>
+          <ion-list-header>{{ translate("Saved mappings") }}</ion-list-header>
+          <div>
+            <ion-chip :disabled="!content.length" outline="true" @click="addFieldMapping()">
+              <ion-icon :icon="addOutline" />
+              <ion-label>{{ translate("New mapping") }}</ion-label>
+            </ion-chip>
+            <ion-chip :disabled="!content.length" v-for="(mapping, index) in fieldMappings('INVCOUNT') ?? []" :key="index" @click="mapFields(mapping, index)" :outline="selectedMappingId != index">
+              {{ mapping.name }}
+            </ion-chip>
+          </div>
+        </ion-list>   
+
+        <ion-list>
+          <ion-list-header>{{ translate("Select the following columns from the uploaded CSV") }}</ion-list-header>
+
+          <ion-item-divider>
+            <ion-label>{{ translate("Required") }} </ion-label>
+          </ion-item-divider>
+          <ion-item :key="field" v-for="(fieldValues, field) in getFilteredFields(fields, true)">
+            <ion-select interface="popover" :disabled="!content.length" :placeholder = "translate('Select')" v-model="fieldMapping[field]">
+              <ion-label slot="label" class="ion-text-wrap">
+                {{translate(fieldValues.label)}}
+                <p>{{ fieldValues.description }}</p>
+              </ion-label>
+              <ion-select-option :key="index" v-for="(prop, index) in fileColumns">{{ prop }}</ion-select-option>
+            </ion-select>
+          </ion-item>
+          <ion-item-divider>
+            <ion-label>{{ translate("Optional") }} </ion-label>
+          </ion-item-divider>
+          <ion-item :key="field" v-for="(fieldValues, field) in getFilteredFields(fields, false)">
+            <ion-select interface="popover" :disabled="!content.length" :placeholder = "translate('Select')" v-model="fieldMapping[field]">
+              <ion-label slot="label" class="ion-text-wrap">
+                {{translate(fieldValues.label)}}
+                <p>{{ fieldValues.description }}</p>
+              </ion-label>
+              <ion-select-option :key="index" v-for="(prop, index) in fileColumns">{{ prop }}</ion-select-option>
+            </ion-select>
+          </ion-item>
+        </ion-list>
+
+        <ion-button :disabled="!content.length" color="medium" @click="save" expand="block">
+          {{ translate("Upload") }}
+          <ion-icon slot="end" :icon="cloudUploadOutline" />
+        </ion-button>
+
+        <ion-list v-if="systemMessages.length" class="system-message-section">
+          <ion-list-header>{{ translate("Recently uploaded counts") }}</ion-list-header>
+          <ion-item v-for="systemMessage in systemMessages" :key="systemMessage.systemMessageId">
+            <ion-label>
+              <p class="overline">{{ systemMessage.systemMessageId }}</p>
+              {{ extractFilename(systemMessage.messageText) }}
+            </ion-label>
+            <div class="system-message-action">
+              <ion-note slot="end">{{ getFileProcessingStatus(systemMessage) }}</ion-note>
+              <ion-button size="default" slot="end" fill="clear" color="medium" @click="openUploadActionPopover($event, systemMessage)">
+                <ion-icon slot="icon-only" :icon="ellipsisVerticalOutline" />
+              </ion-button>
+            </div>
+          </ion-item>
+        </ion-list>
+
+      </div>
+    </ion-content>
+  </ion-page>
+</template>
+
+<script setup>
+import {
+  IonBackButton,
+  IonButton,
+  IonChip,
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonItem,
+  IonItemDivider,
+  IonLabel,
+  IonList,
+  IonListHeader,
+  IonNote,
+  IonPage,
+  IonSelect,
+  IonSelectOption,
+  IonTitle,
+  IonToolbar,
+  onIonViewDidEnter,
+  modalController,
+  popoverController
+} from '@ionic/vue';
+import { addOutline, cloudUploadOutline, ellipsisVerticalOutline, trashBinOutline } from "ionicons/icons";
+import { translate } from '@/i18n';
+import { computed, ref } from "vue";
+import { useStore } from 'vuex';
+import logger from "@/logger";
+import { hasError, jsonToCsv, parseCsv, showToast } from "@/utils";
+import CreateMappingModal from "@/components/CreateMappingModal.vue";
+import { CountService } from "@/services/CountService"
+import CycleCountUploadActionPopover from "@/components/CycleCountUploadActionPopover.vue"
+
+const store = useStore();
+
+const fieldMappings = computed(() => store.getters["user/getFieldMappings"])
+const systemMessages = computed(() => store.getters["count/getCycleCountImportSystemMessages"])
+
+let file = ref(null)
+let uploadedFile = ref({})
+let fileName = ref(null)
+let content = ref([])
+let fieldMapping = ref({})
+let fileColumns = ref([])
+let selectedMappingId = ref(null)
+const fileUploaded = ref(false);
+const fields = process.env["VUE_APP_MAPPING_INVCOUNT"] ? JSON.parse(process.env["VUE_APP_MAPPING_INVCOUNT"]) : {}
+
+
+onIonViewDidEnter(async() => {
+  uploadedFile.value = {}
+  content.value = []
+  fileName.value = null
+  
+  resetFieldMapping();
+  file.value.value = null;
+  await store.dispatch('user/getFieldMappings')
+  await store.dispatch('count/fetchCycleCountImportSystemMessages')
+})
+function resetFieldMapping() {
+  fieldMapping.value = Object.keys(fields).reduce((fieldMapping, field) => {
+    fieldMapping[field] = ""
+    return fieldMapping;
+  }, {})
+}
+function resetDefaults() {
+  resetFieldMapping();
+  uploadedFile.value = {}
+  content.value = []
+  fileName.value = null
+  file.value.value = ''
+  selectedMappingId.value = null
+}
+function extractFilename(filePath) {
+  if (!filePath) {
+    return;
+  }
+  // Get the part of the string after the last '/'
+  const filenameWithTimestamp = filePath?.substring(filePath?.lastIndexOf('/') + 1);
+  
+  // Use a regex to remove the timestamp and return the base filename
+  const baseFilename = filenameWithTimestamp.replace(/_\d{4}-\d{2}-\d{2}-\d{2}-\d{2}-\d{2}-\d{3}\.csv$/, '.csv');
+  
+  return baseFilename;
+}
+
+function getFilteredFields(fields, required = true) {
+  return Object.keys(fields).reduce((result, key) => {
+    if (fields[key].required === required) {
+      result[key] = fields[key];
+    }
+    return result;
+  }, {});
+}
+function getFileProcessingStatus(systemMessage) {
+  let processingStatus = "pending"
+  if (systemMessage.statusId === 'SmsgConsumed') {
+    processingStatus = "processed"
+  } else if (systemMessage.statusId === 'SmsgConsuming') {
+    processingStatus = "processing"
+  } else if (systemMessage.statusId === 'SmsgCancelled') {
+    processingStatus = 'cancelled'
+  } else if (systemMessage.statusId === 'SmsgError') {
+    processingStatus = 'error'
+  }
+  return processingStatus;
+}
+
+async function openUploadActionPopover(event, systemMessage){
+  const popover = await popoverController.create({
+    component: CycleCountUploadActionPopover,
+    event,
+    componentProps: {
+      systemMessage,
+      fileName: extractFilename(systemMessage.messageText)
+    },
+    showBackdrop: false,
+  });
+  await popover.present();
+}
+
+async function parse(event) {
+  const file = event.target.files[0];
+  try {
+    if (file) {
+      uploadedFile.value = file;
+      fileName.value = file.name
+      content.value = await parseCsv(uploadedFile.value);
+      fileColumns.value = Object.keys(content.value[0]);
+      showToast(translate("File uploaded successfully"));
+      fileUploaded.value = !fileUploaded.value;
+      selectedMappingId.value = null;
+      resetFieldMapping();
+    }
+  } catch {
+    content.value = []
+    showToast(translate("Please upload a valid csv to continue"));
+  }
+}
+async function save(){
+  if (!areAllFieldsSelected()) {
+    showToast(translate("Select all the required fields to continue"));
+    return;
+  }
+
+  const uploadedData = content.value.map(item => {
+    return {
+      countImportName: item[fieldMapping.value.countImportName],
+      statusId: item[fieldMapping.value.statusId] ? item[fieldMapping.value.statusId] : "INV_COUNT_CREATED",
+      idValue: item[fieldMapping.value.productSku],
+      idType: "SKU",
+      dueDate: item[fieldMapping.value.dueDate],
+      facilityId: '',
+      externalFacilityId: item[fieldMapping.value.facility]
+    }
+  })
+
+  const data = jsonToCsv(uploadedData)
+  const formData = new FormData();
+  formData.append("uploadedFile", data, fileName.value);
+  formData.append("fileName", fileName.value.replace(".csv", ""));
+  
+  try {
+    const resp = await CountService.bulkUploadInventoryCounts({
+      data: formData,
+      headers: {
+        'Content-Type': 'multipart/form-data;'
+      }
+    })
+
+    if(!hasError(resp)) {
+      resetDefaults();
+      await store.dispatch('count/fetchCycleCountImportSystemMessages');
+      showToast(translate("The cycle counts file uploaded successfully."));
+    } else {
+      throw resp.data;
+    }
+  } catch(err) {
+    logger.error(err)
+    showToast(translate("Failed to upload the file, please try again"));
+  }
+}
+function mapFields(mapping, mappingId) {
+  const fieldMappingData = JSON.parse(JSON.stringify(mapping));
+
+  // TODO: Store an object in this.content variable, so everytime when accessing it, we don't need to use 0th index
+  const csvFields = Object.keys(content.value[0]);
+
+  const missingFields = Object.values(fieldMappingData.value).filter(field => {
+    if(!csvFields.includes(field)) return field;
+  });
+  if(missingFields.length) showToast(translate("Some of the mapping fields are missing in the CSV: ", { missingFields: missingFields.join(", ") }))
+
+  Object.keys(fieldMappingData.value).map((key) => {
+    if(!csvFields.includes(fieldMappingData.value[key])){
+      fieldMappingData.value[key] = "";
+    }
+  })
+  fieldMapping.value = fieldMappingData.value;
+  selectedMappingId.value = mappingId
+}
+function areAllFieldsSelected() {
+  const requiredFields = Object.keys(getFilteredFields(fields, true));
+  const selectedFields = Object.keys(fieldMapping.value).filter(key => fieldMapping.value[key] !== '')
+
+  return requiredFields.every(field => selectedFields.includes(field));
+}
+async function addFieldMapping() {
+  const createMappingModal = await modalController.create({
+    component: CreateMappingModal,
+    componentProps: { content: content.value, seletedFieldMapping: fieldMapping.value, mappingType: 'INVCOUNT'}
+  });
+  return createMappingModal.present();
+}
+</script> 
+<style scoped>
+.main {
+  max-width: 732px;
+  margin: var(--spacer-sm) auto 0; 
+}
+.system-message-section {
+  margin-bottom: 16px;
+}
+.system-message-action {
+  display: flex;
+  align-items: center;
+}
+</style>
\ No newline at end of file