javascript - Could not apply delete function to images in showFiles and previousFile function -
i have rent detail page developed using reactjs shows detail of specific rent. there edit button on page , displayed user has registered it. editing wanted fetch previous stored data of rent input boxes , images below image upload box. fetch rental data input boxes calling this.props.ownername defaultvalue , fetch uploaded images in previousfile() not create delete function using delete icon on each images , not post uploaded images along images further added server. have used react-dropzone(https://github.com/okonet/react-dropzone) image upload. please me?
code on image upload
let image = []; class renderphotos extends react.component { constructor(props, context) { super(props, context); this.state = { files: [] }; } ondrop(files) { console.log('received files: ', files); this.setstate({ files: files }); image = new formdata(files); $.each(files,function(i,file){ image.append('image',file); }); } previousfile(){ console.log('this.props.image', this.props.image); return( <ul classname="gallery"> { _.map(this.props.image, (image,idx) => { return( <li classname="col-md-3" key={idx}> <img src={image.image} key={image.id} classname="img-fluid img-rounded" /> </li> ) }) } </ul> ) } showfiles() { const { files } = this.state; if (!files.length) { return null; } return ( <div> <h3>dropped files: </h3> <ul classname="gallery"> { _.map(files, (file, idx) => { return ( <li classname="col-md-3" key={idx}> <img src={file.preview} width={200}/> <div>{file.name}</div> </li> ) }) } </ul> </div> ); } render() { return ( <div> <h3 classname="formheadingh3">photos can bring space life</h3> <p>add photos of spaces give more insight of space </p> <hr/> <div classname="col-md-12"> <form method="post" enctype="multipart/form-data"> <input type="hidden" name="csrfmiddlewaretoken" value="{{ csrf_token }}"/> <dropzone ondrop={this.ondrop.bind(this)} style={style} activestyle={activestyle} accept="image/*"> try dropping files here, or click select files upload. </dropzone> </form> { this.previousfile() } { this.showfiles() } </div> <div classname="row continuebtn text-right"> <button classname="btn how-it-works pull-left" onclick={this.props.previousstep.bind(this)}><i classname="fa fa-hand-o-left"></i></button> <button classname="btn how-it-works pull-right" onclick={this.nextstep.bind(this)}><i classname="fa fa-floppy-o"></i></button> </div> </div> ); }
while uploading images images preview shown showfiles() , uploaded images fetched through previousfile()
Comments
Post a Comment