/Javascript/React/Get image url in react input file or preview form image

Get image url in react input file or preview form image

getInitialState: function(){
  return{file: []}
}

_onChange: (event)=>{
    this.setState({
        imgs: event.target.files
    })
},

render: function(){
 return(
  <div>
    <form>
      <input 
        ref="file" 
        type="file" 
        name="user[image]" 
        multiple="true"
        onChange={this._onChange}/>
    </form>

    {/* Display all selected images. */}        
    {this.state.imgs && [...this.state.imgs].map((file)=>(
       <img src={URL.createObjectURL(file)} />
    ))}

  </div>
 )
}

Source: stackoverflow.com

Similar codes

1 vote146 views1 answer
React best way of forcing component to update
Javascript React
0 vote162 views1 answer
React-template-helper
Javascript React
6 votes153 views2 answers
How do I conditionally add attributes to React components?
Javascript React
0 vote119 views1 answer
Remove an item from a component in react
Javascript React
1 vote137 views1 answer
No known class method for selector 'setScreenName:screenClass: react native
Javascript React
0 vote155 views1 answer
String contains in react
Javascript React
0 vote149 views2 answers
.env file example react native
Javascript React
23 votes149 views4 answers
Click to copy react
Javascript React
15 votes138 views1 answer
React forwardref
Javascript React
0 vote151 views1 answer
React chunk file too large
Javascript React