Home Php How to upload image with react js and php?

How to upload image with react js and php?

by therichpost

Hello, welcome to therichpost.com. In this post, I will tell you, How to upload image with react js and php?  Reactjs is a Javascript Library to build user interface.

We will upload image through reactjs in php with move_uploaded_file function in php and this is very interesting. 

I did react js and php collaboration in my post and this is very good. 

Here is the working and tested code in reactjs and you can add this into your index.js file:
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios';
class Hello extends React.Component{
  state = {
    selectedFile : null
  fileSelect = event => {
    this.setState({selectedFile: event.target.files[0]})
  fileUpload = () => {
    const fd = new FormData();
    fd.append('image', this.state.selectedFile, this.state.selectedFile.name);
    axios.post('http://localhost/core_php.php', fd

  render() {
    return (
    <input type="file" onChange = {this.fileSelect} />
  <button onClick = {this.fileUpload}>Upload</button>

  ReactDOM.render(<Hello />, document.getElementById('root'));
 Here is the code for php and you can add this into your code_php.file and you also need to make img folder also:
move_uploaded_file($_FILES["image"]["tmp_name"], "img/" . $_FILES["image"]["name"]);

 If you have any query related to this code and you can comment below. I will come with more reactjs posts.

You may also like


Sim Panha June 25, 2018 - 4:32 am

excuse me, i have error “const fd = new FormData();” not found when i compiled

therichpost June 25, 2018 - 3:20 pm

how did you compile? but this code is working fine.
npm start

jasmeen June 26, 2018 - 3:24 am

good post, it saved my day..

Ajay Malhotra December 18, 2018 - 10:41 am

Thank you

Shusmoy December 18, 2018 - 10:39 am

I am getting null $_FILES[“image”][“name”] or in $_FILES[“image”] …….. can you please help me what is the problem????

Ajay Malhotra December 18, 2018 - 3:54 pm

DID you check your react console? I think, your react did not send file properly.
are you using same above code?

Divesh Diggiwal December 18, 2018 - 10:45 am

Good one, thank you..

Ajay Malhotra December 18, 2018 - 3:50 pm

Thank you Divesh

Gulam January 4, 2019 - 2:23 pm

Where i have to create a image folder inside a project or in xamp server

Ajay Malhotra January 4, 2019 - 2:26 pm

I did this in xamp server.

arpan gaur May 7, 2019 - 5:26 am

fd.append(‘image’ what does ‘image’ signify, can we write something else.

Arslan Ahmed September 8, 2020 - 7:32 am

how to upload multiple photos plz tell

Ajay Malhotra September 8, 2020 - 8:00 am Reply
MIHIR September 23, 2020 - 7:25 am

I am getting this error Access to XMLHttpRequest at ‘http://woonext.local/reactimageupload.php’ from origin ‘http://localhost:3000’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

Tarek Ahmed January 13, 2021 - 4:11 pm

Please add this line below at the top of your php script file
Header(“Access-Control-Allow-Origin: *”);

Ajay Malhotra January 13, 2021 - 4:49 pm

Okay, thanks

Tarek Ahmed January 13, 2021 - 4:08 pm

You are Great,,, but how can i show image from database in react js file???

Ajay Malhotra January 13, 2021 - 4:46 pm

Check this, here I am getting images from database:

Kanishka Dew Sandaruwan January 28, 2021 - 10:59 am

Thanks Bro.

Ajay Malhotra January 28, 2021 - 11:00 am

Welcome :).


Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.