Upload and Store Base64 Image in React Js with PHP

Upload and save base64 image example; In this tutorial, you will learn how to upload and store Base64 images using React Js with PHP web apis.

How to Upload and Store Base64 Image in React Js with PHP

Steps to upload and store base64 images in React JS:

Step 1 – Create React App

Run 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

Run the following command to install bootstrap library into your react app:

npm install bootstrap --save

npm install axios --save

Add 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 – Creating a React Js component for uploading images

In this step, visit the src directory of your React JS app, and create an image upload form component named FileUpload.js, and add the following code to 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 - Tutsmake.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 – Add Component in App.js

In this step, you need to add 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

In this step, you need to create a php file name upload.php, and add the following code to 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.

Recommended React JS Posts