Not able to upload Image with ImageField in EDIT mode for react-admin

Question

Using React Admin I am creating a dashboard for one of my clients and I have a requirement where I have to add the products of the client, out of the many fields there is one Image field too where I have to upload an image which serves in the API and the product is created with CREATE of react-admin.

// create product

import React, { useState} from "react";
import {
  SimpleForm,
  Create,
  ImageField,
  ImageInput,
} from "react-admin";
import Grid from "@material-ui/core/Grid";
import { ThemeProvider } from "@material-ui/styles";
import customTheme from "../../customTheme";

const CreateProduct = props => {
  const classes = useStyles();
return (
    <ThemeProvider theme={customTheme}>
      <Create resource="products" basePath="/products">
        <SimpleForm>
          <Grid
            container
            spacing={2}
            justify="space-between"
          >
         <Grid item xs={10}>
              <ImageInput
                source="data.pictures"
                label="Images"
                accept="image/png, image/jpg, image/jpeg"
                maxSize={5000000}
                placeholder={
                  <p>
                    Upload Image
                    <span >
                      *File size should not exceed 5MB
                    </span>
                  </p>
                }
              >
                <ImageField source="src" title="images" />
              </ImageInput>
            </Grid>
          </Grid>
        </SimpleForm>
      </Create>
    </ThemeProvider>
  );
};

export default CreateProduct;

Once a product is created I need to EDIT that product too, and with the same respect, I need to update the Image too.

//Edit Product

import React, { useState} from "react";
import {
  SimpleForm,
  Create,
  ImageField,
  ImageInput,
} from "react-admin";
import Grid from "@material-ui/core/Grid";
import { ThemeProvider } from "@material-ui/styles";
import customTheme from "../../customTheme";

const PreviewImage = ({ record }) => (
  <img width={30} src={record} alt="Image Preview" />
);

const EditProduct = props => {
  const classes = useStyles();
return (
    <ThemeProvider theme={customTheme}>
      <Edit {...props}>
        <SimpleForm>
          <Grid
            container
            spacing={2}
            justify="space-between"
          >
         <Grid item xs={10}>
              <ImageInput
                source="data.pictures"
                label="Images"
                accept="image/png, image/jpg, image/jpeg"
                maxSize={5000000}
                placeholder={
                  <p>
                    Upload Image
                    <span >
                      *File size should not exceed 5MB
                    </span>
                  </p>
                }
              >
                //<ImageField source="src" title="images" />
                 <PreviewImage /> 
              </ImageInput>
            </Grid>
          </Grid>
        </SimpleForm>
      </Edit>
    </ThemeProvider>
  );
};

export default EditProduct;

The issue with EditProduct is I am not able to fetch the image from the record which is a URL with the help of ImageField used inside ImageInput and in order to achieve that I've created a separate component PreviewImage which fetched the image from the record and render it in img tag, but I would like to upload the new image too to the edit product form. And I'm not able to achieve that with current documentation present in react-admin. If anyone is aware of how I could achieve this EDIT functionality through react-admin, please post your solutions.

Answer 1

const PreviewImage = ({ source }) => {
  let record = useRecordContext();
  if (record.undefined) {
    record = {
      [source]: record.undefined,
    };
  }
  return <ImageField source={source} record={record} title=" Image" />;
};

as of now react-admin version 4.9.x, the issue related to record key persist and in continuing with previous answer, above mentioned code works for me

Answer 2

it works for me

const PreviewImage = ({ record, source }) => {
    if (typeof (record) == "string") {
        record = {
            [source]: record
        }
    }
    return <ImageField record={record} source={source} />
}

....

<ImageInput source="preview">
    <PreviewImage source="src" />
</ImageInput>