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

Popular posts from this blog

javascript - Laravel datatable invalid JSON response -

java - Exception in thread "main" org.springframework.context.ApplicationContextException: Unable to start embedded container; -

sql server 2008 - My Sql Code Get An Error Of Msg 245, Level 16, State 1, Line 1 Conversion failed when converting the varchar value '8:45 AM' to data type int -