Show file upload status

Catch COMS error and show toast at component level
Simplify fileUpload template

.github/CODEOWNERS

@@ -1,4 +1,4 @@
 # These users will be the default owners for everything in the repo.
 # Unless a later match takes precedence, the following users will be
 # requested for review when someone opens a pull request.
-* @jujaga @kyle1morel @TimCsaky @wilwong89 @jatindersingh93 @norrisng-bc
+* @kyle1morel @TimCsaky @wilwong89 @jatindersingh93 @norrisng-bc

frontend/src/components/object/ObjectUpload.vue

@@ -63,10 +63,16 @@ const onUpload = async (event: any) => {
           );
           successfulFiles.value.push(file);
         } catch (error: any) {
-          toast.error(`Failed to upload file ${file.name}`, error);
+          // show toasts
+          if (error?.response?.status === 409) {
+            toast.error(`Failed to upload file ${file.name}`, 'File already exists');
+          } else {
+            toast.error(`Failed to upload file ${file.name}`, error);
+          }
           failedFiles.value.push(file);
         } finally {
           appStore.endUploading();
+          appStore.endIndeterminateLoading();
         }
       })
     );
@@ -156,18 +162,8 @@ const submitObjectMetaTagConfig = (values: Array<ObjectMetadataTagFormType>) =>
         />
         <p class="mt-4 mb-0">Drag and drop files here to select for upload. Then click "Start upload".</p>
       </div>
-      <ObjectUploadFile
-        :files="successfulFiles"
-        :badge-props="{ value: 'Complete', severity: 'success' }"
-        :remove-callback="onRemoveUploadedFile"
-      />
-      <ObjectUploadFile
-        :files="failedFiles"
-        :badge-props="{ value: 'Failed', severity: 'danger' }"
-        :remove-callback="onRemoveFailedFile"
-      />
     </template>
-    <template #content="{ files, uploadedFiles, removeFileCallback, removeUploadedFileCallback }">
+    <template #content="{ files, removeFileCallback }">
       <ObjectUploadFile
         :editable="true"
         :files="files || pendingFiles"
@@ -177,14 +173,14 @@ const submitObjectMetaTagConfig = (values: Array<ObjectMetadataTagFormType>) =>
         @submit-object-metadatatag-config="submitObjectMetaTagConfig"
       />
       <ObjectUploadFile
-        :files="uploadedFiles || successfulFiles"
+        :files="successfulFiles"
         :badge-props="{ value: 'Complete', severity: 'success' }"
-        :remove-callback="removeUploadedFileCallback"
+        :remove-callback="onRemoveUploadedFile"
       />
       <ObjectUploadFile
         :files="failedFiles"
         :badge-props="{ value: 'Failed', severity: 'danger' }"
-        :remove-callback="removeUploadedFileCallback"
+        :remove-callback="onRemoveFailedFile"
       />
     </template>
   </FileUpload>

frontend/src/store/objectStore.ts

@@ -51,28 +51,17 @@ export const useObjectStore = defineStore('object', () => {
     },
     axiosOptions?: AxiosRequestConfig
   ) {
-    try {
-      appStore.beginIndeterminateLoading();
+    appStore.beginIndeterminateLoading();
 
-      // Ensure x-amz-meta- prefix exists
-      if (headers.metadata) {
-        for (const meta of headers.metadata) {
-          if (!meta.key.startsWith('x-amz-meta-')) {
-            meta.key = `x-amz-meta-${meta.key}`;
-          }
+    // Ensure x-amz-meta- prefix exists
+    if (headers.metadata) {
+      for (const meta of headers.metadata) {
+        if (!meta.key.startsWith('x-amz-meta-')) {
+          meta.key = `x-amz-meta-${meta.key}`;
         }
       }
-
-      await objectService.createObject(object, headers, params, axiosOptions);
-    } catch (error: any) {
-      if (error?.response?.status === 409) {
-        toast.error('Creating object', 'File already exists');
-      } else {
-        toast.error('Creating object', error);
-      }
-    } finally {
-      appStore.endIndeterminateLoading();
     }
+    await objectService.createObject(object, headers, params, axiosOptions);
   }
 
   async function deleteObject(objectId: string, versionId?: string) {

frontend/tests/unit/store/objectStore.spec.ts

@@ -113,7 +113,6 @@ describe('Object Store', () => {
         },
         { timeout: 0 }
       );
-      expect(endIndeterminateLoadingSpy).toHaveBeenCalledTimes(1);
     });
   });