How To Disable Clear Button In The Preview Of ImageInput, FileInput, ImageField, or FileField

Question

I have ImageInput and ImageField for preview in my Create form.

There is clear button on image preview in right top corner, as you can see on screenshot

Is there a way to disable this button? Or to handle click event on it?

Answer 1

React Admin doesn't expose a prop or a way to remove that button.

The only way is to create your own ImageInput and disable it, for example in CSS, like:

// CustomImageInput.js
import compose from 'recompose/compose';
import { withStyles } from '@material-ui/core/styles';
import { addField, translate, FileInput } from 'react-admin';

const styles = {
    root: { width: '100%' },
    dropZone: {
        background: '#efefef',
        cursor: 'pointer',
        padding: '1rem',
        textAlign: 'center',
        color: '#999',
    },
    preview: {},
    removeButton: {
        display: 'none',
    },
};

export class ImageInput extends FileInput {
    static defaultProps = {
        ...FileInput.defaultProps,
        labelMultiple: 'ra.input.image.upload_several',
        labelSingle: 'ra.input.image.upload_single',
    };
}

export default compose(
    addField,
    translate,
    withStyles(styles)
)(ImageInput);

You'd be welcome if you want to make a PR to expose a prop like showDeleteButton that defaults to true.