Question

59

Get image preview before uploading in React

rated 0 times [ 60] [ 1] / answers: 1 / hits: 172138 / 8 Years ago, mon, june 27, 2016, 12:00:00

Many examples of this on here but can't seem to find any for react. I have managed to convert the vanilla js to react but getting an error.

The answer looks simple enough so here I go in react:

getInitialState: function(){

  return{file: []}

},



_onChange: function(){

  // Assuming only image

  var file = this.refs.file.files[0];

  var reader = new FileReader();

  var url = reader.readAsDataURL(file);

  console.log(url) // Would see a path?

  // TODO: concat files for setState

},



render: function(){

 return(

  <div>

    <form>

      <input 

        ref=file 

        type=file 

        name=user[image] 

        multiple=true

        onChange={this._onChange}/>

     </form>

    {/* Only show first image, for now. */}

    <img src={this.state.file[0} />

  </div>

 )

};

Basically all answers I have seen show something like what I have. Any difference in React app?

Regarding answer:

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kerryoliviaa

Add To Favorites

Follow

Total Points: 221

Total Questions: 102

Total Answers: 117

Location: Sint Maarten

Member since Tue, Mar 29, 2022

2 Years ago

kerryoliviaa questions

1 Using useContext and useReducer in NextJS and reading null as context

Sun, May 15, 22, 00:00, 2 Years ago

1 Material UI Input not detecting when enter key is pressed

Mon, Nov 16, 20, 00:00, 4 Years ago

1 Nodejs async/await mysql queries

Fri, Mar 6, 20, 00:00, 4 Years ago

1 How to trigger keydown event only for alphanumeric and special characters in Angular7?

Thu, Jan 16, 20, 00:00, 4 Years ago

1 How to create singleton classes in Javascript?

Tue, Jan 7, 20, 00:00, 5 Years ago

View All

answered 8 Years ago larrycodys · Accepted Answer

No difference, just read your image when the load event finishes. After the load end event handler just set your state:

getInitialState: function(){

  return{file: []}

}



_onChange: function(){

  // Assuming only image

  var file = this.refs.file.files[0];

  var reader = new FileReader();

  var url = reader.readAsDataURL(file);



   reader.onloadend = function (e) {

      this.setState({

          imgSrc: [reader.result];

      })

    }.bind(this);

  console.log(url) // Would see a path?

  // TODO: concat files

},



render: function(){

 return(

  <div>

    <form>

      <input 

        ref=file 

        type=file 

        name=user[image] 

        multiple=true

        onChange={this_onChange}/>

     </form>

    {/* Only show first image, for now. */}

    <img src={this.state.imgSrc} />

  </div>

 )

}