How to upload an image to rest api using axios in react js?

Question

how to get file input in react js and then post it to an API.

const api = axios.create({
    baseURL: 'http://localhost:8000/adminuser/categoriesAPI/'
})
class Categories extends Component{

    
    constructor(props) {
        super(props);
        this.state = {
            category : [],
            id:'',
            image_url:null,
        }
        this.getCategories();
    }
    
    handleImage = (e) => {
        this.setState({image_url:e.target.files[0]})
    }
    addCategory =async () => {
        await api.post('/'{name:this.state.name,description:this.state.description,image_url:this.state.image_url})
    }
    render() {
        return(
            <>
             <button type="button" data-bs-toggle="modal" data-bs-target="#AddCategory" ><b>Add New</b</button>
 <div className="modal fade" id="AddCategory" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div className="modal-dialog">
                <div className="modal-content">
                <div className="modal-header">
                    <h5 className="modal-title" id="exampleModalLabel">Add Category</h5>
                    <button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div className="modal-body">
                    <form>
                    <div className="mb-3">
                        <label className="col-form-label">Image Url:</label>
                        <input type="file" className="form-control" name="image_url" onChange={this.handleImage}/>
                    </div>
       
                    
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" className="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="reset" className="btn btn-primary" onClick={this.addCategory} data-bs-dismiss="modal">Submit</button>
                </div>
                </div>
            </div>
            </div>
 </>
        )
    }
}

this is my code for uploading image file but when I select a file as input a blank gray screen shows. but if i see states using console.log() selected file's info is shown correctly.

Does this answer your question? [How do you send images to node js with Axios?](https://stackoverflow.com/questions/39663961/how-do-you-send-images-to-node-js-with-axios) — tsamridh86, Aug 01 '21 at 12:57

score 0 · Answer 1 · answered Jan 23 '23 at 09:33

You Can Upload files Using Form Data

addCategory =async () => {
const { image_url, description, name  } = this.state
    const formData = new FormData();
    formData.append('image_url', image_url, image_url.name) 
    formData.append("description", description)
    formData.append("name",name)
      await axios.post(
        "/",
        formData,
        {
            headers: {
                "Content-type": "multipart/form-data",
            },                    
        }
    )
    .then(res => {
        console.log(res)
    })
    .catch(err => {
 
        console.log(err);
    })
}

How to upload an image to rest api using axios in react js?

1 Answers1