How to pre populate the ImageField inside ImageInput in Edit Form, or the right approach to take

Question

I am working with react-admin and in the functionality.. I need to display the original picture in an ImageField but if i choose to drag and drop a new picture then i need to update that ImageField with the new picture. I can't seem to see any examples of what would seem to be a pretty common use case for Image related Edit functionality..

<ImageInput source="src" label="Product Image" accept="image/*" > 
        <ImageField source="imageUrl"/> 
</ImageInput>

Seems to be similar to this question

but obviously i am new to this and after some frigging with it, i'm no closer to getting it to go... The behaviour i would have expected i guess was that because imageUrl does exist on the form, that the ImageField above would already be populated with the existing pic when the form opened but it's not because it's inside the .. If anyone could point me in the right direction it would be a big help

Answer 1

I have done it like this:

        <ImageInput source="src" label="Billede" accept="image/*" mulitple={false}>
            <ImageField source="thumbnail" title="title" />
        </ImageInput>

        <FormDataConsumer>
            {({formData, dispatch, ...rest}) => {
                if (!formData.src) {
                    return (
                        <div>
                        <Labeled label="Original image">
                            <ImageField source="thumbnail" {...rest}/>
                        </Labeled>
                        </div>
                    );
                }
            }}
        </FormDataConsumer>

This will display the original image, as long as no new image is selected. When a new image is selected, this will be displayed, and the original will be hidden.