Drag And Drop Active Storage Uploads With Dropzone | Intro To Ruby On Rails 7 Part 28
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: https://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: https://github.com/Deanout/blog_application
References:
Lazaronixon:
https://gist.github.com/lazaronixon/dca1b48c241422d6347f4b0c93bec739
Web Crunch:
https://web-crunch.com/posts/rails-drag-drop-active-storage-stimulus-dropzone
Known Rails Issue:
https://discuss.rubyonrails.org/t/rails-7-0-1-activestorage-invaliddirectuploadtokenerror-activestorage-invaliddirectuploadtokenerror/79824/2
https://github.com/rails/rails/issues/43971
Additional References:
https://www.dropzone.dev/js/
https://github.com/Deanout/turbo_chatroom/tree/main/episode_28
https://edgeguides.rubyonrails.org/active_storage_overview.htm #example
Join this channel to help support these videos:
https://www.youtube.com/channel/UCRQv-3VvPT9mArF5RfrlpKQ/join
Follow me on social media:
https://linktr.ee/deanin
If you liked this video, please consider subscribing: https://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
Что делает видео по-настоящему запоминающимся? Наверное, та самая атмосфера, которая заставляет забыть о времени. Когда вы заходите на RUVIDEO, чтобы посмотреть онлайн «Drag And Drop Active Storage Uploads With Dropzone | Intro To Ruby On Rails 7 Part 28», вы рассчитываете на нечто большее, чем просто загрузку плеера. И мы это понимаем. Контент такого уровня заслуживает того, чтобы его смотрели в HD 1080, без дрожания картинки и бесконечного буферизации.
Честно говоря, Rutube сегодня — это кладезь уникальных находок, которые часто теряются в общем шуме. Мы же вытаскиваем на поверхность самое интересное. Будь то динамичный экшн, глубокий разбор темы от любимого автора или просто уютное видео для настроения — всё это доступно здесь бесплатно и без лишних формальностей. Никаких «заполните анкету, чтобы продолжить». Только вы, ваш экран и качественный поток.
Если вас зацепило это видео, не забудьте взглянуть на похожие материалы в блоке справа. Мы откалибровали наши алгоритмы так, чтобы они подбирали контент не просто «по тегам», а по настроению и смыслу. Ведь в конечном итоге, онлайн-кинотеатр — это не склад файлов, а место, где каждый вечер можно найти свою историю. Приятного вам отдыха на RUVIDEO!
Видео взято из открытых источников Rutube. Если вы правообладатель, обратитесь к первоисточнику.