React-admin: Issue with image upload feature in EDIT mode of react admin

[kalra-nitish]

What you were expecting:
I am expecting the uploaded image to get edited in the EDIT form.

What happened instead:
Not able to fetch the image from the record with ImageField inside ImageInput

Steps to reproduce:
1.) 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.

[djhi]

Hi, and thanks for your question. As explained in the react-admin contributing guide, the right place to ask a "How To" question, get usage advice, or troubleshoot your own code, is StackOverFlow.

This makes your question easy to find by the core team, and the developer community. Unlike Github, StackOverFlow has great SEO, gamification, voting, and reputation. That's why we chose it, and decided to keep GitHub issues only for bugs and feature requests.

So I'm closing this issue, and inviting you to ask your question at:

http://stackoverflow.com/questions/tagged/react-admin

And once you get a response, please continue to hang out on the react-admin channel in StackOverflow. That way, you can help newcomers and share your expertise!