Categories

Thursday, March 28, 2024
#919814419350 therichposts@gmail.com
PhpReactjs

How to upload image with react js and php?

Upload image with react js and php

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.

therichpost
the authortherichpost
Hello to all. Welcome to therichpost.com. Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know WordPress, Core php, Angularjs, Angular 14, Angular 15, Angular 16, Angular 17, Bootstrap 5, Nodejs, Laravel, Codeigniter, Shopify, Squarespace, jQuery, Google Map Api, Vuejs, Reactjs, Big commerce etc.

20 Comments

Leave a Reply

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