javascript - reac js multiple image upload with preview -


using react js need multiple image upload preview tried below code not working showing me error in console

uncaught domexception: failed set 'value' property on 'htmlinputelement': input element accepts filename, may programmatically set empty string.

uploadimage(e){     var numfiles = e.target.files.length;      (var = 0, numfiles = e.target.files.length; < numfiles; i++){              var file = e.target.files[i];             if(!file.type.match('image'))             continue;             var reader = new filereader();         reader.onload = function(e) {             setofimages.push({               filename:file.name,               image:e.target.result.split(',')[1]             });             for(var j = 0; j<setofimages.length; j++) {                 $('.placeholder-blk').prepend('<div class="image-placeholder"><img src="data:image/jpeg;base64,'+ setofimages[j].image +'" /></div>');             }             console.log(setofimages);         }         reader.readasdataurl(file);     } } <input type="file" name="image-uploder" id="image-uploder" classname="file-loader" onchange={this.uploadimage.bind(this)} multiple /> 

did try adding value state , populate name state. like

<input type="file" name={this.state.setofimages} id="image-uploder" classname="file-loader" onchange={this.uploadimage.bind(this)} multiple /> 

and inside function populate state.

this.setstate({setofimages: json.stringify(setofimages)}) 

something this.

export class demo extends react.component{ constructor(props){     super(props)     this.state = {         setofimages : []     } } setofimages(event){     event.preventdefault();     this.setstate({         setofimages: ["hello", "hi"]     }) } render(){     return (         <div>             <input value={this.state.setofimages}/>             <button onclick={this.setofimages.bind(this)}/>         </div>     ) } } 

now first input populated empty array . when click button state change setting setofimages = ["hello", "hi"] , making input value set values.


Comments