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