API Image Uploads With Active Storage And React In Ruby On Rails 7
Vložit
- čas přidán 26. 04. 2024
- 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...
Source Code: github.com/Deanout/active-sto...
Sources:
/ structuring-multipart-...
dakotaleemartinez.com/tutoria...
Follow me on social media:
linktr.ee/deanin
Join this channel to get access to perks:
/ @deanin
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
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.
suggestion is to go with redux and toolkit next time... is quite a thing using rails api + react/redux
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!
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!
@@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! :)
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!
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
I'm trying to keep them up haha. I'm really glad they're helpful!
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
I'm just glad it worked for you! 🙂
yassss! another option to consider other than `includes` / serializers could be `methods`, so render json: @product, includes: [:desc, :created_at], methods: [:image_url]
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
Thank you for this comment! This was the solution for me using .all
literally you saved me! Thank you so much! I was suffering to figure out "missing params" error. Thank you so much!
Glad it helped!
true this one was really needed also hopefully you gonna hit on nextJS with typescript
excellent, i managed to make it work on prod with aws sdk, and also update the post image.
thanks !
Thank you so much. The JSON API Serializer saved the day. Great tutorial, subscribed.
Glad it helped! And yeah, that JSON serializer was a cool find haha
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!
Merci beaucoup. Sois béni :D
incredible!
Salute you man 👍🏻👍🏻
I love you, sorry, that was precisely what I needed lol
thanks for a lot
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
Thanks!
Thank you! 🙂
which vs code extension do you use for the autofill suggestions , ex. post request at 11:21 ?
I think the two extensions I use for that are TabNine and GitHub CoPilot
@@Deanin thank you
hi can i use has_many_attached and if the answer is yes how to do that,
thanks
🤣🤣 40years later thank God we now have vite