Merge pull request #58 from bcgov/fix/3139-big-file-upload-timeout

Changing request timeout to infinite for file upload
bcgov · Mar 23, 2023 · fb855b7 · fb855b7
2 parents 5790978 + 454de26
commit fb855b7
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 15 deletions.
diff --git a/frontend/src/components/object/ObjectUpload.vue b/frontend/src/components/object/ObjectUpload.vue
@@ -44,7 +44,8 @@ const onUpload = async (event: any) => {
     await Promise.allSettled(
       event.files.map(async (file: File) => {
         try {
-          await objectStore.createObject(file, bucketId);
+          // Infinite timeout for big files upload to avoid timeout error
+          await objectStore.createObject(file, bucketId, { timeout: 0 });
           successfulFiles.value.push(file);
         } catch (error) {
           toast.add({ severity: 'error', summary: 'Error', detail: `Failed to upload file ${file.name}`, life: 3000 });

diff --git a/frontend/src/services/interceptors.ts b/frontend/src/services/interceptors.ts
@@ -2,22 +2,20 @@ import axios from 'axios';
 
 import { AuthService, ConfigService } from './index';
 
-import type { AxiosInstance, InternalAxiosRequestConfig } from 'axios';
+import type { AxiosInstance, AxiosRequestConfig, InternalAxiosRequestConfig } from 'axios';
 
 /**
  * @function comsAxios
  * Returns an Axios instance for the COMS API
- * @param {number} [timeout=10000] Number of milliseconds before timing out the request
+ * @param {AxiosRequestConfig} options Axios request config options
  * @returns {AxiosInstance} An axios instance
  */
-export function comsAxios(timeout: number = 10000): AxiosInstance {
-  const configService = new ConfigService();
-  const axiosOptions = {
-    timeout: timeout,
-    baseURL: configService.getConfig().coms.apiPath,
-  };
-
-  const instance = axios.create(axiosOptions);
+export function comsAxios(options: AxiosRequestConfig = {}): AxiosInstance {
+  const instance = axios.create({
+    baseURL: new ConfigService().getConfig().coms.apiPath,
+    timeout: 10000,
+    ...options
+  });
 
   instance.interceptors.request.use(
     async (cfg: InternalAxiosRequestConfig) => {

diff --git a/frontend/src/services/objectService.ts b/frontend/src/services/objectService.ts
@@ -1,5 +1,6 @@
 import { comsAxios } from './interceptors';
 
+import type { AxiosRequestConfig } from 'axios';
 import type { GetMetadataOptions, GetObjectTaggingOptions, SearchObjectsOptions } from '@/types';
 
 const PATH = '/object';
@@ -8,16 +9,19 @@ export default {
   /**
    * @function createObject
    * Post an object
+   * @param {Any} object Object to be created
+   * @param {String} bucketId Bucket id containing the object
+   * @param {AxiosRequestConfig} axiosOptions Axios request config options
    * @returns {Promise} An axios response
    */
-  createObject(object: any, bucketId?: string) {
+  createObject(object: any, bucketId?: string, axiosOptions?: AxiosRequestConfig) {
     const config = {
       headers: { 'Content-Type': 'multipart/form-data' },
       params: { bucketId: bucketId },
     };
     const fd = new FormData();
     fd.append('file', object);
-    return comsAxios().post(PATH, fd, config);
+    return comsAxios(axiosOptions).post(PATH, fd, config);
   },
 
   /**

diff --git a/frontend/src/store/objectStore.ts b/frontend/src/store/objectStore.ts
@@ -6,6 +6,7 @@ import { objectService } from '@/services';
 import { useAppStore, usePermissionStore } from '@/store';
 import { partition } from '@/utils/utils';
 
+import type { AxiosRequestConfig } from 'axios';
 import type { Ref } from 'vue';
 import type { COMSObject, ObjectSearchPermissionsOptions } from '@/types';
 
@@ -34,10 +35,10 @@ export const useObjectStore = defineStore('object', () => {
   };
 
   // Actions
-  async function createObject(object: any, bucketId?: string) {
+  async function createObject(object: any, bucketId?: string, axiosOptions?: AxiosRequestConfig) {
     try {
       appStore.beginIndeterminateLoading();
-      await objectService.createObject(object, bucketId);
+      await objectService.createObject(object, bucketId, axiosOptions);
     }
     catch (error) {
       toast.add({ severity: 'error', summary: 'Error creating object', detail: error, life: 3000 });