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?

Luca Kiebel
  • 9,790
  • 7
  • 29
  • 44
Alexander Kuisis
  • 13
  • 2

2 Answers2

1

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

    <ImageInput
          source='image'
          sx={{
            '& .RaFileInputPreview-removeButton': {
              display: 'none',
            },
          }}
    > {....}
    <ImageInput>
Kilian
  • 1,540
  • 16
  • 28
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.

Kmaschta
  • 2,369
  • 1
  • 18
  • 36
  • 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" – Alexander Kuisis Sep 06 '18 at 16:27
  • Is it related to this question ? https://stackoverflow.com/questions/38481857/getting-cannot-call-a-class-as-a-function-in-my-react-project Indeed, you can't call a class like a function. – Kmaschta Sep 06 '18 at 16:46