Merge pull request #4143 from AlchemyCMS/uploader-progress-in-dropzone

fix(uploader): render upload progress inside the dropzone

Author: tvdeyen

app/assets/builds/alchemy/admin.css

@@ -3,20 +3,21 @@ module Admin
     class UploaderButton < ViewComponent::Base
       delegate :alchemy, to: :helpers
 
-      attr_reader :object, :file_attribute, :accept, :dropzone, :redirect_url, :inline_label
+      attr_reader :object, :file_attribute, :accept, :dropzone, :redirect_url, :layout, :inline_label
 
-      def initialize(object:, file_attribute:, redirect_url:, accept: nil, dropzone: nil, label: nil, inline_label: false)
+      def initialize(object:, file_attribute:, redirect_url:, accept: nil, dropzone: nil, label: nil, layout: nil, inline_label: false)
         @object = object
         @file_attribute = file_attribute
         @redirect_url = redirect_url
         @dropzone = dropzone || "#main_content"
         @label = label
+        @layout = layout
         @accept = accept || ((file_types.to_a == ["*"]) ? nil : file_types.map { |type| ".#{type}" }.join(", "))
         @inline_label = inline_label
       end
 
       def call
-        content_tag "alchemy-uploader", "redirect-url": redirect_url, dropzone: do
+        content_tag "alchemy-uploader", "redirect-url": redirect_url, dropzone:, layout: do
           form_for [alchemy, :admin, object], html: {multipart: true, class: "upload-button"} do |f|
             safe_join([upload_hash_field(f), file_input(f), upload_label(f)].compact)
           end

app/assets/builds/alchemy/alchemy_admin.min.js

@@ -154,23 +154,37 @@ export class Uploader extends HTMLElement {
   #createProgress(fileUploads) {
     if (this.uploadProgress) {
       this.uploadProgress.cancel()
-      document.body.removeChild(this.uploadProgress)
+      this.uploadProgress.remove()
     }
     this.uploadProgress = new Progress()
     this.uploadProgress.initialize(fileUploads)
+    this.uploadProgress.setAttribute("layout", this.layout)
     this.uploadProgress.onComplete = (status) => {
       this.dispatchEvent(
         new CustomEvent(`Alchemy.upload.${status}`, { bubbles: true })
       )
     }
 
-    document.body.append(this.uploadProgress)
+    this.#progressContainer.append(this.uploadProgress)
+  }
+
+  // The dropzone doubles as the progress container so the upload indicators
+  // render inside the archive (and inside dialogs). Falls back to the body for
+  // uploaders without a dropzone (e.g. the attachment replace button).
+  get #progressContainer() {
+    return this.#dropzoneElement ?? document.body
   }
 
   get dropzone() {
     return this.getAttribute("dropzone")
   }
 
+  // Shape of the upload indicators. Defaults to "row" so uploads fit naturally
+  // into resource table views; set layout="card" for the thumbnail grid.
+  get layout() {
+    return this.getAttribute("layout") || "row"
+  }
+
   /**
    * @returns {HTMLInputElement}
    */

app/assets/builds/alchemy/alchemy_admin.min.js.map

@@ -96,6 +96,7 @@ div#overlay_text_box {
   padding-right: var(--spacing-2);
   padding-bottom: var(--spacing-2);
   padding-left: calc(var(--main-menu-width) + var(--spacing-2));
+  position: relative;
   z-index: 0;
   width: 100%;
   height: 100%;

app/components/alchemy/admin/uploader_button.rb

@@ -41,6 +41,16 @@
   }
 }
 
+// #main_content scrolls, so the absolute drop indicator (pinned to the top of
+// the scrollable content) scrolls out of view. Pin it to the visible viewport
+// area instead, inset past the top and main menu.
+#main_content.dragover::after {
+  position: fixed;
+  inset: var(--top-menu-height) 0 0 var(--main-menu-width);
+  width: auto;
+  height: auto;
+}
+
 alchemy-upload-progress {
   --border-radius: var(--border-radius_medium);
   --pogress_value-width: calc(232px - var(--spacing-2));
@@ -55,9 +65,13 @@ alchemy-upload-progress {
     );
   height: auto;
   left: 0;
+  max-height: 100%;
   opacity: 0;
+  // Only scroll vertically; setting overflow-y alone forces overflow-x to auto,
+  // which shows a spurious horizontal scrollbar for the grid's sub-pixel overflow.
+  overflow: hidden auto;
   padding: var(--spacing-4);
-  position: fixed;
+  position: absolute;
   transition: var(--transition-duration) ease-in-out;
   width: 100%;
   z-index: 150;
@@ -161,6 +175,52 @@ alchemy-upload-progress {
   }
 }
 
+// Inside the scrolling, menu-padded #main_content (a z-index:0 stacking context
+// below the fixed main menu) an absolutely positioned progress hides behind the
+// menu and scrolls away. Pin it to the viewport, inset past the main menu.
+#main_content > alchemy-upload-progress {
+  position: fixed;
+  left: var(--main-menu-width);
+  right: 0;
+  width: auto;
+}
+
+// Mimic the picture archive grid: each upload is a thumbnail-shaped card.
+alchemy-upload-progress[layout="card"] {
+  .single-uploads {
+    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
+  }
+
+  alchemy-file-upload {
+    flex-direction: column;
+    align-items: stretch;
+    text-align: center;
+
+    img {
+      height: 120px;
+      width: 100%;
+    }
+
+    .description {
+      align-self: stretch;
+    }
+
+    button {
+      position: absolute;
+      top: var(--spacing-1);
+      right: var(--spacing-1);
+      margin-left: 0;
+    }
+  }
+}
+
+// Default: each upload is a stacked row, fitting resource table views.
+alchemy-upload-progress[layout="row"] {
+  .single-uploads {
+    grid-template-columns: 1fr;
+  }
+}
+
 .successful {
   --file-upload_progress-indicator-color: var(
     --file-upload_progress-indicator-color-successful

app/javascript/alchemy_admin/components/uploader.js

@@ -6,6 +6,7 @@
         dropzone: '#assign_image_list',
         inline_label: true,
         file_attribute: 'image_file',
+        layout: 'card',
         redirect_url: alchemy.admin_pictures_path(
           size: search_filter_params[:size],
           q: { last_upload: true },

app/stylesheets/alchemy/admin/frame.scss

@@ -5,6 +5,7 @@
         <%= render Alchemy::Admin::UploaderButton.new(
           object: Alchemy::Picture.new,
           file_attribute: 'image_file',
+          layout: 'card',
           redirect_url: alchemy.admin_pictures_path(
             size: @size,
             q: { last_upload: true }

app/stylesheets/alchemy/admin/upload.scss

@@ -7,4 +7,5 @@
   redirect_url:,
   accept: local_assigns[:accept],
   dropzone: local_assigns[:dropzone],
+  layout: local_assigns[:layout],
   label: local_assigns[:label]) %>