https://github.com/justalever/drag_and_drop_active_storage

A demo drag and drop image upldate Ruby on Rails app using Stimulus.js, DropZone.js, and ActiveStorage
https://github.com/justalever/drag_and_drop_active_storage

active-storage dropzonejs rails ruby ruby-on-rails simulusjs

Last synced: 4 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/justalever/drag_and_drop_active_storage
• Owner: justalever
• Created: 2019-09-15T18:23:26.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-19T15:11:36.000Z (almost 2 years ago)
• Last Synced: 2024-10-09T13:05:50.906Z (3 months ago)
• Topics: active-storage, dropzonejs, rails, ruby, ruby-on-rails, simulusjs
• Language: Ruby
• Homepage: https://web-crunch.com
• Size: 1.36 MB
• Stars: 59
• Watchers: 4
• Forks: 18
• Open Issues: 28
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 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](https://stimulusjs.org/)

- [Dropzone JS](https://www.dropzonejs.com/)

- [Webpack/Rails 6.0](https://rubyonrails.org/)

- [Kickoff Tailwind](https://github.com/justalever/kickoff_tailwind) (My personal starter template for Rails apps)

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