1

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

screenshot

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

2 Answers 2

1

With react admin 4 this can be achieved with a small css addition:

    <ImageInput
          source='image'
          sx={{
            '& .RaFileInputPreview-removeButton': {
              display: 'none',
            },
          }}
    > {....}
    <ImageInput>
0

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.

2
  • I've copied your code and imported this component like this: import ImageInput from './CustomImageInput';. But i get an error "TypeError: Cannot call a class as a function" Sep 6, 2018 at 16:27
  • Is it related to this question ? stackoverflow.com/questions/38481857/… Indeed, you can't call a class like a function.
    – Kmaschta
    Sep 6, 2018 at 16:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.