Upload file with the Admin Component of API Platform not working

Question

In the API Platform Docs there is a part Handling File Uploads. The code with VichUploaderBundle works like expected. But further in the Docs regarding the Admin Component Managing Files and Images doesn't work. At least the create and edit forms doesn't show up. I know that i had to adjust the code a little bit to make it work with the code in Handling File Uploads but it still doesn't give me the expected results.

I have modified the App.js file accordingly

import React from 'react';
import { FunctionField, ImageField, ImageInput } from 'react-admin';
import { HydraAdmin } from '@api-platform/admin';
import parseHydraDocumentation from '@api-platform/api-doc-parser/lib/hydra/parseHydraDocumentation';

const entrypoint = "http://localhost:8080";

const myApiDocumentationParser = entrypoint => parseHydraDocumentation(entrypoint)
  .then( ({ api }) => {

    api.resources.map(resource => {
      if ('http://schema.org/MediaObject' === resource.id) {
        resource.fields.map(field => {
          if ('http://schema.org/contentUrl' === field.id) {
            field.denormalizeData = value => ({
              src: value
            });
            field.field = props => (
              <ImageField {...props} source={`${field.name}.src`} />
            );

            console.log(field);
            field.input = (
              <ImageInput accept="image/*" key={field.name} multiple={false} source={field.name}>
                <ImageField source="src"/>
              </ImageInput>
            );

            field.normalizeData = value => {
              if (value && value.rawFile instanceof File) {
                console.log("inst of file");

                const body = new FormData();
                body.append('file', value.rawFile);

                return fetch(`${entrypoint}/media_objects`, { body, method: 'POST' })
                  .then(response => response.json());
              }

              return value.src;
            };
          }

          return field;
        });
      }

      return resource;
    });

    return { api };
  });


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

I am getting the following error on the client:

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

Answer 1

Hi get the same problem I resolve the issue by changing the field.input like that:

field.input = props =>(
                        <ImageInput {...props} accept="image/*" multiple={false} source={field.name}>
                            <ImageField source="src"/>
                        </ImageInput>
                    );

And also change that line

if ('imageFile' === field.name) {

Now i can choose the file to upload from my directories but the Post method return 404 error, don't know how to resolve that path issue with Vich. Hope that little anwser can help.