Question 73056 in Reactjs Question posted in
The new location for the React Documentation can be found here.

How to upload Image on selection to a custom api and return the url to record – Reactjs

I have a SimpleForm inside an edit component, in which I have an ImageInput. My goal is to upload the image when selecting it and assigning the URL returned by the response of /upload API into the record object and save the JSON payload with the correct URL instead of localhost.

function CategoryEdit() {
    return (
      <Edit
        title={<Title page="Category" title="name" />}
        actions={<CategoryEditActions />}
        aside={<Aside />}
      >
        <SimpleForm t`your text`oolbar={<CustomToolbar />}>
          <TextInput source="id" disabled label="ID" fullWidth />
          <TextInput source="name" required fullWidth />
          <TextInput source="description" multiline fullWidth />
          <ImageInput source="image" label=" Image" accept="image/*">
            <ImageField source="src" title="title" />
          </ImageInput>
        </SimpleForm>
      </Edit>
    );
}

I have tried to solve it using onDrop, but I am not able to modify the edit record manually inside onDrop.

Tags:

2

Answers


  1. 0

    It seems to me that these operations are best done in the DataProvider, where you can upload an image, and then modify the record before submitting. There is a similar example here but there the image is loaded as part of the record.

    Login or Signup to reply.
  2. 0

    I had a similar issue with FileInput component, fixed by creating a FileInputAsync component.

    Solution 1 : From scratch

    • Create component to select your images and show selected image.
    • When image is added, send to your api with fetch or another one
    • Add the result into your form data with useInput

    This is a simple approch example to start to resolve your problem with react admin

    const ImageInputAsync = ({source, ...rest} : ImageInputProps) => {
    const { field: { onChange, value } } = useInput({source, ...rest});

    const onChangeHandler = (e:any) => {
        // Get file from the input
        const file = ...

        if(file.length){
            // Validate your image (size,mime,...), if error, notify and remove image from the input

            // Send it with fetch, axios, data provider or someone else
            const res = ...

            // If no error, change data in your state
            if(..ok..){
                onChange({id: res.id, ...})
            } 
            else{
                console.log("oops error...")
            }
        }
        else{
            onChange({id: res.id, ...})
        }
    }

    return (
        <>
            <input type="file" accept="image/png, image/jpeg" onChange={onChangeHandler}>
            <img src={`http://localhost:9999/public/file/${id}`} alt="..."> 
        </>
    )
}

    Solution 2 : From ImageInputcomponent

    • Duplicate ImageInput source code
    • Override it to upload when image dropped and add it to form data like in the solution 1

    In all cases, for user experience, mind to disable form submit button during uploading and show error and info notifications

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search