From da0b653582b7ecd1d0fe350e4819f4cc60d5812c Mon Sep 17 00:00:00 2001
From: Thaum Rystra <9525416+ThaumRystra@users.noreply.github.com>
Date: Thu, 29 Aug 2024 15:54:52 +0200
Subject: [PATCH] Fixed upload state in image uploads

---
 .../client/ui/components/ImageUploadInput.vue | 43 ++++++++++---------
 .../ui/components/global/SmartImageInput.vue  |  2 +-
 app/imports/client/ui/pages/Files.vue         |  2 +
 3 files changed, 26 insertions(+), 21 deletions(-)

diff --git a/app/imports/client/ui/components/ImageUploadInput.vue b/app/imports/client/ui/components/ImageUploadInput.vue
index 1800ab28..c111d7a5 100644
--- a/app/imports/client/ui/components/ImageUploadInput.vue
+++ b/app/imports/client/ui/components/ImageUploadInput.vue
@@ -4,7 +4,7 @@
     class="image-upload-button ma-1"
     v-bind="$attrs"
     :color="fileUploadError ? 'error' : undefined"
-    :disabled="fileUploadInProgress"
+    :disabled="uploadingInProgress"
     @click="$refs.hiddenFileInput.click()"
   >
     <v-icon left>
@@ -17,9 +17,9 @@
       Upload Image
     </template>
     <v-progress-linear
-      v-if="fileUploadInProgress"
-      :value="fileUploadProgress"
-      :indeterminate="fileUploadIndeterminate"
+      v-if="uploadingInProgress"
+      :value="uploadingInProgress"
+      :indeterminate="uploadIndeterminate"
     />
     <input
       ref="hiddenFileInput"
@@ -39,6 +39,7 @@ export default {
     progress: 0,
     file: undefined,
     uploadingInProgress: false,
+    fileUploadError: undefined,
   }},
   watch: {
     file(file){
@@ -50,41 +51,37 @@ export default {
         allowWebWorkers: true
       }, false)
 
+      self.uploadingInProgress = true;
+      self.uploadIndeterminate = true;
+
       uploadInstance.on('start', function () {
-        console.log('Starting');
-        this.uploadingInProgress = true;
+        self.progress = 0;
+        self.uploadIndeterminate = false;
       });
 
       uploadInstance.on('end', function (error, fileObj) {
-        console.log('On end File Object: ', fileObj);
-        this.uploadingInProgress = false;
+        self.resetState();
         self.$emit('uploaded', UserImages.link(fileObj));
       });
 
       uploadInstance.on('uploaded', function (error, fileObj) {
-        console.log('uploaded: ', fileObj);
-
         // Remove the file from the input box
         self.file = undefined;
-
-        // Reset our state for the next file
-        self.uploadingInProgress = false;
+        self.resetState();
         self.progress = 0;
       });
 
       uploadInstance.on('error', function (error, fileObj) {
         // Remove the file from the input box
         self.file = undefined;
-
-        // Reset our state for the next file
-        self.uploadingInProgress = false;
-        self.progress = 0;
-        console.log('Error during upload: ' + error, fileObj)
+        self.resetState();
+        this.fileUploadError = error.reason || error.message || error.toString();
       });
 
       uploadInstance.on('progress', function (progress, fileObj) {
         console.log('Upload Percentage: ' + progress, fileObj)
-        // Update our progress bar
+        // Update our progress bar with actual progress
+        self.uploadIndeterminate = false;
         self.progress = progress;
       });
 
@@ -98,7 +95,13 @@ export default {
       if (!selectedFiles) return;
       this.file = selectedFiles[0];
       return;
-    }
+    },
+    resetState() {
+      this.file = undefined;
+      this.uploadingInProgress = false;
+      this.progress = 0;
+      this.fileUploadError = undefined;
+    },
   },
 
 }
diff --git a/app/imports/client/ui/components/global/SmartImageInput.vue b/app/imports/client/ui/components/global/SmartImageInput.vue
index be98708e..1228dbc7 100644
--- a/app/imports/client/ui/components/global/SmartImageInput.vue
+++ b/app/imports/client/ui/components/global/SmartImageInput.vue
@@ -166,7 +166,7 @@ export default {
 }
 .image {
   min-height: 100px;
-  max-height: 400px;
+  max-height: 300px;
   max-width: 100%;
   margin-bottom: -7px;
 }
diff --git a/app/imports/client/ui/pages/Files.vue b/app/imports/client/ui/pages/Files.vue
index 062c5896..1325159f 100644
--- a/app/imports/client/ui/pages/Files.vue
+++ b/app/imports/client/ui/pages/Files.vue
@@ -126,6 +126,8 @@ import ImageField from '/imports/client/ui/properties/viewers/shared/ImageField.
 import SmartImageInput from '/imports/client/ui/components/global/SmartImageInput.vue';
 
 // TODO Mark files that don't have versions.${version}.meta.pipePath set as broken links
+// TODO show user images
+// TODO delete, rename, etc. user images
 
 export default {
   components: {