React Image Upload with Preview

ImageUploadComponent.jsx

// https://codepen.io/hartzis/pen/VvNGZP
class ImageUpload extends Component {
  constructor(props) {
    super(props);
    this.state = {
      file: '',
      imagePreviewUrl: ''
    };
    this._handleImageChange = this._handleImageChange.bind(this);
    this._handleSubmit = this._handleSubmit.bind(this);
  }

  _handleSubmit(e) {
    e.preventDefault();
    // TODO: do something with -> 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 = (<img src={imagePreviewUrl} />);
    }

    return (
      <div>
        <form onSubmit={this._handleSubmit}>
          <input type="file" onChange={this._handleImageChange} />
          <button type="submit" onClick={this._handleSubmit}>Upload Image</button>
        </form>
        {$imagePreview}
      </div>
    )
  }

}

Thanks for the snippet. @touhami92 What am I missing with this code... {!$imagePreview && <img src={imagePreviewUrl} />}? Isn't $imagePreview always going to be null because of the set further up in the function? Isn't this effectively just: <img src={imagePreviewUrl} />?

How to insert it in database using php? Thanks.

Thanks dude <3

Thank you so much

This was super useful for me, I also wrapped it in a react-awesome-slider for better display.

import AwesomeSlider from "react-awesome-slider";

{imagesPreviewUrls.length > 0 && (
          <AwesomeSlider>
            {imagesPreviewUrls.map(function (imagePreviewUrl, i) {
              return (
                <div>
                  <img style={style} key={i} src={imagePreviewUrl} alt="" />
                </div>
              );
            })}
          </AwesomeSlider>
        )}

Hello guys, I just did it for multiple images, any remarks ?

import React from 'react';


class ImageUpload extends React.Component {
    state = {
        files: [],
        imagesPreviewUrls: []
    };

    _handleImageChange = e =>{
        e.preventDefault();

        // FileList to Array
        let files = Array.from(e.target.files);

        // File Reader for Each file and and update state arrays
        files.forEach((file, i) => {
            let reader = new FileReader();

            reader.onloadend = () => {
                this.setState(prevState => ({
                    files: [...prevState.files, file],
                    imagesPreviewUrls: [...prevState.imagesPreviewUrls, reader.result]
                }));
            }

            reader.readAsDataURL(file);
        });
    }

    render() {
        let {imagesPreviewUrls} = this.state;

        return (
            <div>
                <label className="btn btn-default btn-sm z-depth-0 mr-0 pl-2 pr-2 custom-file-upload waves-effect waves-light" htmlFor="file">
                    <i className="fas fa-image fa-fw" aria-hidden="true"></i>
                    <input className="upload" type="file" onChange={this._handleImageChange} multiple/>
                </label>
                {imagesPreviewUrls.map(function(imagePreviewUrl, i){
                    return <img key={i} src={imagePreviewUrl} />
                })}
            </div>
        )
    }
}


export default ImageUpload;

dude your a life saver it help me alot