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
Post a Comment