Dropzone.js + Stimulus + Active Storage + CSS Zero (2025)

_form.html.erb

<%= form_with(model: billboard) do |form| %>
  <%= tag.div class: "dropzone", data: { controller: "dropzone", dropzone_param_name_value: "billboard[images][]", dropzone_url_value: rails_direct_uploads_url, dropzone_accepted_files_value: "image/*", dropzone_max_files_value: 3, dropzone_max_filesize_value: 0.300 } do %>
    <div class="dz-default dz-message flex flex-col items-center">
      <%= image_tag "upload.svg", size: 28, class: "colorize-black", aria: { hidden: true } %>
      <h5 class="font-semibold mbs-4">Drop files here or click to upload.</h5>
      <p class="text-sm text-subtle">Upload up to 10 files.</p>
    </div>
  <% end %>

  <div class="inline-flex items-center mbs-2 mie-1">
    <%= form.submit class: "btn btn--primary" %>
  </div>
<% end %>

dropzone.css

@import url("https://esm.sh/[email protected]/dist/dropzone.css");

.dropzone {
  border-radius: var(--rounded-xl);
  border: 2px dashed var(--color-border);
  padding: var(--size-2);

  .dz-preview.dz-image-preview {
    background: transparent;
  }

  .dz-preview .dz-error-message {
    background: var(--color-negative);
    word-break: break-all;
  }

  .dz-preview .dz-error-message::after {
    border-bottom: 6px solid var(--color-negative);
  }

  .dz-preview:has(.dz-remove) .dz-error-message  {
    top: 148px;
  }
}

dropzone_controller.js

import { Controller } from "@hotwired/stimulus"
import { DirectUpload } from "https://esm.sh/@rails/[email protected]?standalone"
import Dropzone from "https://esm.sh/[email protected]?standalone"

export default class extends Controller {
  static values = {
    url: String,
    paramName: String,
    maxFiles: { type: Number, default: null },
    maxFilesize: { type: Number, default: 256 },
    acceptedFiles: { type: String, default: null },
    addRemoveLinks: { type: Boolean, default: true }
  }

  connect() {
    this.dropZone = this.#createDropZone()
    this.dropZone.enqueueFile = it => this.#upload(it)
  }

  disconnect() {
    this.dropZone.destroy()
  }

  #createDropZone() {
    return new Dropzone(this.element, {
      url: this.urlValue,
      paramName: this.paramNameValue,
      maxFiles: this.maxFilesValue,
      maxFilesize: this.maxFilesizeValue,
      acceptedFiles: this.acceptedFilesValue,
      addRemoveLinks: this.addRemoveLinksValue
    })
  }

  #upload(file) {
    new Uploader(file, this.dropZone).start()
  }
}

class Uploader {
  constructor(file, dropZone) {
    this.file = file; this.dropZone = dropZone;
  }

  start() {
    this.#createDirectUpload((error, blob) => {
      if (error) {
        this.#emitDropzoneError(error)
      } else {
        this.#createHiddenInput(blob.signed_id)
        this.#emitDropzoneSuccess()
      }
    })
  }

  directUploadWillStoreFileWithXHR(xhr) {
    this.file.xhr = xhr
    this.#bindProgress()
    this.#emitDropzoneProcessing()
  }

  #createDirectUpload(callback) {
    new DirectUpload(this.file, this.dropZone.options.url, this).create(callback)
  }

  #createHiddenInput(signedId) {
    this.hiddenInput = document.createElement("input")
    this.hiddenInput.type = "hidden"
    this.hiddenInput.name = this.dropZone.options.paramName
    this.hiddenInput.value = signedId
    this.file.previewElement.appendChild(this.hiddenInput)
  }

  #bindProgress() {
    this.file.xhr.upload.addEventListener("progress", it => this.#directUploadDidProgress(it))
  }

  #directUploadDidProgress(event) {
    this.dropZone._updateFilesUploadProgress([this.file], this.xhr, event)
  }

  #emitDropzoneProcessing() {
    this.file.status = Dropzone.PROCESSING
    this.dropZone.emit("processing", this.file)
  }

  #emitDropzoneSuccess() {
    this.file.status = Dropzone.SUCCESS
    this.dropZone.emit("success", this.file)
    this.dropZone.emit("complete", this.file)
  }

  #emitDropzoneError(error) {
    this.file.status = Dropzone.ERROR
    this.dropZone.emit("error", this.file, error)
    this.dropZone.emit("complete", this.file)
  }
}

This implementation does not actually work! Sure it works for the new action, but in the edit action, controller can not find form elements and a never ending rigmarole of JS and Stimulus... never ending! Does't work! We waste all this time implementing basics over and over, while in reality if you don't come from money and big teams, and you're working solo on a project, it means you will spill your guts working on the basics and working on the complex.