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: https://github.com/jsonapi-serializer...
Source Code: https://github.com/Deanout/active-sto...

Sources:
  / structuring-multipart-formdata-with-rails-...  
https://dakotaleemartinez.com/tutoria...

Follow me on social media:
https://linktr.ee/deanin

Join this channel to get access to perks:
   / @deanin  

If you liked this video, please consider subscribing: https://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