readAsDataURL Multiple Image Upload ReactJS

Question

Good Day, how can I change my code so that it will accept multiple image upload with preview and user can delete and set a primary image.

My code only allows one image upload by the way.

This is what I've got so far:

_handleImageChange(e) {
    e.preventDefault();

    let reader = new FileReader();
    let file = e.target.files;

    console.log('file', file);
    console.log('reader', reader);

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

  render(){
    let { imagePreviewUrl } = this.state;
    let $imagePreview = null;
    let path = Config.PROJECT_PATH + '' + Config.IMAGE.PATH + '' + this.props.imageModule + '/thumb/' + this.props.image;

    if (imagePreviewUrl) {
      $imagePreview = (<ThumbImage image={imagePreviewUrl} ref='myImage'/>);
    }
    else{
      if (this.props.image) {
        $imagePreview = (<ThumbImage image={path} />);
      }
      else{
        $imagePreview = (<ThumbImage image={defaultImage} />);
      }
    }
    return(
      <div>
        <div className="modal-image-preview">
          { $imagePreview }
        </div>
        <div className="modal-image-button">
          <form onSubmit={(e)=>this._handleSubmit(e)}>
            <RaisedButton style= {{ backgroundColor: '#000' }} containerElement='image' label="Choose an Image" labelPosition="before" onChange={(e)=>this._handleImageChange(e)}>
              <input type="file" style={styles.imageInput} multiple/>
            </RaisedButton>
          </form>
        </div>
      </div>
    );
  }

Your help is very much appreciated.

Xiaoxuan Wang · Accepted Answer · 2019-03-15 04:17:34Z

To upload images in your react code, you need to each path in the state to Array

And then change the setstate properly, use map function to loop through the state when rendering components.

Here is my code for upload multiple images, hope it gives you better idea about it:

    constructor(props) {
    super(props);
    this.state = {
      files: [],
      imagesPreviewUrls: []
    };
    this._handleImageChange = this._handleImageChange.bind(this);
    this._handleSubmit = this._handleSubmit.bind(this);
  }

  _handleSubmit(e) {
    //Sumbit handler
    e.preventDefault();
    const formData = new FormData();
    formData.append('image', this.state.file);
    axios.get('/api/upload', formData) 
    .then(response => { console.log(response) });
  }

  _handleImageChange(e) {
    e.preventDefault();

    let files = Array.from(e.target.files);

    files.forEach((file) => {
        let reader = new FileReader();
        reader.onloadend = () => {
            this.setState({    
                 files: [...this.state.files, file],
                 imagesPreviewUrls: [...this.state.imagesPreviewUrls, reader.result]
            });
        }
        reader.readAsDataURL(file);
    });
  }

  render() { 
    return (
      <div>
        <form onSubmit={this._handleSubmit}>
        <input className="upload" type="file" accept='image/*' onChange={this._handleImageChange} multiple/>
        <button type="submit" onClick={this._handleSubmit}>Upload Image</button>
        {this.state.imagesPreviewUrls.map((imagePreviewUrl) => {
            return <img key={imagePreviewUrl} alt='previewImg' src={imagePreviewUrl} />
        })}
        </form>
      </div>
    )
  }

Collectives™ on Stack Overflow

readAsDataURL Multiple Image Upload ReactJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related