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;

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;

• javascript
• image
• reactjs
• onclick
• onchange

1 Answer 1

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>
 }