File Upload

[noushad-pp]

How do we handle file upload?

React admin <FileInput /> or <ImageInput /> returns an object containing the blob of the file like below:

{
  "rawFile": {
     "path": "filename.png"
  },
  "src": "blob:http://localhost:4200/808a4be2-e5e2-427f-9a96-bc6a37aebfc7",
}

But usually, the server expects the API request to be multipart/form but in this case, the request is handled as application/json.

Is there a way to override this behavior? The official react-admin docs only cover the base^4 handling. I cant seem to figure out to change the call to multipart form data.

Adding my code below.

// app.tsx
const dataProvider = crudProvider('http://localhost:3000/api');

export function App() {
  return (
    <div className={styles.app}>
      <Admin dataProvider={dataProvider}>
        <Resource
          name="cities"
          list={CityList}
          create={CityCreate}
          edit={CityEdit}
          show={CityShow}
          icon={CItyIcon}
        />
      </Admin>
    </div>
  );
}

// city.create.tsx
import React from 'react';
import { Create, ImageInput, ImageField, SimpleForm, TextInput } from 'react-admin';

export const CityCreate = (props) => (
  <Create {...props}>
    <SimpleForm>
      <TextInput source="name" />
      <TextInput source="slug" />
      <ImageInput source="icon" label="City Icon" accept="image/*">
        <ImageField source="src" />
      </ImageInput>
    </SimpleForm>
  </Create>
);

Issues inside react-admin are not helpful either.