Add cancel all - button

Add an action button to cancel all uploads. It also add the possibility to close the progress component, after the upload, if the oncomplete - method did not set the visibility. Also a minor round glitch was removed (the progress could show 101%).
sascha-karnatz · Dec 15, 2023 · 2064cd2 · 2064cd2
1 parent ca5bdfb
commit 2064cd2
Show file tree

Hide file tree

Showing 11 changed files with 366 additions and 103 deletions.
diff --git a/app/assets/stylesheets/alchemy/_custom-properties.scss b/app/assets/stylesheets/alchemy/_custom-properties.scss
@@ -61,12 +61,13 @@
   --outline-color: var(--color-orange_dark);
 
   --font-color_failed: var(--color-red_medium);
+  --font-color_default: var(--color-text);
 
   --tabs_indicator-color: var(--color-orange_dark);
   --tabs_track-color: var(--color-grey_light);
   --sl-input-label-color: var(--color-text);
 
-  --file-upload_background-color: hsla(0deg, 0%, 70%, 0.8);
+  --file-upload_background-color: hsla(0deg, 0%, 80%, 0.8);
   --file-upload_single-upload-background-color: var(--color-grey_light);
   --file-upload_progress-track-color: var(--color-blue_very_light);
   --file-upload_progress-indicator-color: var(--color-blue_dark);

diff --git a/app/assets/stylesheets/alchemy/upload.scss b/app/assets/stylesheets/alchemy/upload.scss
@@ -52,8 +52,8 @@ alchemy-upload-progress {
   display: grid;
   font-size: var(--font-size_medium);
   gap: var(--spacing-4);
-  grid-template-columns: calc(100% - var(--pogress_value-width)) var(
-      --pogress_value-width
+  grid-template-columns: calc(100% - var(--pogress_value-width)) calc(
+      var(--pogress_value-width) - var(--spacing-2)
     );
   height: auto;
   left: 0;
@@ -69,12 +69,17 @@ alchemy-upload-progress {
     opacity: 1;
   }
 
+  .overall-progress-value {
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+  }
+
   .value-text {
-    color: white;
+    color: var(--font-color_default);
     font-size: var(--font-size_large);
     font-weight: var(--font-weigth_bold);
     min-width: 100px;
-    text-shadow: 0 1px 2px var(--color-grey_dark);
   }
 
   .single-uploads {

diff --git a/app/javascript/alchemy_admin/components/uploader.js b/app/javascript/alchemy_admin/components/uploader.js
@@ -81,19 +81,7 @@ export class Uploader extends AlchemyHTMLElement {
       return fileUpload
     })
 
-    // create progress bar
-    this.uploadProgress = new Progress(fileUploads)
-    this.uploadProgress.onComplete = (status) => {
-      if (status === "successful") {
-        // wait three seconds to see the result of the progressbar
-        setTimeout(() => (this.uploadProgress.visible = false), 1500)
-        setTimeout(() => this.dispatchCustomEvent("Upload.Complete"), 2000)
-      } else {
-        this.dispatchCustomEvent("Upload.Failure")
-      }
-    }
-
-    document.body.append(this.uploadProgress)
+    this._createProgress(fileUploads)
   }
 
   /**
@@ -112,6 +100,27 @@ export class Uploader extends AlchemyHTMLElement {
     request.send(formData)
   }
 
+  /**
+   * create (and maybe remove the old) progress bar - component
+   * @param {FileUpload[]} fileUploads
+   * @private
+   */
+  _createProgress(fileUploads) {
+    if (this.uploadProgress) {
+      this.uploadProgress.cancel()
+      document.body.removeChild(this.uploadProgress)
+    }
+    this.uploadProgress = new Progress(fileUploads)
+    this.uploadProgress.onComplete = (status) => {
+      if (status === "successful" || status === "canceled") {
+        this.uploadProgress.visible = false
+      }
+      this.dispatchCustomEvent(`upload.${status}`)
+    }
+
+    document.body.append(this.uploadProgress)
+  }
+
   /**
    * @returns {HTMLInputElement}
    */

diff --git a/app/javascript/alchemy_admin/components/uploader/file_upload.js b/app/javascript/alchemy_admin/components/uploader/file_upload.js
@@ -43,17 +43,25 @@ export class FileUpload extends AlchemyHTMLElement {
     this.querySelector("button").addEventListener("click", () => this.cancel())
 
     if (this.file?.type.includes("image")) {
-      this._prependImage()
+      const reader = new FileReader()
+      reader.readAsDataURL(this.file)
+      reader.addEventListener("load", () => {
+        const image = new Image()
+        image.src = reader.result
+        this.prepend(image)
+      })
     }
   }
 
   /**
    * cancel the upload
    */
   cancel() {
-    this.status = "canceled"
-    this.request?.abort()
-    this.dispatchCustomEvent("FileUpload.Change")
+    if (!this.finished) {
+      this.status = "canceled"
+      this.request?.abort()
+      this.dispatchCustomEvent("FileUpload.Change")
+    }
   }
 
   /**
@@ -122,20 +130,6 @@ export class FileUpload extends AlchemyHTMLElement {
     }
   }
 
-  /**
-   * add the file as image
-   * @private
-   */
-  _prependImage() {
-    const reader = new FileReader()
-    reader.readAsDataURL(this.file)
-    reader.addEventListener("load", () => {
-      const image = new Image()
-      image.src = reader.result
-      this.prepend(image)
-    })
-  }
-
   /**
    * @returns {boolean}
    */