2017-07-19 88 views
0

我想知道如何在dropzone中的文件已經保存在服務器和數據庫後清空它們。我的問題是,當我提交它保持在dropzone上的文件,甚至關閉模式,我希望我可以提供一個關於清空dropzone的代碼,但我沒有任何想法,所以我會離開代碼的dropzone和onsubmit下面。如何在提交後清空dropzone reactjs

爲ondrop

onDrop(acceptedFiles, e) { 
     debugger 
     console.log('Received files: ', acceptedFiles); 
     this.setState({files: acceptedFiles});  
     const req = request.post('http://localhost:8933/api/upload/post'); 
     acceptedFiles.forEach(file => { 
      req.attach(thisUuid , file); 
     }); 
     req.end(callback); 
    } 

我的問題,爲的onsubmit

onSubmit() { 
     debugger 
     form.Status=0; 
     form.isActive=true; 
     return(form.Key > 0 ? this.creater : this.creater).call(this, form); 
     return false; 
} 

代碼的代碼是不刷新renderImage文件時,我提交

renderImg(file, index) { 
    debugger 
     let ext = file.name.split(".").slice(-1)[0]; 
     if(ext === "PNG" ||ext === "png" || ext === "jpg") {  
      return (<div> <i className="fa fa-file-image-o" ></i>{file.name}</div>) 
     } 
     if(ext === "doc" || ext === "docx") { 
      return (<div> <i className="fa fa-file-word-o"></i>{file.name}</div>) 
     } 
     if(ext === "pdf" || ext === "pdf") { 
      return (<div> <i className="fa fa-file-pdf-o"></i> {file.name}</div>) 
     } 
     if(ext === "xlsx" || ext === "xls") { 
      return (<div> <i className="fa fa-file-excel-o"></i> {file.name}</div>) 
     }  

     return (
      <div key={index} className="pms-file-preview drop-box"> 
       <div className="pms-file-footer"> 
        <div className="pms-file-caption drop-caption" title={file.name}> 
         {file.name} 

        </div> 
       </div> 
      </div> 
     ) 
     return false; 
    } 

,最後懸浮窗

`當你需要清空文件
+0

'this.setState({空文件})清空droppe項目,你應該讓這些文件再次清空我放?的onsubmit?請幫我我這麼混淆.. – Fawaz

+0

@Fawaz應該在哪裏:

<Dropzone accept = ".pdf,.doc,.docx,.odt,.jpg,.png,.xls,.xlsx" onDrop={this.onDrop.bind(this)} className="pms-upload"> {this.state.files.length > 0 ? <div>{this.state.files.map(this.renderImg)}</div> : <div className="pms-upload-title"> Click or drag & drop files here </div> } </Dropzone> 

+0

是把它放在裏面提交 – Fawaz

回答

0

通過設置狀態

onSubmit() { 
      debugger 
      form.Status=0; 
      form.isActive=true; 
      this.setState({files: []}) 
      return(form.Key > 0 ? this.creater : this.creater).call(this, form); 
      return false; 
    }