API Image Uploads With Active Storage And React In Ruby On Rails 7

Upload images from a JavaScript frontend to your Rails 7 backend using this quick tutorial! This tutorial uses React, but this will also work with Vue, Angular, Svelte, or other framework.
The key is using the JSON API Serializer gem for Rails, which can be used to respond with a custom JSON response that includes the active storage image url. Link for that gem is below.
Gem: github.com/jsonapi-serializer/jsonapi-serializer
Source Code: github.com/Deanout/active-storage-api-uploads
Sources:
iambryanhaney.medium.com/structuring-multipart-formdata-with-rails-naming-conventions-ded7113f7593
dakotaleemartinez.com/tutorials/rails-api-active-storage-file-uploads/
Follow me on social media:
linktr.ee/deanin
Join this channel to get access to perks:
kzread.info/dron/RQv-3VvPT9mArF5RfrlpKQ.htmljoin
If you liked this video, please consider subscribing: t.co/RZ4EwP0F2a
Timestamps
0:00 Creating The Initial Project Structure
0:56 Creating The Scaffold With Image Attached
1:43 Setup The Backend Rails App
3:56 Creating The Frontend React App
4:05 Setup The React Context API
6:48 Create The React Upload Form
12:13 Displaying The Latest Rails 7 Image In React
15:10 Create Custom JSON Serializer In Rails 7 With JSONAPI-Serializer
19:13 Bugfixes And Project Demo
#Deanin #Software #Programming

Пікірлер: 33

  • @Deanin
    @Deanin2 жыл бұрын

    Hopefully this is helpful! I've seen this request a few times but never sat down to really try and solve it. I feel a bit more comfortable with APIs now so this ended up being not too bad.

  • @fabianofrank4785

    @fabianofrank4785

    Жыл бұрын

    suggestion is to go with redux and toolkit next time... is quite a thing using rails api + react/redux

  • @mykovasyl
    @mykovasyl Жыл бұрын

    Let me just say, using ActiveStorage to give my users an avatar has been my entire goal for my final project at bootcamp. I spent countless hours on it, countless. Nothing worked. The docs on ActiveStorage didn't give the full picture, everyone else was using devise and other languages and gems and yadda yadda...nothing worked for my situation. I then spent another 7 hours trying to get it to work with the help of a software engineer friend. It all seemed hopeless. Then, I found your video. In one hour, I had an avatar staring back at me on the profile page. My eyes almost filled with tears at the joy I felt (and if you ask my wife, I don't have emotions). You sir are my hero. You have given me release from this nightmare. I can finally step out into the sunlight (tomorrow morning) and breath easy. Thank you, thank you, thank you so so much!

  • @Deanin

    @Deanin

    Жыл бұрын

    I'm in tears reading this, both from laughter and from relatability when I first had to crawl through this mess to figure it out. I'm glad it helped, and thank you for making my night with this comment!

  • @mykovasyl

    @mykovasyl

    Жыл бұрын

    @@Deanin I would love to see a video on attaching multiple files, attaching PDFs and JPEGs for another user to download. So a tutor would upload several files/worksheets and the student would be able to click the link to preview and then download the files. Please let me know when you make one! Thank you! :)

  • @Deanin

    @Deanin

    Жыл бұрын

    Just wanted to stop by and say I recorded something similar. It covers how to upload multiple images/files from an API and displays them. At that point, you'd just have to create the preview link and download functionality, but you're at least storing/retrieving multiple attachments. Should be up in a few hours!

  • @iliatalebzade8751
    @iliatalebzade8751 Жыл бұрын

    Please, Please, Please don't stop making videos man you're one of the few creators that do rails tuts at this level of comprehensiveness, if not the only one

  • @Deanin

    @Deanin

    Жыл бұрын

    I'm trying to keep them up haha. I'm really glad they're helpful!

  • @s.bamahfoodh
    @s.bamahfoodh7 ай бұрын

    Thank you so much, I am stuck with this image uploading thing for so long. Following your tutorial saved my life. Like, Subscribe and a big Share

  • @Deanin

    @Deanin

    7 ай бұрын

    I'm just glad it worked for you! 🙂

  • @beacoder
    @beacoder2 жыл бұрын

    yassss! another option to consider other than `includes` / serializers could be `methods`, so render json: @product, includes: [:desc, :created_at], methods: [:image_url]

  • @axolnetwork2419

    @axolnetwork2419

    2 жыл бұрын

    Thx! you save my life! In this example, you only need to show 1 image, but when I need to do a .all render json: CategorySerializer.new doesn't work to me

  • @nikstac695

    @nikstac695

    Жыл бұрын

    Thank you for this comment! This was the solution for me using .all

  • @aanmeba
    @aanmeba Жыл бұрын

    literally you saved me! Thank you so much! I was suffering to figure out "missing params" error. Thank you so much!

  • @Deanin

    @Deanin

    Жыл бұрын

    Glad it helped!

  • @alexis-xj4rc
    @alexis-xj4rc2 жыл бұрын

    true this one was really needed also hopefully you gonna hit on nextJS with typescript

  • @tbfromsd
    @tbfromsd Жыл бұрын

    Thank you so much. The JSON API Serializer saved the day. Great tutorial, subscribed.

  • @Deanin

    @Deanin

    Жыл бұрын

    Glad it helped! And yeah, that JSON serializer was a cool find haha

  • @techadventures6645
    @techadventures6645 Жыл бұрын

    excellent, i managed to make it work on prod with aws sdk, and also update the post image. thanks !

  • @nikstac695
    @nikstac695 Жыл бұрын

    incredible!

  • @michaelmiles2543
    @michaelmiles2543 Жыл бұрын

    This was extremely helpful! Wondering if you have any advice on retrieving image urls from the relational data included in the fetch? For example, fetching an instance of a Post along with the user who made said post and tying to get the url for the avatar of that user. Looking forward to viewing more of your videos!

  • @StatusKing-xp2xu
    @StatusKing-xp2xu Жыл бұрын

    Salute you man 👍🏻👍🏻

  • @fabianofrank4785
    @fabianofrank4785 Жыл бұрын

    I love you, sorry, that was precisely what I needed lol

  • @rhodler_
    @rhodler_ Жыл бұрын

    Merci beaucoup. Sois béni :D

  • @ahmedkabbaj6973
    @ahmedkabbaj69732 жыл бұрын

    thanks for a lot

  • @jeremypeskin4936
    @jeremypeskin4936 Жыл бұрын

    Thanks!

  • @Deanin

    @Deanin

    Жыл бұрын

    Thank you! 🙂

  • @poterior1314
    @poterior1314 Жыл бұрын

    Update: Change "jsx": "react" => "jsx": "react-jsx" in jsconfig.json if you got error: 'React' refers to a UMD global, but the current file is a module

  • @zubairsk1624
    @zubairsk1624 Жыл бұрын

    hi can i use has_many_attached and if the answer is yes how to do that, thanks

  • @nicholasmendez2948
    @nicholasmendez2948 Жыл бұрын

    which vs code extension do you use for the autofill suggestions , ex. post request at 11:21 ?

  • @Deanin

    @Deanin

    Жыл бұрын

    I think the two extensions I use for that are TabNine and GitHub CoPilot

  • @nicholasmendez2948

    @nicholasmendez2948

    Жыл бұрын

    @@Deanin thank you

  • @danielefe3773
    @danielefe37738 ай бұрын

    🤣🤣 40years later thank God we now have vite