Dropzone

More files. Just what we need.

Includes a Ruby component and corresponding Rails helper

Ruby

Includes a Stimulus controller

Stimulus

Built to work with ActiveStorage direct uploads.

Example

<%= nk_form_for :user, class: "w-full" do |f| %>
  <%= f.fieldset(legend: "Files", description: "Always in the way") do %>
    <%= f.group do %>
      <%= f.field :image, as: NitroKit::Dropzone, js_options: { maxFileSize: 1 } %>
    <% end %>
  <% end %>
<% end %>

<%= nk_form_for(user) do |f| %>
  <%= f.field :avatar, as: NitroKit::Dropzone %>
<% end %>

Install

Premium

Set up Nitro Kit then

bin/rails app:template \
  LOCATION="https://nitrokit.dev/t/premium/dropzone?license=LICENSE-KEY"

Dependencies

This component adds third-party dependencies:

JavaScriptdropzoneWeb GitHub

Usage

`nk_dropzone( title: "Upload file", description: "Drag and drop here to upload", direct_upload: true, js_options: {}, identifier: nil, **attrs )`
Property	Default	Description
`title`	`"Upload file"`	The heading text displayed in the dropzone.
`description`	`"Drag and drop here to upload"`	The descriptive text shown below the title.
`direct_upload`	`true`	Whether to use Rails ActiveStorage direct uploads.
`js_options`	`{ autoQueue: false, autoProcessQueue: false, maxFiles: 1, maxFilesize: 2 }`	Options passed to Dropzone.js. See Dropzone.js docs.
`identifier`	`nil`	Unique identifier for the dropzone instance. Auto-generated if not provided.
`**attrs`		HTML attributes for `<div>` element