na

Gemfile.lock

@@ -218,9 +218,9 @@ GEM
     pg (1.6.3-x86_64-darwin)
     pg (1.6.3-x86_64-linux)
     pg (1.6.3-x86_64-linux-musl)
-    pg_search (2.3.8)
-      activerecord (>= 7.2)
-      activesupport (>= 7.2)
+    pg_search (2.4.0)
+      activerecord (>= 8.0)
+      activesupport (>= 8.0)
     pp (0.6.4)
       prettyprint
     premailer (1.30.0)
@@ -393,7 +393,7 @@ DEPENDENCIES
   image_processing (~> 1.2)
   importmap-rails
   jbuilder
-  json (= 2.21.2)
+  json (< 3)
   kaminari
   lexxy
   mobility (~> 1.3.0.rc1)
@@ -506,7 +506,7 @@ CHECKSUMS
   pg (1.6.3-x86_64-darwin) sha256=ee2e04a17c0627225054ffeb43e31a95be9d7e93abda2737ea3ce4a62f2729d6
   pg (1.6.3-x86_64-linux) sha256=5d9e188c8f7a0295d162b7b88a768d8452a899977d44f3274d1946d67920ae8d
   pg (1.6.3-x86_64-linux-musl) sha256=9c9c90d98c72f78eb04c0f55e9618fe55d1512128e411035fe229ff427864009
-  pg_search (2.3.8) sha256=10e2d365d76ac432c79875c3ce17cf285c97c029548d84990b02406e52347c06
+  pg_search (2.4.0) sha256=8b0b518aad9d0dcb507f7de35c0145d495c0dbe3c6e0babeeb3b226b5981ccaf
   pp (0.6.4) sha256=dfcb0fce700c41456265922884f9fe195d7fbb0674a3578e6c0f69588e82b570
   premailer (1.30.0) sha256=55f7cfa5099c18f3698a0b5548da448f402e8bf4cbc9410e32e37fb211078c21
   premailer-rails (1.12.0) sha256=c13815d161b9bc7f7d3d81396b0bb0a61a90fa9bd89931548bf4e537c7710400

app/assets/stylesheets/assets.css

@@ -146,3 +146,8 @@
   }
 
 }
+
+.asset-preview {
+  width: 180px;
+  max-width: 100%;
+}

app/controllers/admin/assets_controller.rb

@@ -1,6 +1,6 @@
 class Admin::AssetsController < Admin::AdminController
 
-  before_action :set_asset, only: %i[ edit update destroy ]
+  before_action :set_asset, only: %i[ edit update replace destroy ]
 
   helper_method :sorting_technique
 
@@ -43,6 +43,16 @@ class Admin::AssetsController < Admin::AdminController
   end
 
 
+  def replace
+    blob = ActiveStorage::Blob.find_signed(params[:signed_id])
+    @asset.file.attach(blob)
+
+    respond_to do |format|
+      format.turbo_stream
+    end
+  end
+
+
   # DELETE /assets/1 or /assets/1.json
   def destroy
     @asset.destroy!

app/javascript/controllers/upload_controller.js

@@ -7,7 +7,8 @@ export default class extends Controller {
     url: String, 
     createUrl: String,
     parentId: Number,
-    target: String
+    target: String,
+    limit: Number
   }
 
   connect() {
@@ -21,8 +22,10 @@ export default class extends Controller {
     
     const container = document.getElementById(this.targetValue)
 
-    const files = event.target.files || event.dataTransfer.files;
-    Array.from(files).forEach((file, index) => {
+    const selected = Array.from(event.target.files || event.dataTransfer.files)
+    const files = this.limitValue > 0 ? selected.slice(0, this.limitValue) : selected
+
+    files.forEach((file, index) => {
       
       const uid = 'new_' + Date.now() + '_' + index
       const target_div = document.createElement('div')

app/views/admin/assets/_file.html.erb

@@ -0,0 +1,23 @@
+<%= tag.div id: 'asset_file', class: 'field' do %>
+  <div>
+    <%= label_tag nil, t(:'assets.file'), for: nil %>
+  </div>
+
+  <div>
+    <div id="asset_preview" class="asset-preview">
+      <div class="asset__thumbnail">
+        <div><%= image_tag rails_storage_proxy_path(asset.file.representation(resize_to_limit: [320,320], format: :webp)) if asset.file.representable? %></div>
+      </div>
+
+      <%= tag.div asset.file.filename.to_s, class: 'asset__title' %>
+
+      <%= tag.div [
+          asset.file.filename.extension_without_delimiter.upcase,
+          number_to_human_size(asset.file.byte_size).sub(/\s/, ''),
+          [asset.file.metadata.dig('width'), asset.file.metadata.dig('height')].compact.join('x')
+        ].reject { |v| v.blank? }.join(' '),
+        class: 'asset__mimetypes' %>
+    </div>
+
+  </div>
+<% end %>

app/views/admin/assets/_form.html.erb

@@ -1,9 +1,36 @@
   <%= form_with(model: [ :admin, asset ], class: 'form-plain has--key-ctrls') do |form| %>
 
+    <div class="form-section">
+      <%= render partial: 'file', locals: { asset: asset } %>
+
+      <%= tag.div class: 'field' do %>
+        <div>
+          <%= label_tag nil, t("assets.replace"), for: nil %>
+        </div>
+
+        <div>
+          <%= tag.label class: "dropzone",
+                        title: t(:'assets.replace'),
+                        data: {
+                          controller: 'upload',
+                          upload_url_value: rails_direct_uploads_url,
+                          upload_create_url_value: url_for(controller: 'assets', action: 'replace', id: asset),
+                          upload_target_value: 'asset_preview',
+                          upload_limit_value: 1,
+                          action: "dragover->upload#dragover dragleave->upload#dragleave drop->upload#drop"
+                        } do %>
+            <span>arrow_upward</span>
+            <input type="file" data-action="change->upload#upload">
+          <% end %>
+        </div>
+      <% end %>
+    </div>
+
     <div class="form-section">
       <%= render partial: 'material/text_field', locals: { f: form, attr: :title } %>
     </div>
 
+    
     <div class="form-ctrls">      
       <%= link_to t(:'ui.cancel'), url_for(controller: 'assets', action: 'index'), data: {turbo_action: 'advance'} %>  
       <%= form.submit t(:'ui.save') %>      

app/views/admin/assets/replace.turbo_stream.erb

@@ -0,0 +1,3 @@
+<%= turbo_stream.replace 'asset_file' do %>
+  <%= render partial: 'file', locals: { asset: @asset }, formats: :html %>
+<% end %>

config/locales/en.yml

@@ -296,6 +296,8 @@ en:
 
   assets:
     new: Upload file
+    file: File
+    replace: Replace with
     created: File saved
     updated: File updated
     destroy: Delete file
@@ -477,11 +479,11 @@ en:
         template: Template
 
       asset:
-        title: File Name
+        title: File name
         created_at: Created
-        updated_at: Last Updated
+        updated_at: Last updated
         tags: Tags
-
+        
       user:
         enabled_at: Active
         role: Role

config/routes.rb

@@ -11,6 +11,9 @@ Rails.application.routes.draw do
     scope ":locale", constraints: { locale: /en|zh|hr|cs|da|nl|fi|fr|fr-CA|de|hu|it|ja|ko|nb|pl|pt|ro|sr|sk|sl|es|sv|uk/ } do
       # Assets
       resources :assets do
+        member do
+          post :replace
+        end
         collection do
           post :upload
         end