Search code examples
node.jsreactjsreact-admintoast-ui-image-editor

How can I use a component like react-image-editor for cropping an image in react-admin

I am using React-Admin and I need to use/create a component for cropping an image (profile image) and storing it as a base64-image. I found @toast-ui/react-image-editor better than other libraries but I have a problem with that. In React-Admin when we use ImageInput like this:

<ImageInput multiple label="Gallery" source="gallery" accept="image/*">
    <ImageField source="src" title="title" />
</ImageInput>

the data can be loaded from the source (in Edit mode) and it will be stored there, but when we use other components like what I have mentioned, I need to know how can I pass the data as a source to that. It doesn't matter for me to use this library or any others... but I need one with simple usage.

Actually, my issue is with connecting the new component to the model that react-admin use.

Solution

  • I have recently written such a component, you can find it under the following link: EditableImageComponent. I don't use @toast-ui/react-image-editor for this, like you do, but ReactImageCrop, maybe the component will help you anyway. At the moment I have some bugs in the code (after the image is loaded, the crop has to be changed once before it is applied), but otherwise it works quite well so far.

    Edit: In order to use this component in your EditView, simply call it like every other Input Component (it is assumed, that your target is called "imagename")

    <EditableImage source="imagename" {...props} label="User image (Use the upload button to edit)"/>

    EditableImage component