How to Upload Files in ReactJs With Example?

in this article, I will apportion with you how to upload files in react js by utilizing Axios.

This tutorial will provide an example of the react js file upload component. you can understand a concept of react js file upload to server. you can optically discern react js upload a file. This post will give you simple example of react js ajax file upload. Follow the bellow tutorial step of reactjs file upload formdata.

In react upload image with Axios first you have to install Axios in your project. then we got one file input in a form. after that on file input transmute you have to fire one function. in this function, we set file objects in the state. then we fire API with Axios on form submit button.

Step - 1 : Install Axios Command

npm install axios --save

Step -2 : Change /src/App.js file

in the secound step make changes in /src/App.js

import React from 'react';
import './App.css';
import FileUpload from './FileUpload';

function App() {
  return (
    <div>
      
        <FileUpload />

    </div>
  );
}

export default App;

Step - 3 : Create /src/FileUpload.js file

import React from 'react'
import axios from 'axios';

class FileUpload extends React.Component{

    constructor(){
        super();
        this.state = {
            selectedFile:'',
        }

        this.handleInputChange = this.handleInputChange.bind(this);
    }

    handleInputChange(event) {
        this.setState({
            selectedFile: event.target.files[0],
          })
    }

    submit(){
        const data = new FormData() 
        data.append('file', this.state.selectedFile)
        console.warn(this.state.selectedFile);
        let url = "http://localhost:8000/upload.php";

        axios.post(url, data, { // receive two parameter endpoint url ,form data 
        })
        .then(res => { // then print response status
            console.warn(res);
        })

    }

    render(){
        return(
            <div>
                <div className="row">
                    <div className="col-md-6 offset-md-3">
                        <br /><br />

                            <h3 className="text-white">React File Upload - HackTheStuff.com</h3>
                            <br />
                            <div className="form-row">
                                <div className="form-group col-md-6">
                                    <label className="text-white">Select File :</label>
                                    <input type="file" className="form-control" name="upload_file" onChange={this.handleInputChange} />
                                </div>
                            </div>

                            <div className="form-row">
                                <div className="col-md-6">
                                    <button type="submit" className="btn btn-dark" onClick={()=>this.submit()}>Save</button>
                                </div>
                            </div>
                    </div>
                </div>
            </div>
        )  
    }
}

export default FileUpload;

Step - 4 : Create /upload-react/upload.php file

 <?php
   
    header("Access-Control-Allow-Origin: *");
    header("Access-Control-Allow-Methods: PUT, GET, POST");
    header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");
       
    // Folder Path For Ubuntu
    // $folderPath = "/var/www/upload-react/";
    // Folder Path For Window
    $folderPath = "upload-react/";
   
    $file_tmp = $_FILES['file']['tmp_name'];
    $file_ext = strtolower(end(explode('.',$_FILES['file']['name'])));
    $file = $folderPath . uniqid() . '.'.$file_ext;
    move_uploaded_file($file_tmp, $file);
   
   return json_encode(['status'=>true]);

i hope you like this article.