After reading this article, you should be able to create a UI that allows you to use to upload an image to an API endpoint. It will also address the problems that arise when the conventions are not followed. React react-hook-form Prerequisite This article is intended for readers who are already familiar with the following topics. making a API-only application Rails with basic knowledge of React Rails part So, first and foremost, we must create the API-only project by following the steps Rails shown below, type the command to create a new rails app with the default of and as the default database. --api PostgreSQL rails new myprojectname -d postgresql --api Navigate to the project folder and run bundle install Since we are using as our database. Let us configure the database by going to the following path then set the host, username, and password as in the example below PostgreSQL config/database.yml default: &default
  adapter: postgresql
  encoding: unicode
  host: localhost
  username: postgres
  password: myPassword123 Run rails to create the database. db:create Our PostgreSQL database is now complete. It's now time to set up the cors so that other clients can use our API. Let's open the gem file and add the gem as shown below. rack-cors gem "rack-cors" and then run bundle install Then, in , set the origins to your client URL, as shown below. config/initializers/cors.rb Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    # origins "www.clienturl.com"
    origins 'http://localhost:3006'
    resource "*",
      headers: :any,
      methods: [:get, :post, :put, :patch, :delete, :options, :head]
  end
end since only the local environment will be covered in this article. Let's make the development environment's URL the default. Navigate to and write the code below. config/environments/development.rb Rails.application.routes.default_url_options = {
    host: "http://localhost:3000"
} Let's start with the Post model, which I'll make using a scaffold generator by typing the command below. rails g scaffold Post caption:string then run the migration rails db:migrate Our REST API is now complete, and we can make API calls from the terminal, but we are unable to upload an image. To enable image uploading, we must first install active storage by running the command below. bin/rails active_storage:install rails db:migrate Now, using the path , navigate to the post model and add the image attachment code as shown below. app/models/post.rb class Post < ApplicationRecord
    has_one_attached :image

end You can also add model validation by including the code below. validates :caption, :image, presence: true Then, in the posts controller, permit the image attribute as shown below def post_params
    params.require(:post).permit(:caption, :image)
 end Now, the API returns data in JSON format, as shown below. [
  {
    "id": 14,
    "caption": "Jumping rope time",
    "created_at": "2022-10-31T06:00:32.614Z",
    "updated_at": "2022-10-31T06:00:32.645Z"
  },
  {
    "id": 15,
    "caption": "Today's fashion",
    "created_at": "2022-10-31T06:00:50.969Z",
    "updated_at": "2022-10-31T06:00:50.997Z"
  }
] The data above are attributes returned from our REST API response; we see and , but no image attribute. We need a way to present our data using or to fix this. You can use an active model serializer gem, but I won't go into detail about it in this article. I'm going to create my , which will determine which attributes are returned as JSON by restricting and allowing some of the data, for example, you may choose to hide the attributes while displaying the id, caption, created_at, updated_at serializers representers representers date-time image URL. Because our data is coming from the index action in , the method looks like this: posts_controller.rb def index
  @posts = Post.all
  render json: @posts
end We need to replace the above code with def index
   @posts = Post.all 
   render json: PostRepresenter.new(@posts).as_json
end Since the PostRepresenter class is not defined, as you can see above, we must first open our app folder, then create the representers folder, and finally, create a file called and add the following code to it. posts_representers.rb class PostsRepresenter
    def initialize(posts)
      @posts = posts
    end
  
    def as_json
      posts.map do |post|
        {
          id: post.id,
          caption: post.caption,
          image: post.imageUrl
        }
      end
    end
  
    private
  
    attr_reader :posts
  end The class, which is represented by the code above, has a method called It uses a map block method to repeatedly iterate through all posts and displays the information in JSON format. PostsRepresenter as_json. As you can see, we displayed the image attribute but the is not defined, so let us define it in the file. image: post.imageUrl imageUrl app/model/post.rb def imageUrl   
    Rails.application.routes.url_helpers.url_for(image) if image.attached?
 end As a result, our Post model will look like this: class Post < ApplicationRecord
    has_one_attached :image
    validates :caption, :image, presence: true

    def imageUrl   
      Rails.application.routes.url_helpers.url_for(image) if image.attached?
    end
end Our REST API is now complete, and anyone can consume it using any front-end application such as , , or others, and it returns the JSON response shown below. React Vue [
  {
    "id": 14,
    "caption": "Jumping rope time",
    "image": "http://localhost:3000/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBFdz09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--a216f6670f89e8f6d39fbce189af62e3d45633d6/jump%20rope.jpg"
  },
  {
    "id": 15,
    "caption": "Today's fashion",
    "image": "http://localhost:3000/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBGQT09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--be43dde8cfaa13e097b95e936e1a9cfd817f21e3/fashion.png"
  },
  {
    "id": 25,
    "caption": "The sport I like",
    "imageUrl": "http://localhost:3000/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBIZz09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--31fcdcf03292d53f4d9df25c1a46dc12844992f5/jump%20rope.jpg"
  }
] React.js part This section will go over the Axios for making API calls, as well as the react-hook-form and the context API. Now, run the following command to create the react app. npx create-react-app imageuploader

cd imageuploader Since the rails API is running on port 3000. Let us change the front-end port to 3006 by creating a file and pasting the code below. .env PORT=3006 then, by entering the following commands, we'll install the dependencies we'll need for this project. npm install axios
npm install react-hook-form Since and are currently empty, we must first create them before importing them into . We are aware that we must use the context API to manage states. To use it throughout all of our components, we will create the context . After that, we will apply this context to the returned jsx. Any app component will be able to access the state. AddPost.js DisplayPost.js App.js PostContext import { createContext, useState } from "react";
import AddPost from "./components/AddPost";
import DisplayPost from "./components/DisplayPost";

export const PostContext = createContext(null); // Defining the context

function App() {
  const [post, setPost] = useState(PostContext) // Defining the states using context
  return (
    <PostContext.Provider value={{post, setPost}}> // Wrapping the app with the context API
      <div className="container">
       <AddPost />
       <DisplayPost />
      </div>
    </PostContext.Provider>
  );
}

export default App; We must now focus on the AddPost.js component. Let us create a form that, when submitted, will send a POST request to the API and store the response in the state. To use the react-hook-form, we must first import the useForm hook. This hook has a method that receives a callback sendDataToApi that receives form inputs. To upload an image, we must use object and append the form inputs. It is common practice to use the string containing the rails . If the name of your model is and it has an attribute like , you could use as the key to the Formdata; otherwise, the rails backend app will throw an error saying . When the post request is successful, you must save the response data's state to the context API. handleSubmit FormData() “modelname[attribute]” Post image "post[image]" Unpermitted parameter::image import React, { useContext, useState } from 'react'
import axios from 'axios';
import { useForm } from 'react-hook-form';
import { PostContext } from '../App';

const AddPost = () => {
  const { register, handleSubmit, reset } = useForm(); // 
  const {post, setPost} = useContext(PostContext);

  const sendDataToApi = (data) => {
    const formData = new FormData()
    const post = { ...data, image: data.image[0] }
    formData.append('post[caption]', post.caption)
    formData.append('post[image]', post.image)
    console.log(formData)
    axios.post('http://localhost:3000/posts', formData, {
      headers: { 'Content-Type': 'multipart/form-data' },
      withCredentials: true,
    })
    .then((response) => {
      if(response.data.status === 'created') {
        setPost(response.data.post)
      }
    })
    reset()
  };

 return (
    <div>
      <h1>Wall of fame</h1>
      
      <form className="form" onSubmit={handleSubmit(sendDataToApi)}>
        <div className="form-floating mb-2 col-10">
          <input type="file"  name="image"  {...register('image')} accept="image/*" />
          <label htmlFor="floatingInputImage">Image</label>
        </div>
        <div className="form-floating mb-2 col-10">
          <input type="file"  name="caption"  {...register('caption')} accept="image/*" />
          <label htmlFor="floatingInput">Caption</label>
        </div>
                  
        <div className="form-floating mb-3 col-10">
           <button type="submit" className="btn btn-primary ">Add Car</button>
        </div>
      </form>
    </div>
  )
}

export default AddPost Let us go to DisplayPost.js, here on page refresh hook will fetch all posts using the get request and save them to the context API using method. See the code below it explain it well. useEffect setPost import React, { useContext, useEffect } from 'react'
import axios from 'axios'
import { AppContext } from '../App'
import Loading from './Loading';


const DisplayPost = () => {
    const {post, setPost} = useContext(AppContext);
    
    useEffect(() => {
        axios.get('http://localhost:3000/posts')
        .then((response) => {
        setPost(response.data)
        })
    }, [setPost])

  
    
  return (
    <div className='container border border-info'>
        <div className="row">
            {
                Array.from(post).map((data) => {
                    return (
                        <div className="col-3"  key = {data.id}>
                            <div className="card">
                                <img className="card-img-top" src={data.image} alt="url for foto" />
                                <div className="card-body">
                                  <p className="card-text">{data.caption}</p>
                                </div>
                            </div>
                        </div>
                    )
                })
            }
        </div>
    </div>
  )
}

export default DisplayPost Now that the front end is complete, you can upload the image to the Ruby on Rails API backend locally. To make it work in production, we must store the photos in services such as which I will discuss in the following article. AWS S3 buckets, Thank you for your time.

Fetch

How to Upload an Image From React to the Rails API Using React-hook-form and Context API

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Building a Sidebar in React with a Higher-Order Component

4 Tips & Tricks That Will Make Your ReactJS Code More Clear and Reliable

Authentication: Create a Simple Rick and Morty Wiki Page

Building a Fully Functional Youtube Clone Using Firebase, FFmpeg, And React [Part-3]

Creating Context in ReactJS Using TypeScript

How to Create a Custom State Management Library With React Hooks and Context API

Building a Sidebar in React with a Higher-Order Component

4 Tips & Tricks That Will Make Your ReactJS Code More Clear and Reliable

Authentication: Create a Simple Rick and Morty Wiki Page

Building a Fully Functional Youtube Clone Using Firebase, FFmpeg, And React [Part-3]

Creating Context in ReactJS Using TypeScript

How to Create a Custom State Management Library With React Hooks and Context API

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps