Managing Files and Images

[baudev]

I followed the documentation to support image upload:

• https://api-platform.com/docs/core/file-upload/
• https://api-platform.com/docs/admin/getting-started/#managing-files-and-images

The back-end works. I was able to upload an image with Postman without any problem.

However, when I integrate the ImageField element into the App.js of the admin interface, the error is as follows:

Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check the render method of `List`.
in td (created by TableCell) in TableCell (created by WithStyles(TableCell)) in WithStyles(TableCell) (created by DatagridCell) in DatagridCell (created by DatagridRow) in tr (created by TableRow) in TableRow (created by WithStyles(TableRow)) in WithStyles(TableRow) (created by DatagridRow) in DatagridRow (created by Connect(DatagridRow)) in Connect(DatagridRow) in tbody (created by TableBody) in TableBody (created by WithStyles(TableBody)) in WithStyles(TableBody) (created by DatagridBody) in DatagridBody (created by shouldUpdate(DatagridBody)) in shouldUpdate(DatagridBody) in table (created by Table) in Table (created by WithStyles(Table)) in WithStyles(Table) (created by Datagrid) in Datagrid (created by WithStyles(Datagrid)) in WithStyles(Datagrid) (created by List) in div (created by ListView) in div (created by Paper) in Paper (created by WithStyles(Paper)) in WithStyles(Paper) (created by Card) in Card (created by WithStyles(Card)) in WithStyles(Card) (created by ListView) in div (created by ListView) in ListView (created by ListController) in ListController (created by Context.Consumer) in translate(ListController) (created by Connect(translate(ListController))) in Connect(translate(ListController)) in Unknown (created by List) in List (created by WithStyles(List)) in WithStyles(List) (created by List) in List (created by WithPermissions) in WithPermissions (created by Connect(WithPermissions)) in Connect(WithPermissions) (created by getContext(Connect(WithPermissions))) in getContext(Connect(WithPermissions)) (created by Route) in Route (created by Resource) in Switch (created by Resource) in Resource (created by Connect(Resource)) in Connect(Resource) (created by AdminBuilder) in Route (created by RoutesWithLayout) in Switch (created by RoutesWithLayout) in RoutesWithLayout (created by Route) in div (created by Layout) in main (created by Layout) in div (created by Layout) in div (created by Layout) in Layout (created by WithStyles(Layout)) in WithStyles(Layout) (created by Route) in Route (created by withRouter(WithStyles(Layout))) in withRouter(WithStyles(Layout)) (created by Connect(withRouter(WithStyles(Layout)))) in Connect(withRouter(WithStyles(Layout))) (created by LayoutWithTheme) in MuiThemeProvider (created by LayoutWithTheme) in LayoutWithTheme (created by Route) in Route (created by CoreAdminRouter) in Switch (created by CoreAdminRouter) in div (created by CoreAdminRouter) in CoreAdminRouter (created by Connect(CoreAdminRouter)) in Connect(CoreAdminRouter) (created by getContext(Connect(CoreAdminRouter))) in getContext(Connect(CoreAdminRouter)) (created by Route) in Route (created by CoreAdmin) in Switch (created by CoreAdmin) in Router (created by ConnectedRouter) in ConnectedRouter (created by CoreAdmin) in TranslationProviderView (created by Connect(TranslationProviderView)) in Connect(TranslationProviderView) (created by CoreAdmin) in Provider (created by CoreAdmin) in CoreAdmin (created by withContext(CoreAdmin)) in withContext(CoreAdmin) (created by AdminBuilder) in AdminBuilder (created by _default) in _default (at App.js:76) in Unknown (at src/index.js:7)

Code to reproduce the bug:

import React from 'react';
import parseHydraDocumentation from '@api-platform/api-doc-parser/lib/hydra/parseHydraDocumentation';
import { HydraAdmin, hydraClient, fetchHydra as baseFetchHydra } from '@api-platform/admin';
import authProvider from './authProvider';
import { Redirect } from 'react-router-dom';
import { ImageField } from 'react-admin';

const entrypoint = 'http://localhost:8000/api/';
const fetchHeaders = {'Authorization': `Bearer ${window.localStorage.getItem('token')}`};
const fetchHydra = (url, options = {}) => baseFetchHydra(url, {
    ...options,
    headers: new Headers(fetchHeaders),
});
const dataProvider = api => hydraClient(api, fetchHydra);
const apiDocumentationParser = entrypoint => parseHydraDocumentation(entrypoint, { headers: new Headers(fetchHeaders) })
    .then(
        ({ api }) => {
            
            api.resources.map(resource => {
                if ('http://schema.org/ImageObject' === resource.id) {
                    resource.fields.map(field => {
                        if ('http://schema.org/contentUrl' === field.id) {

                            field.field = (
                                <ImageField source="http://test.fr/image.png" title="title" />
                            );
                        }

                        return field;
                    });
                }

                return resource;
            });

            return { api };
        },
        (result) => {
            switch (result.status) {
                case 401:
                    return Promise.resolve({
                        api: result.api,
                        customRoutes: [{
                            props: {
                                path: '/',
                                render: () => <Redirect to={`/login`}/>,
                            },
                        }],
                    });

                default:
                    return Promise.reject(result);
            }
        },
    );

export default props => (
    <HydraAdmin
        apiDocumentationParser={apiDocumentationParser}
        authProvider={authProvider}
        entrypoint={entrypoint}
        dataProvider={dataProvider}
    />
);

It looks like a bug for me.

Configuration

Name	Version
api-platform/admin	0.6.2
react	16.3.1
react-admin	2.6.4

[baudev]

I finally took several hours finding a good way to handle file upload.
I will propose this one in a future PR.

The actually code proposed in the documentation is not fully working. Nevertheless, the solution proposed is a great and simply idea. I consequently reused it after fixing bugs.