Can I hide remove icon only for some files in antd Upload component

Question

I want to hide remove button in Antd Upload component only for files that meet certain criteria. I know remove icon can be disabled for every file using showRemoveIcon prop. But how can I do this for an individual file in the fileList

Answer 1

Try this:

handleRemoveId = id => {
    if(id === '-1') {
      return null;
    } else {
      return (
        <DeleteOutlined />
      )
    }
}

const uploadButton = (
 <div>
    <PlusOutlined />
    <div className="ant-upload-text">Upload</div>
 </div>
);

<Upload
  action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
  listType="picture-card"
  onPreview={this.handlePreview}
  onChange={this.handleChange}
>
  <div>
    {fileList.length && fileList.map(item => (
        <div style={{ position: 'relative' }}>
          <img src={item.url} alt="" height={80} />
          <span style={{ position: "absolute", left: '50%', top: '50%', transform: 'translate(-50%,-50%)', color: '#fff' }}>
            {this.handleRemoveId(item.uid)}
            <EyeOutlined />
           </span>
        </div>
     ))}
     {fileList.length < 8 ? uploadButton : null}
  </div>
</Upload>

You should handle all remove and visit by yourself, and add css alot, and check the remove icon by related uid you mean.

Note: It can write more better, Just was a hint and I dont know about your exact scenario.

Answer 2

This is not supported by antd currently. There is no support for per-file custom icons. I am having this same problem and submitted it as a feature request for ant-design at https://github.com/ant-design/ant-design/issues/26682

Answer 3

Just try this approach to hide the preview and delete icons on image

.ant-upload-list-item-actions {
  display: none;
}