Dropzone Input
A Rails helper and Stimulus Controller that makes adding dropzone to a Rails form dead simple.
<%= form_with(model: User.new) do |form| %>
<%= dropzone form, :image,
file_success_event: 'USER_FILE_UPLOADED',
file_progress_event: 'USER_FILE_PROGRESS',
queue_complete_event: 'USER_FILE_UPLOAD_DONE' %>
<% end %>
NOTE: This was built for the specific use in https://darkroom.tech and many of the pieces (like specific styles, etc) will be non-configurable at the moment. We will work to generalize this over time and pull requests are welcome and will be reviewed quickly.
Options & Events
Option Name | Description |
---|---|
max_files |
default: null |
max_file_size |
default: null |
max_thumbnail_file_size |
default: 10 |
parallel_uploads |
default: 2 |
Events below receive file
as first parameter.
Event Name | Description |
---|---|
file_added_event |
File added to queue |
file_progress_event |
Periodically called while file is being uploaded. progress in the second parameter, or through the upload property: file.upload.progress , file.upload.bytesSent |
file_removed_event |
File removed from queue |
file_start_event |
File will start uploading |
file_success_event |
File successfully uploaded |
Installation
Add to your Gemfile.
gem 'dropzone_input'
bundle install
Add Javascript dependencies.
yarn add dropzone # If you don't already have this
yarn add @darkroom-com/dropzone-input
Register Stimulus controller. By default in Rails, this is in controllers/index.js
.
import DropzoneController from '@darkroom-com/dropzone-input';
application.register('dropzone', DropzoneController);
Development
To develop this locally you can update your Gemfile to
gem 'dropzone_input', path: 'PATH_TO_PROJECT'
In this project run
yarn link
In your app project run
yarn link @darkroom-com/dropzone-input
To auto-recompile this project, run
yarn run dev