How to Upload and Save Base64 Image in React Js

React js save base64 image example; In this tutorial, i will provide you complete guide on how to upload base64 image and store in react js app with multi-part Form Data. And send image to server using Axios and HTML5 FormData.

Base64 is an encoding algorithm that converts any characters, binary data, and even images or sound files into a readable string, which can be saved or transported over the network without data loss. … Base64 images are primarily used to embed image data within other formats like HTML, CSS, or JSON.

For storing image to directory and database, i will use a simple PHP application that exposes a unique endpoint that accepts a POST request containing the file/image to upload base64 image.

React Js Upload Base64 Image Example

  • Step 1 – Create React App
  • Step 2 – Install Axios and Bootstrap 4
  • Step 3 – Create Image Upload Form Component
  • Step 4 – Import Image Upload Form Component in App.js
  • Step 5 – Create PHP File

Step 1 – Create React App

Open your terminal and execute the following command on your terminal to create a new react app:

npx create-react-app my-react-app

To run the React app, execute the following command on your terminal:

npm start

Check out your React app on this URL: localhost:3000

Step 2 – Install Axios and Bootstrap 4

Execute the following command to install boostrap 4 library into your react app:

npm install bootstrap --save

npm install axios --save

Import bootstrap.min.css file in src/App.js file:

import React from 'react';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
function App() {
  return (
    <div>
      <h2>How to Upload Base64 Image in React Js</h2>
    </div>
  );
}
export default App;

Step 3 – Create Image Upload Form Component

Go to src directory of your react js app and create a image uplaod form component named FileUpload.js. And add the following code into it:

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) {
        let files = event.target.files;
        let reader = new FileReader();
        reader.readAsDataURL(files[0]);
        reader.onload = (e) => {
            
            this.setState({
                selectedFile: e.target.result,
              })
        }
    }
    submit(){
        const formData = { image: this.state.selectedFile }
        
        let url = "http://localhost:8000/upload.php";
        axios.post(url, formData, { // receive two parameter endpoint url ,form data 
        })
        .then(res => { // then print response status
            console.warn(res.data);
        })
    }
    render(){
        return(
            <div>
                <div className="row">
                    <div className="col-md-6 offset-md-3">
                        <br /><br />
                            <h3 className="text-white">React js Upload and Save Base64 Image - laratutorials.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 – Import Image Upload Form Component in App.js

Import FileUpload.js file in src/App.js file:

import React from 'react';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import FileUpload from './FileUpload'
function App() {  
    
  return (  
    <div className="App">  
      <FileUpload/>  
    </div>  
  );  
}  
export default App;

Step 5 – Create PHP File

Create upload.php; And add the following code into it:

<?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");
    
    $folderPath = "/var/www/upload-react/";
    $postdata = file_get_contents("php://input");
    $request = json_decode($postdata);
      
    $image_parts = explode(";base64,", $request->image);
      
    $image_type_aux = explode("image/", $image_parts[0]);
      
    $image_type = $image_type_aux[1];
      
    $image_base64 = base64_decode($image_parts[1]);
      
    $file = $folderPath . uniqid() . '.png';
      
    file_put_contents($file, $image_base64); 
  
?> 

Next, start the PHP server using the following command from the root of your file upload app:

php -S 127.0.0.1:8080

Now, you have a running PHP server that exposes an /upload.php REST endpoint.

Conclusion

React js save base64 image example. In this tutorial, you have learned how to upload base64 image and store in react js app. And as well as, you’ll learn how to handle multi-part Form Data in React js app by implementing a simple file upload example.

Recommended React JS Posts

Leave a Comment