Ruby on Rails Drag and Drop Uploads with Active Storage, Stimulus.js and Dropzone.js
Vložit
- čas přidán 19. 05. 2024
- 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 web-crunch.com where I publish design and development tutorials with the occasional vlog.
====================
⚙️Source code: github.com/justalever/drag_an...
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: web-crunch.com/rails-drag-dro...
====================
📰 One-Click Subscribe:
czcams.com/users/webcrunc...
💎🛤 NEW COURSE: HELLO RAILS
hellorails.io
💻 Previously published at:
web-crunch.com/rails-drag-dro...
💻 Check out the blog:
web-crunch.com
🦄 Check out my personal site:
justalever.com
🚀 Links:
Weekly Newsletter: web-crunch.com/subscribe
Twitter: / webcrunchblog
Twitter(Personal Account): / justalever
Facebook: / webcrunchblog
Dribbble: dribbble.com/justalever
Github: github.com/justalever
📘Check out my book on UX Design:
"LUXD: Learn User Experience Design"
web-crunch.com/books/luxd
📙 Check out my FREE book on Tumblr Theming:
"Pro Tumblr Theming"
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:
bit.ly/webcrunchhosting
🌊 Need more advanced hosting for Rails, PHP, Node, or other projects? Digital Ocean has you covered.
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!
hatchbox.io/?via=andy
☕️ Keep me awake. Buy me a coffee
www.buymeacoffee.com/webcrunch
Dude, your content rocks! Found out about you and this video on Dev.to and I can't believe you don't have a thousands likes on this alone. Please keep going, you just got a fan.
Appreciate the support and kind words!
big thanks
Thank you so much for the great tutorial. What if I wanted multiple drop zones in a single form. For example a dropzone for a video, and another one for a cover image? How would the javascript have to change for least amount of code duplication?
Thank you it's a great video. Could you make another video explaining how to install tailwindcss from scratch? Thanks
Nice!
Thanks, very useful!! Do you plan to finish with edit images by updating post? it will be awesome
You should be able to update the post but have to drag and drop a new image in. Displaying attachments there is quite a challenge but maybe I can find a way to get it to work in the future.
Hello! Small question, are you able to choose pictures order with this tutorial? Just wanted to be sure before following it! Thanks a lot for taking the time to make this video :)
Hey Jessica,
So this tutorial assumes you would only attach a single image at a time. Multiple images while possible would need some more engineering to orchestrate.
Hi ! You change your song intro ! Do you composed them ? The previous one was heavier 🤷♂️ which I prefer 😀 That said, it is always a pleasure to watch your tutorial, keep your good works !!!
I mix them up sometimes :) i made this one too.
Hate to be that guy, but the last thing I need at 2am when looking for something code-related on youtube is to feel like I have a teenage son who didnt get a new Xbox. Just consider the mood of the actual video VS the intro? Also consider that people might have the volume cranked. Just saying.
I don't mean to argue but maybe you're the edge case? The intros are tiny bits of branding I add to these free tutorials. I also can't control your volume...
Something to add: disable submit button before uploading - add $(":submit").prop("disabled", true); to the connect() method, and $(":submit").prop("disabled", false); to this.dropZone on added file.
Hi, edit form not populate uploaded image. Can you please help
Can I know is it possible to upload multiple files with few changes as suggested in active storage instead has_one_attached and in the controller declaring array. whether it works with your code.? Anyway thank your for your wonderful tutorial..
I haven't tried it with this same approach but active storage has another method that allows multiple uploads "has_many_attached :some_name". The JavaScript side of this would need an audit to accommodate but I know Dropzone.js should definitely allow for multiple uploads.
Sorry, I have one small (I think) problem. When I drag and drop my photo, it successfully works, but in my console I have message No template found for ActiveStorage::DiskController#update, rendering head :no_content, can someone help me?
Has anyone found a way to manage images like Airbnb does? I'm searching for a way to upload, edit, sort and delete images? I would have thought that this would be a super common problem that people would have solved, but I've never found a tutorial that comes close to doing something like this.
I'd say their approach is very custom. You can get pretty close with ActiveStorage now in Rails but it would require significant investment on the front end to make things as nice as Airbnb.
@@Webcrunch Does seem to be the case. I've got a project I'm working on at the moment that I would love to have this functionality. I've got all the backend stuff sorted out, but I'm not even sure on where to start on solving the front end side of things. This looks like a good start though. Also, thanks for all you work with these tutorials. I really appreciate them.
How do I contact you?
Check the about section of my channel.
Looks good, but it's a shame it depends on Stimulus!
Neither Rails nor Dropzone *depend* on Stimulus. You do not have to implement it this way. This is *far far* too complex, IMHO.
github link dosnt work
Should work now! Sorry about that
@@Webcrunch thanks for the very helpfull content