WIP: Add Field::ActiveStorage

Author: goosys

app/assets/builds/administrate/application.css

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

app/assets/builds/administrate/application.css.map

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

app/assets/builds/administrate/application.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/builds/administrate/application.js.map

@@ -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/javascripts/administrate/active_storage.js

@@ -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/assets/javascripts/administrate/application.js

@@ -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>