WIP: Add Field::ActiveStorage

app/assets/javascripts/administrate/active_storage.js

@@ -0,0 +1,4 @@
+import * as ActiveStorage from "@rails/activestorage"
+ActiveStorage.start();
+
+import "./vendor/direct_upload";

app/assets/javascripts/administrate/application.js

@@ -1,3 +1,4 @@
+import "./active_storage";
 import "./add_jquery";
 import "trix";
 import "@rails/actiontext";

app/assets/javascripts/administrate/vendor/direct_upload.js

@@ -0,0 +1,40 @@
+// direct_uploads.js
+// https://railsguides.jp/active_storage_overview.html#example
+
+addEventListener("direct-upload:initialize", event => {
+  const { target, detail } = event
+  const { id, file } = detail
+  target.insertAdjacentHTML("beforebegin", `
+    <div id="direct-upload-${id}" class="direct-upload direct-upload--pending">
+      <div id="direct-upload-progress-${id}" class="direct-upload__progress" style="width: 0%"></div>
+      <span class="direct-upload__filename"></span>
+    </div>
+  `)
+  target.previousElementSibling.querySelector(`.direct-upload__filename`).textContent = file.name
+})
+
+addEventListener("direct-upload:start", event => {
+  const { id } = event.detail
+  const element = document.getElementById(`direct-upload-${id}`)
+  element.classList.remove("direct-upload--pending")
+})
+
+addEventListener("direct-upload:progress", event => {
+  const { id, progress } = event.detail
+  const progressElement = document.getElementById(`direct-upload-progress-${id}`)
+  progressElement.style.width = `${progress}%`
+})
+
+addEventListener("direct-upload:error", event => {
+  event.preventDefault()
+  const { id, error } = event.detail
+  const element = document.getElementById(`direct-upload-${id}`)
+  element.classList.add("direct-upload--error")
+  element.setAttribute("title", error)
+})
+
+addEventListener("direct-upload:end", event => {
+  const { id } = event.detail
+  const element = document.getElementById(`direct-upload-${id}`)
+  element.classList.add("direct-upload--complete")
+})

app/assets/stylesheets/administrate/application.scss

@@ -2,6 +2,7 @@
 
 @import "reset/normalize";
 
+@import "vendor/direct_upload";
 @import "trix/dist/trix";
 @import "@selectize/selectize/dist/css/selectize";
 @import "@selectize/selectize/dist/css/selectize.default";

app/assets/stylesheets/administrate/vendor/direct_upload.css

@@ -0,0 +1,40 @@
+/* direct_uploads.css */
+/* https://railsguides.jp/active_storage_overview.html#example */
+
+.direct-upload {
+  display: inline-block;
+  position: relative;
+  padding: 2px 4px;
+  margin: 0 3px 3px 0;
+  border: 1px solid rgba(0, 0, 0, 0.3);
+  border-radius: 3px;
+  font-size: 11px;
+  line-height: 13px;
+}
+
+.direct-upload--pending {
+  opacity: 0.6;
+}
+
+.direct-upload__progress {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  opacity: 0.2;
+  background: #0076ff;
+  transition: width 120ms ease-out, opacity 60ms 60ms ease-in;
+  transform: translate3d(0, 0, 0);
+}
+
+.direct-upload--complete .direct-upload__progress {
+  opacity: 0.4;
+}
+
+.direct-upload--error {
+  border-color: red;
+}
+
+input[type=file][data-direct-upload-url][disabled] {
+  display: none;
+}

app/views/fields/active_storage/_form.html.erb

@@ -0,0 +1,18 @@
+
+<div class="field-unit__label">
+  <%= f.label field.attribute %>
+</div>
+
+<div class="field-unit__field">
+  <%= render field.items_renderer %>
+
+  <div>
+    <% if field.attached? %>
+      <% field.attachments.each do |attachment| %>
+        <%= f.hidden_field field.attribute, multiple: field.many?, value: attachment.signed_id %>
+      <% end %>
+    <% end %>
+
+    <%= f.file_field field.attribute, field.file_field_options %>
+  </div>
+</div>

app/views/fields/active_storage/_index.html.erb

@@ -0,0 +1,18 @@
+
+<% if field.attached? %>
+  <%= render(
+        field.items_renderer(
+          display_preview: field.index_display_preview?,
+          preview_only: field.index_preview_only?)
+      ) %>
+
+  <% if field.index_display_count? %>
+    <div class="attachments-count">
+      <%= pluralize(
+            field.attachments.count,
+            I18n.t("administrate.fields.active_storage.attachment", default: 'Attachment')
+          )
+      %>
+    </div>
+  <% end %>
+<% end %>

app/views/fields/active_storage/_show.html.erb

@@ -0,0 +1,6 @@
+
+<% if field.attached? %>
+  <%= render field.items_renderer %>
+<% else %>
+  <%= I18n.t("administrate.fields.active_storage.no_attachment", default: 'No attachment') %>
+<% end %>

app/views/fields/active_storage/item/_item.html.erb

@@ -0,0 +1,15 @@
+<%# locals: { field:, attachment:, variant: nil, size: [100, 100], display_preview: true, preview_only: false } %>
+
+<% if display_preview && attachment.persisted? %>
+  <div>
+    <%= render field.preview_renderer(attachment, local_assigns) %>
+  </div>
+<% end %>
+
+<% unless preview_only %>
+  <% if attachment.persisted? %>
+    <div>
+      <%= link_to attachment.filename, field.blob_url(attachment), title: attachment.filename %>
+    </div>
+  <% end %>
+<% end %>

app/views/fields/active_storage/item/_items_layout.html.erb

@@ -0,0 +1,5 @@
+<%# locals: { field:, attachment:, variant: nil, size: [100, 100], display_preview: true, preview_only: false } %>
+
+<div class="attachments-listing">
+  <%= yield %>
+</div>

app/views/fields/active_storage/preview/_audio.html.erb

@@ -0,0 +1,3 @@
+<%# locals: { field:, attachment:, variant: nil, size: [100, 100] } %>
+
+<%= audio_tag(field.url(attachment), autoplay: false, controls: true) %>

app/views/fields/active_storage/preview/_file.html.erb

@@ -0,0 +1,3 @@
+<%# locals: { field:, attachment:, variant: nil, size: [100, 100] } %>
+
+<%= attachment.filename %>

app/views/fields/active_storage/preview/_image.html.erb

@@ -0,0 +1,13 @@
+<%# locals: { field:, attachment:, variant: nil, size: [100, 100] } %>
+
+<% if attachment.variable? %>
+  <% if variant.nil? %>
+    <%= image_tag(field.variant(attachment, resize_to_limit: size)) %>
+  <% elsif variant == false %>
+    <%= image_tag(field.url(attachment)) %>
+  <% else %>
+    <%= image_tag(attachment.variant(variant)) %>
+  <% end %>
+<% else %>
+  <%= image_tag(field.url(attachment)) %>
+<% end %>

app/views/fields/active_storage/preview/_layout.html.erb

@@ -0,0 +1,5 @@
+<%# locals: { field:, attachment:, variant: nil, size: [100, 100] } %>
+
+<div class="as-field as-field-<%= action_name %>">
+  <%= yield %>
+</div>

app/views/fields/active_storage/preview/_preview.html.erb

@@ -0,0 +1,4 @@
+<%# locals: { field:, attachment:, variant: nil, size: [100, 100] } %>
+
+<%= image_tag(field.preview(attachment, resize_to_limit: size)) %>
+

app/views/fields/active_storage/preview/_video.html.erb

@@ -0,0 +1,9 @@
+<%# locals: { field:, attachment:, variant: nil, size: [100, 100] } %>
+
+<%=
+  video_tag(
+    field.url(attachment),
+    controls: true,
+    autobuffer: true,
+    class: "as-field-video"
+  ) %>

app/views/fields/active_storage/preview/_video_preview.html.erb

@@ -0,0 +1,10 @@
+<%# locals: { field:, attachment:, variant: nil, size: [100, 100] } %>
+
+<%= 
+  video_tag(
+    field.url(attachment),
+    poster: field.preview(attachment, resize_to_limit: size),
+    controls: true,
+    autobuffer: true,
+    class: "as-field-video"
+  ) %>

lib/administrate/base_dashboard.rb

@@ -1,3 +1,4 @@
+require "administrate/field/active_storage"
 require "administrate/field/belongs_to"
 require "administrate/field/boolean"
 require "administrate/field/date_time"