React JS Axios File Upload Example

In this tutorial, we will provide you example of react js file upload component. You can easily understand a concept of react js file upload to server. This article will give you simple example of react js ajax file upload. Follow the below tutorial step  by step to reactjs file upload formdata.

First of all, you have to install axios in your project.

npm install axios --save

Then we got one file input in form.

/src/App.js

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

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

    </div>
  );
}

export default App;

After that on file input change you have to fire one function. In this function we set file object in state. Then we fire api with axios on form submit button.

/src/FileUpload.js

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 - Nicesnippets.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;

Below is the server code how to save files into server.

/uploads/upload.php

<?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/uploads/";
// Folder Path For Window
$folderPath = "uploads/";

$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 it will help you.