React.js Image Preview and Upload to Server Class Component in Browser Using Javascript Full Project For Beginners

React.js Image Preview and Upload to Server Class Component in Browser Using Javascript Full Project For Beginners

 

Welcome folks today in this blog post we will be building a image preview and upload to server class component in browser using javascript. All the full source code of the application is shown below.

 

 

Get Started

 

 

In order to get started you need to make an index.html file and copy paste the following code

 

index.html

 

<!DOCTYPE html>
<html>
  <head>
    <title>React.js Image Preview and Upload Component in Javascript</title>
   
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h3>React Image Preview & Upload Component</h3>
<div id="mainApp"></div>
<div class="centerText"><span>Checkout associated </span><a href="http://www.hartzis.me/react-image-upload/" target="_blank">blog post</a></div>

  </body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js"></script>
  <script src="script.js"></script>
</html>

 

 

And now make a style.css file inside the root directory and copy paste the below code

 

style.css

 

h3 {
    margin-left: 15px;
  }
  .fileInput {
    border-bottom: 4px solid #d3d3d3;
    border-right: 4px solid #d3d3d3;
    border-top: 1px solid #000;
    border-left: 1px solid #000;
    padding: 10px;
    margin: 15px;
    cursor: pointer;
  }
  .imgPreview {
    text-align: center;
    margin: 5px 15px;
    height: 200px;
    width: 500px;
    border-left: 1px solid #808080;
    border-right: 1px solid #808080;
    border-top: 5px solid #808080;
    border-bottom: 5px solid #808080;
  }
  .imgPreview img {
    width: 100%;
    height: 100%;
  }
  .previewText {
    width: 100%;
    margin-top: 20px;
  }
  .submitButton {
    padding: 12px;
    margin-left: 10px;
    background: #fff;
    border: 4px solid #d3d3d3;
    border-radius: 15px;
    font-weight: 700;
    font-size: 10pt;
    cursor: pointer;
  }
  .submitButton:hover {
    background: #efefef;
  }
  .centerText {
    text-align: center;
    width: 500px;
  }

 

READ  Join React Whatsapp Group Link For Developers in 2021 | React Whatsapp Group Links For React Developers | Whatsapp Group Links For React Programmers

 

And now make a script.js file inside the root directory and copy paste the below code

 

script.js

 

"use strict";

class ImageUpload extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      file: '',
      imagePreviewUrl: ''
    };
  }

  _handleSubmit(e) {
    e.preventDefault(); // TODO: do something with -> this.state.file

    console.log('handle uploading-', this.state.file);
  }

  _handleImageChange(e) {
    e.preventDefault();
    let reader = new FileReader();
    let file = e.target.files[0];

    reader.onloadend = () => {
      this.setState({
        file: file,
        imagePreviewUrl: reader.result
      });
    };

    reader.readAsDataURL(file);
  }

  render() {
    let {
      imagePreviewUrl
    } = this.state;
    let $imagePreview = null;

    if (imagePreviewUrl) {
      $imagePreview = /*#__PURE__*/React.createElement("img", {
        src: imagePreviewUrl
      });
    } else {
      $imagePreview = /*#__PURE__*/React.createElement("div", {
        className: "previewText"
      }, "Please select an Image for Preview");
    }

    return /*#__PURE__*/React.createElement("div", {
      className: "previewComponent"
    }, /*#__PURE__*/React.createElement("form", {
      onSubmit: e => this._handleSubmit(e)
    }, /*#__PURE__*/React.createElement("input", {
      className: "fileInput",
      type: "file",
      onChange: e => this._handleImageChange(e)
    }), /*#__PURE__*/React.createElement("button", {
      className: "submitButton",
      type: "submit",
      onClick: e => this._handleSubmit(e)
    }, "Upload Image")), /*#__PURE__*/React.createElement("div", {
      className: "imgPreview"
    }, $imagePreview));
  }

}

ReactDOM.render( /*#__PURE__*/React.createElement(ImageUpload, null), document.getElementById("mainApp"));

 

 

And now if you open index.html inside the browser you will see the below result

READ  React.js useContext Hook Login User and Storing it Example Tutorial For Beginners 2020

 

 

Leave a Reply