CODEWITHSUNDEEP
javascriptimagereactjsonclickonchange
Subhojit
Subhojit

Reputation: 1541

image preview is not working in react

I'm trying the following thing for image preview. Whenever the onChange function ImagePreview gets called the change function is not responding. It's get's stuck after running the console.log("outside readURL"). I can't make out why this is happening. Any help?

import React, { Component } from 'react'; 

class ImagePreview extends Component {
   constructor(props) {
     super(props);
     this.state = { images_attributes: [], imgSrc:'' };
   }
   fileUpload() {
     $("#new_post_image").click();
   }
   imageChange() {
    function readURL(input) {
      console.log("bla");
      var file = this.state.images_attributes[0].files[0];
      if(this.state.images_attributes[0].files[0]) {
        var reader = new FileReader();
        // var url = reader.readAsDataURL(file.name);

        console.log(file);

        // console.log(reader);

        reader.onloadend = () => {
          console.log(reader);
          console.log(reader.result);
        }
      }
    }

    console.log("outside readURL");
    $("#new_post_image").change(function() {
      console.log("above readURL");
      readURL(this);
    });

    // if(file.name) {
    //   this.setState({
    //       imgSrc: file.name
    //   })
    // }
  }
   render() {
     <form>
       <img src={this.state.imgSrc} />
       <input id="new_post_image" className="file-image" type="file" name="image" accept="image/*" onChange={this.imageChange.bind(this)} ref={(input) => {this.state.images_attributes[0] = input}} />
       <button type="button" className="camera-button" onClick={this.fileUpload.bind(this)}>
         <i className="fas fa-camera"></i>
         <label className="camera-text"><h4 className="camera-text">Image</h4></label>
       </button>
     </form>
   }
}
export default ImagePreview;

Upvotes: 1

Views: 3650

Answers (1)

ashwintastic
ashwintastic

Reputation: 2312

Use this code and try: 

imageChange(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)
 }

replace render method:

render() {
 <form>
   <img src={this.state.imagePreviewUrl} /> // in constructor don't initilazie with array instaed with blank string
   <input id="new_post_image" className="file-image" type="file" name="image" accept="image/*" onChange={this.imageChange.bind(this)} ref={(input) => {this.state.images_attributes[0] = input}} />
   <button type="button" className="camera-button" onClick={this.fileUpload.bind(this)}>
     <i className="fas fa-camera"></i>
     <label className="camera-text"><h4 className="camera-text">Image</h4></label>
   </button>
 </form>
 }

Upvotes: 7

Related Questions