Sending Images in React using Fetch and storing them in your Ruby on Rails API backend!
In this article we are going to cover sending an Image using Fetch, storing that image in Rails Active Storage and retrieving that image when a user visits your site.
So you have your Rails API running and your React front end running. I will assume you can make new users through a signup form if not we will quickly run through that as well!
After running create-react-app and starting the server you should see the nice React starter page! Lets make a User Signup Component!
Hopefully you are familiar with the above image and whats going on so far! In our onSubmit function we will make a Post to our /users route. Lets add the code now!
This may look slightly different because we are using FormData(). FormData take that avatar file and encode it for us and set our header to multipart/form-data so we can send the file and the user data together. So a user can fill in a username, a password, and select an image to use as their profile picture. The frontend is almost complete, we will just need to handle the response but we will visit that once we have our rails api setup!
The Backend — Rails API
Before we start there are a few things you need to do.
- Add a img_url in your users_table- we will store the url to the avatar image
- Run rails active_storage:install to generate a migration
- Run rails db:migrate to run the newly created migration.
- Add the following code to your config/storage.yml file.
test:
service: Disk
root: <%= Rails.root.join("tmp/storage") %>local:
service: Disk
root: <%= Rails.root.join("storage") %>
You have a User model and a UsersController, right? Right! By default a “Post” to /users should route to users#create in our UsersController so let’s start there!
Your UsersController create method should look like this. Lets break it down. We start by creating a new user using the strong params. Next we need to attach the avatar file we sent. Now we want to the the url and save it to our user so we can retrieve the image on the front end ( We set the html <img src=our_new_url />).
Last but not least we need to add the following code to our User model. (user.rb)
Thats it for the backend. Now back to the front end, our user object that we are receiving back should have our user information that also includes the img_url that points to their avatar image. Rails magic will handle the retrieval of the image. We can now take the user to the main page and set the img tags src to the img_url just like you would with any html img tag!
Active Storage is really to help with setting up AWS S3 or something similar but for testing and developing, using local disk storage is suffice.
THE END
