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]})
console.log(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
).then(res=>
{
console.log(res);
}
);
}
render() {
return (
<div>
<input type="file" onChange = {this.fileSelect} />
<button onClick = {this.fileUpload}>Upload</button>
</div>
);
}
}
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:
<?php 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.
Comments
20 responses to “How to upload image with react js and php?”
excuse me, i have error “const fd = new FormData();” not found when i compiled
how did you compile? but this code is working fine.
npm start
good post, it saved my day..
I am getting null $_FILES[“image”][“name”] or in $_FILES[“image”] …….. can you please help me what is the problem????
Thank you
Good one, thank you..
Thank you Divesh
DID you check your react console? I think, your react did not send file properly.
are you using same above code?
Where i have to create a image folder inside a project or in xamp server
I did this in xamp server.
fd.append(‘image’ what does ‘image’ signify, can we write something else.
how to upload multiple photos plz tell
Check this simple and easy method:
https://therichpost.com/reactjs-ecommerce-site-add-product/
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.
You are Great,,, but how can i show image from database in react js file???
Please add this line below at the top of your php script file
Header(“Access-Control-Allow-Origin: *”);
Check this, here I am getting images from database:
https://therichpost.com/reactjs-ecommerce-site-product-quick-view/
Okay, thanks
Thanks Bro.
Welcome :).