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

Hi, My name is Andy Leverenz and I work as a Product Designer.. For fun, I design, code, and write. Check out my blog called Web-Crunch https://web-crunch.com where I publish design and development tutorials with the occasional vlog.

====================

⚙️Source code: https://github.com/justalever/drag_and_drop_active_storage

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.

How we solve the problem: With Webpack support now in Rails, I plan to leverage a couple of JavaScript libraries to help handle a lot of the drag and drop functionality. On top of this, I use some of the built-in JavaScript from @rails/activestorage to create a direct upload pattern. Ultimately, we will still use serverside rendered UI which is normal for a traditional Ruby on Rails application but enhance it with JavaScript to feel more dynamic.

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

====================

📰 One-Click Subscribe: https://www.youtube.com/user/webcrunchblog?sub_confirmation=1

💎🛤 NEW COURSE: HELLO RAILS https://hellorails.io

💻 Previously published at: https://web-crunch.com/rails-drag-drop-active-storage-stimulus-dropzone

💻 Check out the blog: https://web-crunch.com

🦄 Check out my personal site: https://justalever.com

🚀 Links: Weekly Newsletter: https://web-crunch.com/subscribe Twitter: https://twitter.com/webcrunchblog Twitter(Personal Account): https://twitter.com/justalever Facebook: https://facebook.com/webcrunchblog Dribbble: https://dribbble.com/justalever Github: https://github.com/justalever

📘Check out my book on UX Design: "LUXD: Learn User Experience Design" https://web-crunch.com/books/luxd

📙 Check out my FREE book on Tumblr Theming: "Pro Tumblr Theming" https://web-crunch.com/books/ptt

💯 Need awesome web hosting? Check out cloudways. They allow me to use a variety of hosting providers and build apps with ease: http://bit.ly/webcrunchhosting

🌊 Need more advanced hosting for Rails, PHP, Node, or other projects? Digital Ocean has you covered. https://m.do.co/c/ee243ee15648

💎 Ruby on Rails devs, Try HatchBox.io. You'll save upwards of 50% compared to Heroku. I use it and love it! https://hatchbox.io/?via=andy

☕️ Keep me awake. Buy me a coffee https://www.buymeacoffee.com/webcrunch ... https://www.youtube.com/watch?v=fg_8qJ-su6A