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

[@marcosfilho7016]

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.

[@Webcrunch]

Appreciate the support and kind words!

[@IvanRaszl]

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?

[@yairfacio6499]

Thank you it's a great video. Could you make another video explaining how to install tailwindcss from scratch? Thanks

[@aleksandrbalakiriev447]

Thanks, very useful!! Do you plan to finish with edit images by updating post? it will be awesome

[@Webcrunch]

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.

[@jessicasciani9250]

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 :)

[@Webcrunch]

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.

[@time4anew1]

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.

[@aachaltayade8685]

Hi, edit form not populate uploaded image. Can you please help

[@MajaProkic]

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?

[@gagnedan2k]

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 !!!

[@AndyLeverenzJustalever]

I mix them up sometimes :) i made this one too.

[@brentgreeff1115]

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.

[@Webcrunch]

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...

[@sandhyamahesh3082]

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..

[@Webcrunch]

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.

[@ervinismu6265]

big thanks

[@jl789nz]

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.

[@Webcrunch]

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.

[@jl789nz]

@@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.

[@CHAPEAUDEPAILLE24]

So good brow!!!!

[@MirrorCommunications]

Nice!

[@Teekay400]

How do I contact you?

[@AndyLeverenzJustalever]

Check the about section of my channel.

[@beinlive.online4413]

github link dosnt work

[@Webcrunch]

Should work now! Sorry about that

[@beinlive.online4413]

@@Webcrunch thanks for the very helpfull content

[@PhilSmy]

Looks good, but it's a shame it depends on Stimulus!

[@phonk64]

Neither Rails nor Dropzone *depend* on Stimulus. You do not have to implement it this way. This is *far far* too complex, IMHO.