0.0
No release in over 3 years
Low commit activity in last 3 years
A rails helper to easily add Dropzone to forms.
2005
2006
2007
2008
2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
 Dependencies

Runtime

>= 5, < 8
 Project Readme

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