Drag And Drop Active Storage Uploads With Dropzone | Intro To Ruby On Rails 7 Part 28
Vložit
- čas přidán 8. 05. 2024
- This tutorial covers drag and drop image uploads with Active Storage, Stimulus JS, Direct Uploads, Dropzone JS, and Ruby on Rails 7.
Checkout my course(s) at: learn.deanin.com
This was a lot to put together, but this tutorial is ultimately thanks to Martin. After combing through multiple references, git issues, and the dropzonejs documentation, I've managed to piece together something that works for a drag and drop upload functionality. That said, I'd still like to see this expanded in a future video to cover persisting the previously uploaded images.
Source Code: github.com/Deanout/blog_appli...
References:
Lazaronixon:
gist.github.com/lazaronixon/d...
Web Crunch:
web-crunch.com/posts/rails-dr...
Known Rails Issue:
discuss.rubyonrails.org/t/rai...
github.com/rails/rails/issues...
Additional References:
www.dropzone.dev/js/
github.com/Deanout/turbo_chat...
edgeguides.rubyonrails.org/ac...
Join this channel to help support these videos:
/ @deanin
Follow me on social media:
linktr.ee/deanin
If you liked this video, please consider subscribing: t.co/RZ4EwP0F2a
Timestamps
0:00 Covering Sources And Known Rails 7.0.1 Bug!
3:23 Drag And Drop Upload Demo
5:15 Tutorial Begins | Setup Dropzone JS And CSS
8:48 Active Storage Image Upload Setup
10:00 Dropzone Drag And Drop Image Upload Form In Rails 7
15:54 JavaScript Helpers
17:54 Creating The Dropzone Drag And Drop Stimulus Controller
40:15 Drag And Drop For Multiple Image Upload!
#Deanin #Software #Programming
I'd still like to see this improved a bit, but there's what I managed to piece together since Martin's donation. Hopefully this helps inspire some conversation around drag and drop uploads. If you have a better solution please feel free to share!
Thanks for updating the drag and drop upload for active storage with Dropzone.
Come on no way I expected that in couple of weeks. Thank you so much again
Haha happy to help! It helps that a lot of the work was already done and that I had run into the Rails direct upload bug before.
Hopefully things can get a bit more polished over time. I'd really like to try and clean up this solution a bit to see if there's a way to simplify the process and make it work better.
Another excellent tutorial, even if as you yourself say, use your references from other people such as Web crunch, who is another great rails teacher as yourself.
I'm also happy that you addressed the use of "this.element" and "static targets", and why in some of your videos you don't use them. You prefer to do it with what you are more comfortable and that's a totally valid reason. I feel that as long as I'm using stimulus I prefer to do it the "stimulus way", but again, that is a personal preference.
Hahaha, I don't know about if it's valid, I'm just stubborn and forget sometimes because I fall back on my habits. It's probably not the best to teach beginners to do it the traditional JS way, but at the same time it probably doesn't hurt for people to see conventions fought a bit.
Much needed, thanks a lot. You're awesome.🥰
No you're awesome! 😤
Lol thank you for the kind words!
@@Deanin Thanks a lot. I am a little disappointed with the limitation of Rails 7, and using TipTap with it. I have developed a pretty well functioning TipTap texteditor for Rails but when I wanted to add features like URL inserting and Image uploading, I was limited. What would be your solution to this brother?
I'm honestly not sure what my solution would be. In my chatroom series I basically built out a text parser just to pick up stuff like a url inserts. But then you'd have to probably do image uploads from the client side with a similar DirectUpload approach. It sounds like you'd have to build out some kind of solution yourself, which does sound like a pretty big limitation.
Thank you once again haven't watched it yet will have a look after work
I just wanted to say again that I do appreciate it. There's a couple other things I want to take a look at with these drag and drop uploads to make them a bit more usable. I'm thinking of maybe trying to do a railsbytes template or something. I hope this is good enough for now though. :)
@@Deanin Hi. The tutorial is good but, as you just said, I think another video going over "how to use it" would be more useful/popular for people who are scared of a 43 minutes coding video. I watched it all and I appreciated it but, from a CZcams perspective, a 5-7 minutes videos with all required code in Gists would be more appealing to the general population.
A nice follow up to this video would be handling the edit of the page with existing images. My current implementation simply display the images with a delete link outside of the dropzone but having everything inside the dropzone would make it so much cleaner.
agree
Hello Deanin,
Thanks you a lot for your wonderful videos, I'm actually studying Rails 7 with my own group on a huge web dev formation.
We've implemented the drag&drop system for images and it's work perfectly when it launched on local but in production ( when we upload the project on the Heroku platform ) the drag & drop didn't work and the button " add files " appear instead ( he is functional but we can't drag & drop ), do have any explanation of this phenomen and how to solve it ?
Sorry for my english, I'm french.
Thanks you again ! :-)
Bravo!!!!
It was Excellent tutorial. However i am facing an issue when i want to connect this to Amazon or Azure storage. Is it other any other implementation in rails 7 or is there something else we need to do.
how to handle file uploads for pdf files...I am not able to get files after uploading