justalever / drag_and_drop_active_storage

A demo drag and drop image upldate Ruby on Rails app using Stimulus.js, DropZone.js, and ActiveStorage

Ruby on Rails Drag and Drop Uploads with Active Storage, Stimulus.js and Dropzone.js

This tutorial is about using Active Storage from Ruby on Rails 6.0 to create a drag and drop upload experience from scratch using Stimulus.js and Dropzone.js.

Objective

The goal of this experience is to introduce drag and drop functionality and tie it to Rails Active Storage behind the scenes. I want to be able to drag and drop multiple files for upload as well as pass options that regulate what conditions can be passed around those files. Those conditions could be anything from image type to file size and more.

Dependencies:

• Stimulus JS
• Dropzone JS
• Webpack/Rails 6.0
• Kickoff Tailwind (My personal starter template for Rails apps)

Continue reading here: https://web-crunch.com/rails-drag-drop-active-storage-stimulus-dropzone/