React-admin : Multiple image upload to s3 at once - amazon-s3

Question

I am trying to make a one-form creation page for an entity with an embedded array of other entities (which has another layer of depth). All of the entities and embedded entities are allowed (but not required) to have an image attached. The image input uses a custom api-platform endpoint to upload the image to AWS s3 and then returns a generated URL, which is being copied to according to text field. It works just the way I want when I am creating an entity with a single image field.
My Image Uploader:
(Feel free to criticize me about the way I check if the image has changed - I am happy to learn)
const ImageUploader = () => (
<>
<ImageInput source="imageUpload" label="image">
<ImageField source="imageUpload" title="title"/>
</ImageInput>
<ImageInput source="imageChecker" label="" options={{hidden: true}}>
</ImageInput>
<TextInput source="image" label="Image path"/>
<FormDataConsumer>
{
({formData}) => {
if (typeof formData === 'undefined' || typeof formData.imageUpload === 'undefined') {
return;
}
if (formData.imageChecker === null || formData.imageUpload !== formData.imageChecker) {
formData.imageChecker = formData.imageUpload;
formData.image = getImagePath(formData.imageUpload);
}
}
}
</FormDataConsumer>
</>
);
What is the problem:
The problem is whenever I have multiple ImageUploader fields in a Create field, uploading an image to one of the uploaders copies the effect for all the other uploaders and text inputs. The image itself is also uploaded to all of the image uploaders.
Example of my form with multiple image uploaders:
const FooBarCreate = props => (
<CreateGuesser {...props}>
...
<ImageUploader/>
<ArrayInput fullWidth={true} source="Foo">
<SimpleFormIterator>
...
<ImageUploader/>
<ArrayInput fullWidth={true} label="Bar" source="Bar">
<SimpleFormIterator>
...
<FormDataConsumer>
{
some logic unrelated to images
}
</FormDataConsumer>
</SimpleFormIterator>
</ArrayInput>
</SimpleFormIterator>
</ArrayInput>
</CreateGuesser>
);
My guess is that the program can't recognize which field I am trying to assign the value to, since their source names are all image and I have no idea how to solve this.
What I have tried:
surrounding the ImageUploader with a <SimpleForm> tag instead of empty tag with no luck, only generating save buttons all over the place.

Answer 1

The reason is that your multiple ImageInput share the same source "imageUpload". React-admin relies on source to read and modify form data. So when one ImageInput changes, the others all change along with it.
You gonna need to define different source for inside . The easiest way is to pass a source prefix property from outside.
like this:
<ImageUploader source="image1" />
const ImageUploader = ({source, ...props}) => (
<>
<ImageInput source=`${source}imageUpload` label="image">
<ImageField source="imageUpload" title="title"/>
</ImageInput>
<ImageInput source=`${source}imageChecker` label="" options={{hidden: true}}/>
<TextInput source=`${source}image` label="Image path"/>
<>
)