I'm using Ant-d Upload for uploading files through local system and on clicking on delete icon on preview image of file the image file is deleted.I want to add a pop confirm so I tried a to add confirm as a promise in onRemovefunction but it is not working.It is showing an alert in browser.

 onGalleryFileRemove = (file)=>{
 return new Promise((resolve, reject) => {
  confirm({
    title: 'are you sure to remove this file?',
      onOk: () => {
        resolve(true)
      },
  })
    const index = this.state.galleryFile.indexOf(file);
    const deletedGalleryFiles = this.state.deletedGalleryFiles;
    deletedGalleryFiles.push(this.state.galleryFile[index].uid);
    const newFileList = this.state.galleryFile.slice();
        newFileList.splice(index, 1);
            this.setState({
                galleryFile:newFileList,
                deletedGalleryFiles,
                previewVisible:false 
            })
    false    
    })
}
<Upload
    listType="picture-card"
    beforeUpload={this.beforeFileUpload}
    fileList={this.state.galleryFile}
    onPreview={this.handlePreview}
    onChange={this.handleGalleryFileChange}
    onRemove={this.onGalleryFileRemove}
>
  {this.state.galleryFile.length >= 6 ? null : uploadGalleryButton}
</Upload>
<Modal visible={this.state.previewVisible} footer={null} onCancel={this.handleCancel}>
  <img alt="previewImage" style={{ width: '100%' }} src={this.state.previewImage} />
</Modal>

I'm using Ant-d Upload for uploading files through local system and on clicking on delete icon on preview image of file the image file is deleted.I want to add a pop confirm so I tried a to add confirm as a promise in onRemovefunction but it is not working.It is showing an alert in browser.

 onGalleryFileRemove = (file)=>{
 return new Promise((resolve, reject) => {
  confirm({
    title: 'are you sure to remove this file?',
      onOk: () => {
        resolve(true)
      },
  })
    const index = this.state.galleryFile.indexOf(file);
    const deletedGalleryFiles = this.state.deletedGalleryFiles;
    deletedGalleryFiles.push(this.state.galleryFile[index].uid);
    const newFileList = this.state.galleryFile.slice();
        newFileList.splice(index, 1);
            this.setState({
                galleryFile:newFileList,
                deletedGalleryFiles,
                previewVisible:false 
            })
    false    
    })
}
<Upload
    listType="picture-card"
    beforeUpload={this.beforeFileUpload}
    fileList={this.state.galleryFile}
    onPreview={this.handlePreview}
    onChange={this.handleGalleryFileChange}
    onRemove={this.onGalleryFileRemove}
>
  {this.state.galleryFile.length >= 6 ? null : uploadGalleryButton}
</Upload>
<Modal visible={this.state.previewVisible} footer={null} onCancel={this.handleCancel}>
  <img alt="previewImage" style={{ width: '100%' }} src={this.state.previewImage} />
</Modal>

• javascript
• reactjs
• forms
• upload
• antd

1 Answer 1

Luckily, I got a solution for this.I know someone might help me in this huge munity I thought it might be useful for anyone

 onGalleryFileRemove = (file)=>{
   const {confirm} = Modal
   return new Promise((resolve, reject) => {
    confirm({
      title: 'Are you sure you want to Delete ?',
      onOk: () => {
        resolve(true)
           <!---- onRemoveFunctionality here ---->
      },
      onCancel: () =>{
         reject(true)
      }
    })
   })
 }