lato_cms 3.2.1 → 3.2.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 33e3be18772b49e7523f66ee62e85d74ca3cbdaf6e6b0f9f39e0abeeb48dbea4
-  data.tar.gz: e32a97e06e949782083f87f951cba818c9372f17169703eec90cbb741cabba94
+  metadata.gz: 25204dad4edacdca80789144382c513eb02da298f4bbad559552d3d4ad3616c1
+  data.tar.gz: 48de425da30efd01481cee27f556da6429049862a987d63087d645b156f85d78
 SHA512:
-  metadata.gz: f7ec56fd1e21c2ac94d1c4fee8cac7575f1f09eddc045f64c3f39aa603ad72d07f9f4ed0799edec2b1cc734d8dc690e389f8e374eae4d50436521cd4fd5ad4ac
-  data.tar.gz: 217698bd6d223e2abfee2c937cffb2e380b5340b5f60c548600a624bb0ad8d92c689f1e14b188c71c2fd754088c5db4bb568921efa98b7ff9ef33efb7270a182
+  metadata.gz: 8db389eef91bc7ee627a5f91f57ae02872bcb7317706d6cdc89b9ff8040efbf1a6ab6a467681bb330e0cae415796885646afdeabbe87e9023ece8bc9beab91bc
+  data.tar.gz: 544be385fbb01838f1df124fb3582dc553f5bddbf2b18dbe1a7ff9ba4fb7d8a694bc8fb341473246d7327094140d191e002cf32d93f9e3d5dab0b545a2a49ace

data/app/assets/javascripts/lato_cms/controllers/lato_cms_media_picker_controller.js

@@ -6,7 +6,7 @@ import { Controller } from '@hotwired/stimulus'
 // `lato-cms:media-selected` event on `document`, correlated by the picker's
 // own turbo-frame id (unique per field instance, even inside a repeater).
 export default class extends Controller {
-  static targets = ['grid', 'item', 'selectedCount', 'confirmButton', 'uploadForm', 'uploadNotice']
+  static targets = ['grid', 'item', 'selectedCount', 'confirmButton', 'uploadNotice']
   static values = { multiple: Boolean, selectedLabel: String }
 
   connect () {
@@ -41,22 +41,11 @@ export default class extends Controller {
     this.closeModal()
   }
 
-  async upload (event) {
-    event.preventDefault()
-
-    const form = event.currentTarget
-    const response = await fetch(form.action, {
-      method: 'POST',
-      headers: { Accept: 'application/json' },
-      body: new FormData(form)
-    })
-    const data = await response.json()
-
-    if (!response.ok) {
-      this.uploadNoticeTarget.innerHTML = `<div class="alert alert-danger">${Object.values(data).flat().join(', ')}</div>`
-      return
-    }
-
+  // Result of the XHR upload driven by `lato-cms-upload` (which owns the
+  // request and its progress bar); this only turns the created media into a
+  // selection.
+  uploadCompleted (event) {
+    const data = event.detail
     const item = {
       id: data.id,
       name: data.name,
@@ -74,10 +63,13 @@ export default class extends Controller {
 
     this.pending.set(item.id, item)
     this.updateSelectionUi()
-    form.reset()
     this.uploadNoticeTarget.innerHTML = `<div class="alert alert-success">${item.name}</div>`
   }
 
+  uploadFailed (event) {
+    this.uploadNoticeTarget.innerHTML = `<div class="alert alert-danger">${event.detail.message}</div>`
+  }
+
   buildItemFromElement (element) {
     return {
       id: element.dataset.mediaId,

data/app/assets/javascripts/lato_cms/controllers/lato_cms_upload_controller.js

@@ -0,0 +1,91 @@
+import { Controller } from '@hotwired/stimulus'
+
+// Submits a file form over XHR so the real upload progress can be shown.
+// Neither of the two alternatives can: a plain form submit just freezes the
+// page until the server answers, and `fetch` exposes no upload progress
+// events at all (only download ones). Large videos made that gap obvious.
+//
+// On success it dispatches `lato-cms:upload-complete` on the form with the
+// parsed JSON body (the media picker uses it to select the fresh media), or
+// navigates to `redirectUrlValue` when the form is a standalone page.
+export default class extends Controller {
+  static targets = ['progress', 'bar', 'label', 'submit', 'notice']
+  static values = { redirectUrl: String, processingLabel: String, confirm: String }
+
+  submit (event) {
+    // This handler owns the submission, so Turbo never sees it and
+    // `data-turbo-confirm` would never fire: the confirmation is asked here.
+    event.preventDefault()
+    if (this.confirmValue && !window.confirm(this.confirmValue)) return
+
+    const xhr = new window.XMLHttpRequest()
+    xhr.open('POST', this.element.action, true)
+    xhr.setRequestHeader('Accept', 'application/json')
+    xhr.upload.addEventListener('progress', (e) => {
+      if (e.lengthComputable) this.setProgress((e.loaded / e.total) * 100)
+    })
+    xhr.addEventListener('load', () => this.finish(xhr))
+    xhr.addEventListener('error', () => this.fail())
+
+    this.start()
+    xhr.send(new window.FormData(this.element))
+  }
+
+  start () {
+    this.clearNotice()
+    if (this.hasSubmitTarget) this.submitTarget.disabled = true
+    if (this.hasProgressTarget) this.progressTarget.classList.remove('d-none')
+    this.setProgress(0)
+  }
+
+  // Past 100% the bytes are in, but the server is still attaching and
+  // processing them: the bar stays full and animated, the label says so.
+  setProgress (percent) {
+    const value = Math.round(percent)
+    if (this.hasBarTarget) this.barTarget.style.width = `${value}%`
+    if (this.hasLabelTarget) this.labelTarget.textContent = value >= 100 ? this.processingLabelValue : `${value}%`
+  }
+
+  finish (xhr) {
+    const data = this.parse(xhr.responseText)
+
+    if (xhr.status < 200 || xhr.status >= 300) {
+      this.fail(data)
+      return
+    }
+
+    if (this.redirectUrlValue) {
+      window.Turbo.visit(this.redirectUrlValue)
+      return
+    }
+
+    this.reset()
+    this.element.reset()
+    this.element.dispatchEvent(new CustomEvent('lato-cms:upload-complete', { bubbles: true, detail: data }))
+  }
+
+  fail (data) {
+    this.reset()
+    const message = data ? Object.values(data).flat().join(', ') : ''
+    this.element.dispatchEvent(new CustomEvent('lato-cms:upload-error', { bubbles: true, detail: { message } }))
+    if (this.hasNoticeTarget) this.noticeTarget.innerHTML = `<div class="alert alert-danger">${message}</div>`
+  }
+
+  reset () {
+    if (this.hasSubmitTarget) this.submitTarget.disabled = false
+    if (this.hasProgressTarget) this.progressTarget.classList.add('d-none')
+    this.setProgress(0)
+  }
+
+  clearNotice () {
+    if (this.hasNoticeTarget) this.noticeTarget.innerHTML = ''
+  }
+
+  parse (body) {
+    try {
+      return JSON.parse(body)
+    } catch (err) {
+      return null
+    }
+  }
+}

data/app/controllers/lato_cms/media_controller.rb

@@ -1,14 +1,19 @@
 module LatoCms
   class MediaController < ApplicationController
-    ADMIN_ONLY_ACTIONS = %i[destroy_action].freeze
+    ADMIN_ONLY_ACTIONS = %i[replace_file_action destroy_action].freeze
 
     before_action { active_sidebar(:lato_cms_media) }
     before_action :authenticate_lato_cms_admin, only: ADMIN_ONLY_ACTIONS
 
     def index
+      media = query_media
+      # "Unused" = no page field references it at all: the only media that can
+      # be deleted, so it's worth being able to list just those.
+      media = media.where.missing(:page_field_media) if params[:usage] == 'unused'
+
       @media = lato_index_collection(
-        query_media.order(created_at: :desc),
-        columns: %i[name media_type actions],
+        media.order(created_at: :desc),
+        columns: %i[name media_type usages actions],
         sortable_columns: %i[name media_type created_at],
         searchable_columns: %i[name alt_text title],
         default_sort_by: 'created_at|DESC',
@@ -26,6 +31,13 @@ module LatoCms
       @media = media.order(created_at: :desc).page(params[:page]).per(24)
     end
 
+    # Read-only detail page: the media's own data plus where it's used. Kept
+    # apart from the edit form, which is a modal from the index and has no room
+    # for a usage list.
+    def show
+      @media = query_media.find(params[:id])
+    end
+
     def create
       @media = LatoCms::Media.new
     end
@@ -35,6 +47,12 @@ module LatoCms
 
       respond_to do |format|
         if @media.save
+          # The JSON branch serves XHR uploads (progress bar, see
+          # lato_cms_upload_controller.js). `notify` is sent only by forms that
+          # navigate somewhere afterwards, so the flash lands on that page; the
+          # media picker uploads in place and asks for no flash.
+          flash[:notice] = t('lato_cms.media_created') if params[:notify].present?
+
           format.html { redirect_to lato_cms.media_path, notice: t('lato_cms.media_created') }
           format.json { render json: @media }
         else
@@ -89,6 +107,34 @@ module LatoCms
       end
     end
 
+    # Replaces the file of an existing media in place, so every page already
+    # using it picks up the new file. Kept out of `update_action` (and off
+    # `update_params`) on purpose: this is a destructive, admin-only edit to
+    # every usage at once, not a metadata change.
+    def replace_file_action
+      @media = query_media.find(params[:id])
+      file = params.dig(:media, :file)
+
+      respond_to do |format|
+        if file.present? && @media.replace_file!(file)
+          format.html { redirect_to lato_cms.media_show_path(@media), notice: t('lato_cms.media_file_replaced') }
+          format.json { render json: @media }
+        else
+          message = t('lato_cms.media_file_replace_failed')
+          format.html { redirect_to lato_cms.media_update_path(@media), alert: message }
+          format.json { render json: { error: message }, status: :unprocessable_entity }
+        end
+      end
+    rescue StandardError => e
+      Rails.logger.error("LatoCms: failed to replace file for media #{params[:id]}: #{e.message}")
+      message = t('lato_cms.media_file_replace_failed')
+
+      respond_to do |format|
+        format.html { redirect_to lato_cms.media_update_path(@media), alert: message }
+        format.json { render json: { error: message }, status: :unprocessable_entity }
+      end
+    end
+
     def destroy_action
       @media = query_media.find(params[:id])
       in_use = @media.usage_count.positive?
@@ -112,10 +158,10 @@ module LatoCms
       params.require(:media).permit(:file, :name, :alt_text, :title)
     end
 
-    # :file is intentionally not permitted here: the underlying file is
-    # immutable once a Media exists (it can be reused by many fields across
-    # many pages, so replacing it in place would silently change what renders
-    # everywhere it's referenced). A different file means a new Media.
+    # :file is intentionally not permitted here: a media can be reused by many
+    # fields across many pages, so swapping its file silently changes what
+    # renders everywhere it's referenced. That swap is possible, but only
+    # through the explicit, admin-only `replace_file_action`.
     def update_params
       translation_keys = LatoCms::Media::TRANSLATABLE_ATTRIBUTES.product(LatoCms.config.locales).map { |attribute, locale| :"#{attribute}_#{locale}" }
       params.require(:media).permit(:name, *translation_keys)

data/app/helpers/lato_cms/media_helper.rb

@@ -30,21 +30,42 @@ module LatoCms
       end
     end
 
+    # Index usages cell: how many page fields reference this media, so the
+    # admin sees at a glance which files are actually in use (the detail is in
+    # the edit form, which lists the pages).
+    def lato_cms_media_usages(media)
+      count = media.usage_count
+      return content_tag(:span, t('lato_cms.media_usages_none'), class: 'text-muted small') if count.zero?
+
+      content_tag(:span, t('lato_cms.media_usages_count', count: count), class: 'badge bg-info text-dark')
+    end
+
     def lato_cms_media_media_type(media)
       content_tag(:span, media.media_type, class: 'badge bg-secondary')
     end
 
-    # Index actions cell: edit metadata + delete (delete gated to admins, same
-    # convention as pages).
+    # Index actions cell: detail page + edit metadata + delete (delete gated to
+    # admins, same convention as pages). Delete is rendered inert while the
+    # media is still referenced: the action would be refused server-side
+    # anyway, so the button says why instead of failing after the fact.
     def lato_cms_media_actions(media)
       content_tag(:div, class: 'btn-group btn-group-sm') do
+        concat link_to(t('lato_cms.cta_show'), lato_cms.media_show_path(media), class: 'btn btn-primary')
         concat link_to(t('lato_cms.cta_edit'), lato_cms.media_update_path(media), class: 'btn btn-secondary',
           data: { lato_action_target: 'trigger', turbo_frame: dom_id(media, 'form'), action_title: t('lato_cms.media_update_title') })
-        if lato_cms_admin?
-          concat link_to(t('lato_cms.cta_delete'), lato_cms.media_destroy_action_path(media), class: 'btn btn-danger',
-            data: { turbo_method: 'DELETE', turbo_confirm: t('lato_cms.cta_delete_confirm') })
-        end
+        concat lato_cms_media_delete_action(media) if lato_cms_admin?
       end
     end
+
+    private
+
+    def lato_cms_media_delete_action(media)
+      usage_count = media.usage_count
+      return link_to(t('lato_cms.cta_delete'), lato_cms.media_destroy_action_path(media), class: 'btn btn-danger',
+        data: { turbo_method: 'DELETE', turbo_confirm: t('lato_cms.cta_delete_confirm') }) if usage_count.zero?
+
+      content_tag(:span, t('lato_cms.cta_delete'), class: 'btn btn-danger disabled',
+        title: t('lato_cms.media_delete_in_use', count: usage_count), data: { controller: 'lato-tooltip' })
+    end
   end
 end

data/app/helpers/lato_cms/pages_helper.rb

@@ -126,9 +126,18 @@ module LatoCms
       multiple ? "#{name}[]" : name
     end
 
+    # Sanitizes only: `parameterize` also downcased, which silently broke the
+    # repeater's "NEW_RECORD" placeholder. The repeater JS swaps that literal
+    # for a fresh uuid when an item is added (see
+    # lato_cms_repeater_controller#add), but it never reached the JS as
+    # "NEW_RECORD" — it arrived lowercased inside every dom id and, worse,
+    # inside each media field's picker frame id. Every item added in one
+    # session therefore shared those ids, and since the picker correlates its
+    # selection event by frame id, choosing a media for one item dropped it
+    # into all of them at once.
     def lato_cms_field_dom_id(field_id, suffix = 'value', dom_id_prefix: nil)
       base = dom_id_prefix.presence || "fields_#{field_id}"
-      "#{base}_#{suffix}".parameterize(separator: '_')
+      "#{base}_#{suffix}".gsub(/[^a-zA-Z0-9_]/, '_')
     end
 
     private

data/app/models/lato_cms/media.rb

@@ -78,6 +78,14 @@ module LatoCms
       page_field_media.count
     end
 
+    # Every page field referencing this media, grouped by page (sorted by page
+    # title). Drives the "used in" list in the admin: a media is shared, so
+    # both deleting it and replacing its file are edits to every page listed
+    # here, and the admin has to see that before doing either.
+    def usages
+      page_fields.includes(:page).group_by(&:page).sort_by { |page, _fields| page.title.to_s.downcase }
+    end
+
     def filename
       file.filename.to_s if file.attached?
     end
@@ -119,6 +127,22 @@ module LatoCms
       Rails.application.routes.url_helpers.rails_blob_path(poster_file, only_path: true) if poster_file.attached?
     end
 
+    # Swaps the underlying file while keeping the same record, so every field
+    # already referencing this media renders the new file: the point of the
+    # action (replace a logo everywhere at once) and its danger at the same
+    # time. Active Storage purges the previous blob on attach, the stale video
+    # poster is dropped explicitly, and media_type is re-inferred since the
+    # new file can be of a different kind. Variants need no cleanup: they are
+    # derived from the blob, so the old ones die with it.
+    def replace_file!(new_file)
+      file.attach(new_file)
+      poster_file.purge if poster_file.attached?
+      update!(media_type: self.class.infer_media_type(file.content_type))
+      enqueue_poster_generation if video?
+
+      true
+    end
+
     # Best effort: generates a poster from the video via Active Storage previews
     # (ffmpeg). Any failure is logged, the video keeps working without a poster.
     def generate_video_poster!

data/app/views/lato_cms/media/_form_create.html.erb

@@ -1,9 +1,21 @@
 <% media ||= LatoCms::Media.new %>
 
 <%= turbo_frame_tag dom_id(media, 'form') do %>
-  <%= form_with model: media, url: lato_cms.media_create_action_path, data: { turbo_frame: '_self', controller: 'lato-form' } do |form| %>
+  <%# Submitted over XHR (see lato-cms-upload) to show upload progress; the
+      `notify` flag asks the JSON branch to leave a flash for the page we
+      navigate to once the upload is done. %>
+  <%= form_with model: media, url: lato_cms.media_create_action_path, data: {
+    turbo_frame: '_self',
+    controller: 'lato-form lato-cms-upload',
+    action: 'submit->lato-cms-upload#submit',
+    lato_cms_upload_redirect_url_value: lato_cms.media_path,
+    lato_cms_upload_processing_label_value: t('lato_cms.media_upload_processing')
+  } do |form| %>
     <%= lato_form_notices class: %w[mb-3] %>
     <%= lato_form_errors media, class: %w[mb-3] %>
+    <%= hidden_field_tag :notify, true %>
+
+    <div data-lato-cms-upload-target="notice"></div>
 
     <%# Name/alt text are edited afterwards from this same list's "edit"
         action — they default to the filename on upload, so there's nothing
@@ -13,8 +25,10 @@
       <%= lato_form_item_input_file_dropzone form, :file %>
     </div>
 
+    <%= render 'lato_cms/media/upload_progress' %>
+
     <div class="d-flex justify-content-end">
-      <%= lato_form_submit form, t('lato_cms.media_create_cta'), class: %w[btn-success] %>
+      <%= lato_form_submit form, t('lato_cms.media_create_cta'), class: %w[btn-success], data: { lato_cms_upload_target: 'submit' } %>
     </div>
   <% end %>
 <% end %>

data/app/views/lato_cms/media/_form_replace_file.html.erb

@@ -0,0 +1,25 @@
+<%# Swaps the file behind an existing media: every page using it renders the
+    new file. Deliberately not part of the metadata form (different action,
+    admin only, destructive across every usage). %>
+<p class="text-muted small">
+  <%= t('lato_cms.media_replace_file_description', count: media.usage_count) %>
+</p>
+
+<%= form_with model: media, url: lato_cms.media_replace_file_action_path(media), method: :patch, data: {
+  controller: 'lato-cms-upload',
+  action: 'submit->lato-cms-upload#submit',
+  lato_cms_upload_redirect_url_value: lato_cms.media_show_path(media),
+  lato_cms_upload_processing_label_value: t('lato_cms.media_upload_processing'),
+  lato_cms_upload_confirm_value: t('lato_cms.media_replace_file_confirm')
+} do |form| %>
+  <div data-lato-cms-upload-target="notice"></div>
+
+  <%= lato_form_item_input_file_dropzone form, :file %>
+  <%= render 'lato_cms/media/upload_progress' %>
+
+  <div class="d-flex justify-content-end">
+    <button type="submit" class="btn btn-warning" data-lato-cms-upload-target="submit">
+      <%= t('lato_cms.media_replace_file_cta') %>
+    </button>
+  </div>
+<% end %>

data/app/views/lato_cms/media/_form_update.html.erb

@@ -1,42 +1,54 @@
 <% media ||= LatoCms::Media.new %>
+<% tab_id = dom_id(media, 'tab') %>
 
 <%= turbo_frame_tag dom_id(media, 'form') do %>
-  <%= form_with model: media, url: lato_cms.media_update_action_path(media), method: :patch, data: { turbo_frame: '_self', controller: 'lato-form lato-cms-reload-on-modal-close' } do |form| %>
-    <%= lato_form_notices class: %w[mb-3] %>
-    <%= lato_form_errors media, class: %w[mb-3] %>
+  <%# Two tabs: the metadata form, and the file swap — same media, but editing
+      its name is a local change while replacing its file edits every page
+      using it, so they don't share a submit button. %>
+  <ul class="nav nav-tabs mb-3">
+    <li class="nav-item">
+      <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#<%= tab_id %>_details" type="button">
+        <%= t('lato_cms.media_update_tab_details') %>
+      </button>
+    </li>
+    <% if lato_cms_admin? %>
+      <li class="nav-item">
+        <button class="nav-link" data-bs-toggle="tab" data-bs-target="#<%= tab_id %>_replace" type="button">
+          <%= t('lato_cms.media_replace_file_title') %>
+        </button>
+      </li>
+    <% end %>
+  </ul>
 
-    <%# Preview: images/videos get a large view (the index thumbnail is too small
-        to judge a file by), everything else keeps the small type icon. %>
-    <div class="mb-3">
-      <% if media.image? %>
-        <%= link_to media.url, target: '_blank', rel: 'noopener', title: t('lato_cms.media_open_original'),
-          class: 'd-block bg-light rounded overflow-hidden' do %>
-          <%= image_tag media.preview_url, class: 'd-block mx-auto', style: 'max-width: 100%; max-height: 420px;', alt: media.alt_text %>
-        <% end %>
-      <% elsif media.video? %>
-        <video controls preload="metadata" class="d-block w-100 rounded bg-black" style="max-height: 420px;" src="<%= media.url %>"></video>
-      <% end %>
+  <div class="tab-content">
+    <div class="tab-pane fade show active" id="<%= tab_id %>_details">
+      <%= form_with model: media, url: lato_cms.media_update_action_path(media), method: :patch, data: { turbo_frame: '_self', controller: 'lato-form lato-cms-reload-on-modal-close' } do |form| %>
+        <%= lato_form_notices class: %w[mb-3] %>
+        <%= lato_form_errors media, class: %w[mb-3] %>
 
-      <div class="d-flex align-items-center gap-2 mt-2">
-        <% unless media.image? || media.video? %>
-          <%= lato_cms_media_thumb(media, size: 64) %>
+        <%= render 'lato_cms/media/preview', media: media %>
+
+        <div class="mb-3">
+          <%= lato_form_item_label form, :name %>
+          <%= lato_form_item_input_text form, :name, required: true %>
+        </div>
+
+        <% if media.image? %>
+          <%= render "lato_cms/media/translations_field", form: form, media: media, attribute: "alt_text" %>
         <% end %>
-        <span class="text-muted small"><%= media.filename %></span>
-      </div>
-    </div>
+        <%= render "lato_cms/media/translations_field", form: form, media: media, attribute: "title" %>
 
-    <div class="mb-3">
-      <%= lato_form_item_label form, :name %>
-      <%= lato_form_item_input_text form, :name, required: true %>
+        <div class="d-flex justify-content-between align-items-center">
+          <%= link_to t('lato_cms.media_usages_show_cta'), lato_cms.media_show_path(media), class: 'btn btn-link px-0' %>
+          <%= lato_form_submit form, t('lato_cms.cta_update'), class: %w[btn-success] %>
+        </div>
+      <% end %>
     </div>
 
-    <% if media.image? %>
-      <%= render "lato_cms/media/translations_field", form: form, media: media, attribute: "alt_text" %>
+    <% if lato_cms_admin? %>
+      <div class="tab-pane fade" id="<%= tab_id %>_replace">
+        <%= render 'lato_cms/media/form_replace_file', media: media %>
+      </div>
     <% end %>
-    <%= render "lato_cms/media/translations_field", form: form, media: media, attribute: "title" %>
-
-    <div class="d-flex justify-content-end">
-      <%= lato_form_submit form, t('lato_cms.cta_update'), class: %w[btn-success] %>
-    </div>
-  <% end %>
+  </div>
 <% end %>

data/app/views/lato_cms/media/_preview.html.erb

@@ -0,0 +1,19 @@
+<%# Images and videos get a large view (the index thumbnail is too small to
+    judge a file by), everything else keeps the small type icon. %>
+<div class="mb-3">
+  <% if media.image? %>
+    <%= link_to media.url, target: '_blank', rel: 'noopener', title: t('lato_cms.media_open_original'),
+      class: 'd-block bg-light rounded overflow-hidden' do %>
+      <%= image_tag media.preview_url, class: 'd-block mx-auto', style: 'max-width: 100%; max-height: 420px;', alt: media.alt_text %>
+    <% end %>
+  <% elsif media.video? %>
+    <video controls preload="metadata" class="d-block w-100 rounded bg-black" style="max-height: 420px;" src="<%= media.url %>"></video>
+  <% end %>
+
+  <div class="d-flex align-items-center gap-2 mt-2">
+    <% unless media.image? || media.video? %>
+      <%= lato_cms_media_thumb(media, size: 64) %>
+    <% end %>
+    <%= link_to media.filename, media.url, target: '_blank', rel: 'noopener', class: 'text-muted small' %>
+  </div>
+</div>

data/app/views/lato_cms/media/_upload_progress.html.erb

@@ -0,0 +1,8 @@
+<%# Progress UI driven by lato_cms_upload_controller.js: hidden until a
+    submit starts, then fed the real bytes-sent percentage. %>
+<div class="d-none my-3" data-lato-cms-upload-target="progress">
+  <div class="progress" style="height: 6px;">
+    <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 0%;" role="progressbar" data-lato-cms-upload-target="bar"></div>
+  </div>
+  <div class="small text-muted mt-1" data-lato-cms-upload-target="label">0%</div>
+</div>

data/app/views/lato_cms/media/_usages.html.erb

@@ -0,0 +1,20 @@
+<%# Where this media is actually rendered: a media is shared, so this is the
+    blast radius of replacing its file, and the reason deleting it can be
+    refused. %>
+<% usages = media.usages %>
+
+<% if usages.empty? %>
+  <p class="text-muted mb-0"><%= t('lato_cms.media_usages_empty') %></p>
+<% else %>
+  <ul class="list-group list-group-flush">
+    <% usages.each do |page, fields| %>
+      <li class="list-group-item d-flex justify-content-between align-items-center gap-2 px-0">
+        <div>
+          <div><%= page.title %> <span class="badge bg-secondary ms-1"><%= page.locale.upcase %></span></div>
+          <div class="text-muted small"><%= fields.map(&:field_name).uniq.join(', ') %></div>
+        </div>
+        <%= link_to t('lato_cms.cta_show'), lato_cms.pages_show_path(page), class: 'btn btn-sm btn-outline-secondary' %>
+      </li>
+    <% end %>
+  </ul>
+<% end %>

data/app/views/lato_cms/media/index.html.erb

@@ -1,6 +1,14 @@
 <%= lato_page_head t('lato_cms.media_index_title'), [{ label: t('lato_cms.media_index_title') }] %>
 
 <div class="card">
+  <div class="card-header d-flex gap-2">
+    <%= link_to lato_cms.media_path, class: "btn btn-sm #{params[:usage].blank? ? 'btn-primary' : 'btn-outline-secondary'}" do %>
+      <i class="bi bi-images me-1"></i><%= t('lato_cms.media_filter_all') %>
+    <% end %>
+    <%= link_to lato_cms.media_path(usage: 'unused'), class: "btn btn-sm #{params[:usage] == 'unused' ? 'btn-primary' : 'btn-outline-secondary'}" do %>
+      <i class="bi bi-unlink me-1"></i><%= t('lato_cms.media_filter_unused') %>
+    <% end %>
+  </div>
   <div class="card-body">
     <%= lato_index @media,
       custom_actions: {

data/app/views/lato_cms/media/picker_action.html.erb

@@ -84,12 +84,17 @@
             ActiveRecord::Relation delegates an unrecognized `#name` call to
             its model class, silently pre-filling a `:name` field with the
             literal string "LatoCms::Media" (bit us once already here). %>
+        <%# Uploaded over XHR by `lato-cms-upload` (progress bar) instead of a
+            plain submit; the picker only reacts to the result events. %>
         <%= form_with model: LatoCms::Media.new, url: lato_cms.media_create_action_path, data: {
-          lato_cms_media_picker_target: 'uploadForm', action: 'submit->lato-cms-media-picker#upload'
+          controller: 'lato-cms-upload',
+          action: 'submit->lato-cms-upload#submit lato-cms:upload-complete->lato-cms-media-picker#uploadCompleted lato-cms:upload-error->lato-cms-media-picker#uploadFailed',
+          lato_cms_upload_processing_label_value: t('lato_cms.media_upload_processing')
         } do |form| %>
           <%= lato_form_item_input_file_dropzone form, :file, accept: { 'image' => 'image/*', 'video' => 'video/*' }[params[:type]] %>
+          <%= render 'lato_cms/media/upload_progress' %>
           <div class="d-flex justify-content-end">
-            <button type="submit" class="btn btn-success"><%= t('lato_cms.media_upload_cta') %></button>
+            <button type="submit" class="btn btn-success" data-lato-cms-upload-target="submit"><%= t('lato_cms.media_upload_cta') %></button>
           </div>
         <% end %>
       </div>

data/app/views/lato_cms/media/show.html.erb

@@ -0,0 +1,47 @@
+<%= lato_page_head @media.name, [
+  { label: t('lato_cms.media_index_title'), path: lato_cms.media_path },
+  { label: @media.name }
+] %>
+
+<div class="card mb-4">
+  <div class="card-header d-flex justify-content-between align-items-center gap-2">
+    <h2 class="fs-4 mb-0"><%= t('lato_cms.media_summary_title') %></h2>
+    <%= link_to t('lato_cms.cta_edit'), lato_cms.media_update_path(@media), class: 'btn btn-sm btn-secondary' %>
+  </div>
+  <div class="card-body">
+    <%= render 'lato_cms/media/preview', media: @media %>
+
+    <dl class="row mb-0">
+      <dt class="col-sm-3"><%= LatoCms::Media.human_attribute_name(:name) %></dt>
+      <dd class="col-sm-9"><%= @media.name %></dd>
+
+      <dt class="col-sm-3"><%= t('lato_cms.media_type_label') %></dt>
+      <dd class="col-sm-9"><%= lato_cms_media_media_type(@media) %></dd>
+
+      <%# Alt text is image-only, mirroring the edit form. Both are translatable:
+          one row per configured locale, blanks included, so a missing
+          translation is visible instead of just absent. %>
+      <% attributes = @media.image? ? LatoCms::Media::TRANSLATABLE_ATTRIBUTES : %w[title] %>
+      <% attributes.each do |attribute| %>
+        <dt class="col-sm-3"><%= t("lato_cms.media_#{attribute}") %></dt>
+        <dd class="col-sm-9">
+          <% LatoCms.config.locales.each do |locale| %>
+            <div class="d-flex gap-2">
+              <span class="badge bg-secondary align-self-start"><%= locale.to_s.upcase %></span>
+              <span><%= @media.public_send(attribute, locale).presence || content_tag(:span, '—', class: 'text-muted') %></span>
+            </div>
+          <% end %>
+        </dd>
+      <% end %>
+    </dl>
+  </div>
+</div>
+
+<div class="card">
+  <div class="card-header">
+    <h2 class="fs-4 mb-0"><%= t('lato_cms.media_usages_title') %></h2>
+  </div>
+  <div class="card-body">
+    <%= render 'lato_cms/media/usages', media: @media %>
+  </div>
+</div>

data/config/locales/en.yml

@@ -3,6 +3,8 @@ en:
     attributes:
       lato/user:
         lato_cms_admin_role: Lato CMS role
+      lato_cms/media:
+        usages: Usages
   lato_cms:
     admin_roles:
       none: No access
@@ -121,6 +123,28 @@ en:
     media_picker_selected_label: selected
     media_search_placeholder: Search media...
     media_upload_cta: Upload
+    media_upload_processing: Processing...
+    media_usages_title: Used in
+    media_filter_all: All
+    media_filter_unused: Unused
+    media_summary_title: Media details
+    media_type_label: Type
+    media_update_tab_details: Details
+    media_usages_show_cta: See where it is used
+    media_usages_empty: This media is not used in any page yet.
+    media_usages_none: Unused
+    media_usages_count:
+      one: "%{count} usage"
+      other: "%{count} usages"
+    media_replace_file_title: Replace file
+    media_replace_file_description:
+      zero: "Uploads a new file in place of the current one, keeping the same media record. This media is not used yet."
+      one: "Uploads a new file in place of the current one, keeping the same media record: the %{count} page field using it will show the new file."
+      other: "Uploads a new file in place of the current one, keeping the same media record: the %{count} page fields using it will show the new file."
+    media_replace_file_cta: Replace file
+    media_replace_file_confirm: "The current file will be replaced everywhere this media is used. Continue?"
+    media_file_replaced: File replaced successfully
+    media_file_replace_failed: Failed to replace the file
     media_type_all: All
     media_type_image: Images
     media_type_video: Videos

data/config/locales/it.yml

@@ -3,6 +3,8 @@ it:
     attributes:
       lato/user:
         lato_cms_admin_role: Ruolo Lato CMS
+      lato_cms/media:
+        usages: Utilizzi
   lato_cms:
     admin_roles:
       none: Nessun accesso
@@ -121,6 +123,28 @@ it:
     media_picker_selected_label: selezionati
     media_search_placeholder: Cerca media...
     media_upload_cta: Carica
+    media_upload_processing: Elaborazione...
+    media_usages_title: Utilizzato in
+    media_filter_all: Tutti
+    media_filter_unused: Senza utilizzi
+    media_summary_title: Dettagli media
+    media_type_label: Tipo
+    media_update_tab_details: Dettagli
+    media_usages_show_cta: Vedi dove è utilizzato
+    media_usages_empty: Questo media non è ancora utilizzato in nessuna pagina.
+    media_usages_none: Non utilizzato
+    media_usages_count:
+      one: "%{count} utilizzo"
+      other: "%{count} utilizzi"
+    media_replace_file_title: Sostituisci file
+    media_replace_file_description:
+      zero: "Carica un nuovo file al posto di quello attuale, mantenendo lo stesso media. Questo media non è ancora utilizzato."
+      one: "Carica un nuovo file al posto di quello attuale, mantenendo lo stesso media: il %{count} campo che lo utilizza mostrerà il nuovo file."
+      other: "Carica un nuovo file al posto di quello attuale, mantenendo lo stesso media: i %{count} campi che lo utilizzano mostreranno il nuovo file."
+    media_replace_file_cta: Sostituisci file
+    media_replace_file_confirm: "Il file attuale verrà sostituito ovunque questo media sia utilizzato. Continuare?"
+    media_file_replaced: File sostituito con successo
+    media_file_replace_failed: Impossibile sostituire il file
     media_type_all: Tutti
     media_type_image: Immagini
     media_type_video: Video

data/config/routes.rb

@@ -30,8 +30,10 @@ LatoCms::Engine.routes.draw do
     get 'picker', to: 'media#picker_action', as: :media_picker_action
     get 'create', to: 'media#create', as: :media_create
     post 'create', to: 'media#create_action', as: :media_create_action
+    get ':id', to: 'media#show', as: :media_show
     get ':id/update', to: 'media#update', as: :media_update
     patch ':id/update', to: 'media#update_action', as: :media_update_action
+    patch ':id/replace-file', to: 'media#replace_file_action', as: :media_replace_file_action
     post ':id/regenerate/:attribute', to: 'media#regenerate_text_action', as: :media_regenerate_text_action, constraints: { attribute: /alt_text|title/ }
     delete ':id', to: 'media#destroy_action', as: :media_destroy_action
   end

data/lib/lato_cms/version.rb

@@ -1,3 +1,3 @@
 module LatoCms
-  VERSION = "3.2.1"
+  VERSION = "3.2.3"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: lato_cms
 version: !ruby/object:Gem::Version
-  version: 3.2.1
+  version: 3.2.3
 platform: ruby
 authors:
 - Gregorio Galante
@@ -118,6 +118,7 @@ files:
 - app/assets/javascripts/lato_cms/controllers/lato_cms_reload_on_modal_close_controller.js
 - app/assets/javascripts/lato_cms/controllers/lato_cms_repeater_controller.js
 - app/assets/javascripts/lato_cms/controllers/lato_cms_text_field_controller.js
+- app/assets/javascripts/lato_cms/controllers/lato_cms_upload_controller.js
 - app/assets/stylesheets/lato_cms/application.scss
 - app/controllers/lato_cms/api/pages_controller.rb
 - app/controllers/lato_cms/application_controller.rb
@@ -139,11 +140,16 @@ files:
 - app/models/lato_cms/page_field_media.rb
 - app/models/lato_cms/template_manager.rb
 - app/views/lato_cms/media/_form_create.html.erb
+- app/views/lato_cms/media/_form_replace_file.html.erb
 - app/views/lato_cms/media/_form_update.html.erb
+- app/views/lato_cms/media/_preview.html.erb
 - app/views/lato_cms/media/_translations_field.html.erb
+- app/views/lato_cms/media/_upload_progress.html.erb
+- app/views/lato_cms/media/_usages.html.erb
 - app/views/lato_cms/media/create.html.erb
 - app/views/lato_cms/media/index.html.erb
 - app/views/lato_cms/media/picker_action.html.erb
+- app/views/lato_cms/media/show.html.erb
 - app/views/lato_cms/media/update.html.erb
 - app/views/lato_cms/pages/_component_accordion.html.erb
 - app/views/lato_cms/pages/_fields_editor.html.erb