React js File Upload example with Axios

Hello Dev.

This article will provide instance of react js file upload component. you may understand a concept of react js file upload to server. you could see react js upload a file. This article will provide you with easy instance of react js ajax file upload. follow bellow post step of reactjs file upload formdata.

In react upload picture with axios first you need to install axios in your project. then we got one file input in form. after that on file input change you have to fire one function. on this function we set file object in state. then we fire api with axios on form submit button.

Install Axios Command

npm install axios --save

/src/App.js file

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

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

export default App;

/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 - meaningarticles.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;

/upload-react/upload.php file

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'm hoping it assist you to, thanks for visit my article if you like my article then proportion together with your friend and social platform.