React-admin: Console Warning using FileInput on redirect

Created on 24 Jul 2018 · 9Comments · Source: marmelab/react-admin

What you were expecting:
i am expecting no warning after using fileinput

What happened instead:
I am using fileinput in create, after saving i got warnings in console.

index.js:2178 Warning: Failed prop type: Invalid prop `file` of type `string` supplied to `FileInputPreview`, expected `object`.
   in FileInputPreview (created by WithStyles(FileInputPreview))

index.js:2178 Warning: Failed prop type: Invalid prop `record` of type `string` supplied to `FileField`, expected `object`.
    in FileField (created by WithStyles(FileField))

Steps to reproduce:
Just a simple form with fileinput and fileField as the default example on doc.

Related code:

Using this Create:

export const OperacionCreate = (props) => (
    <Create {...props} title="ops">
        <SimpleForm>
          <FileInput source="uri" label="Pla" accept="application/vnd.ms-excel">
            <FileField source="src" title="title" />
          </FileInput>
        </SimpleForm>
    </Create>
);

Environment

React-admin version: "^2.1.1"
React version: "^16.4.1"
Browser: "Chromium >= 62"
Complete Stack trace (in case of a JS error):

index.js:2178 Warning: Failed prop type: Invalid prop `file` of type `string` supplied to `FileInputPreview`, expected `object`.
    in FileInputPreview (created by WithStyles(FileInputPreview))
    in WithStyles(FileInputPreview) (created by FileInput)
    in div (created by FileInput)
    in span (created by FileInput)
    in div (created by Labeled)
    in div (created by FormControl)
    in FormControl (created by WithStyles(FormControl))
    in WithStyles(FormControl) (created by Labeled)
    in Labeled (created by WithStyles(Labeled))
    in WithStyles(Labeled) (created by FileInput)
    in FileInput (created by WithStyles(FileInput))
    in WithStyles(FileInput) (created by TranslatedComponent(WithStyles(FileInput)))
    in TranslatedComponent(WithStyles(FileInput)) (created by ConnectedField)
    in ConnectedField (created by Connect(ConnectedField))
    in Connect(ConnectedField) (created by Field)
    in Field (created by FormField)
    in FormField (created by Connect(FormField))
    in Connect(FormField) (created by WithFormField)
    in WithFormField (at operaciones.js:24)
    in div (created by FormInput)
    in FormInput (created by WithStyles(FormInput))
    in WithStyles(FormInput) (created by SimpleForm)
    in div (created by SimpleForm)
    in form (created by SimpleForm)
    in SimpleForm (created by WithStyles(SimpleForm))
    in WithStyles(SimpleForm) (created by Form(WithStyles(SimpleForm)))
    in Form(WithStyles(SimpleForm)) (created by Connect(Form(WithStyles(SimpleForm))))
    in Connect(Form(WithStyles(SimpleForm))) (created by ReduxForm)
    in ReduxForm (created by TranslatedComponent(undefined))
    in TranslatedComponent(undefined) (created by Connect(TranslatedComponent(undefined)))
    in Connect(TranslatedComponent(undefined)) (at operaciones.js:23)
    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 CreateView)
    in div (created by CreateView)
    in CreateView (created by CreateController)
    in CreateController (created by TranslatedComponent(undefined))
    in TranslatedComponent(undefined) (created by Connect(TranslatedComponent(undefined)))
    in Connect(TranslatedComponent(undefined)) (created by Create)
    in Create (at operaciones.js:22)
    in OperacionCreate (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) (at App.js:35)
    in Route (created by RoutesWithLayout)
    in Switch (created by RoutesWithLayout)
    in RoutesWithLayout (created by Route)
    in div (at Layout.js:86)
    in main (at Layout.js:79)
    in div (at Layout.js:75)
    in div (at Layout.js:71)
    in Layout (created by WithStyles(Layout))
    in WithStyles(Layout) (created by Connect(WithStyles(Layout)))
    in Connect(WithStyles(Layout)) (at Layout.js:148)
    in MuiThemeProvider (at Layout.js:147)
    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 TranslationProvider (created by withContext(TranslationProvider))
    in withContext(TranslationProvider) (created by Connect(withContext(TranslationProvider)))
    in Connect(withContext(TranslationProvider)) (created by CoreAdmin)
    in Provider (created by CoreAdmin)
    in CoreAdmin (created by withContext(CoreAdmin))
    in withContext(CoreAdmin) (at App.js:26)
    in App (at index.js:7)
__stack_frame_overlay_proxy_console__ @ index.js:2178
printWarning @ checkPropTypes.js:19
checkPropTypes @ checkPropTypes.js:82
validatePropTypes @ react.development.js:1300
createElementWithValidation @ react.development.js:1388
render @ withStyles.js:327
finishClassComponent @ react-dom.development.js:13193
updateClassComponent @ react-dom.development.js:13155
beginWork @ react-dom.development.js:13824
performUnitOfWork @ react-dom.development.js:15863
workLoop @ react-dom.development.js:15902
renderRoot @ react-dom.development.js:15942
performWorkOnRoot @ react-dom.development.js:16560
performWork @ react-dom.development.js:16482
performSyncWork @ react-dom.development.js:16454
requestWork @ react-dom.development.js:16354
scheduleWork$1 @ react-dom.development.js:16218
enqueueSetState @ react-dom.development.js:11299
./node_modules/react/cjs/react.development.js.Component.setState @ react.development.js:270
onStateChange @ connectAdvanced.js:205
notify @ Subscription.js:26
notifyNestedSubs @ Subscription.js:65
onStateChange @ connectAdvanced.js:202
notify @ Subscription.js:26
notifyNestedSubs @ Subscription.js:65
onStateChange @ connectAdvanced.js:202
notify @ Subscription.js:26
notifyNestedSubs @ Subscription.js:65
onStateChange @ connectAdvanced.js:202
notify @ Subscription.js:26
notifyNestedSubs @ Subscription.js:65
onStateChange @ connectAdvanced.js:202
notify @ Subscription.js:26
notifyNestedSubs @ Subscription.js:65
onStateChange @ connectAdvanced.js:202
dispatch @ createStore.js:173
(anonymous) @ middleware.js:13
(anonymous) @ middleware.js:66
dispatch @ applyMiddleware.js:35
(anonymous) @ utils.js:250
(anonymous) @ proc.js:489
exec @ scheduler.js:19
flush @ scheduler.js:60
asap @ scheduler.js:33
runPutEffect @ proc.js:486
runEffect @ proc.js:435
next @ proc.js:315
currCb @ proc.js:388
Promise resolved (async)
resolvePromise @ proc.js:450
runCallEffect @ proc.js:517
runEffect @ proc.js:435
next @ proc.js:315
currCb @ proc.js:388
checkEffectEnd @ proc.js:612
chCbAtKey @ proc.js:627
currCb @ proc.js:388
(anonymous) @ proc.js:499
exec @ scheduler.js:19
flush @ scheduler.js:60
asap @ scheduler.js:33
(anonymous) @ channel.js:185
emit @ channel.js:26
(anonymous) @ middleware.js:67
(anonymous) @ bindActionCreators.js:3
CreateController._this.save @ CreateController.js:103
(anonymous) @ SimpleForm.js:139
doSubmit @ handleSubmit.js:30
handleSubmit @ handleSubmit.js:92
(anonymous) @ createReduxForm.js:288
(anonymous) @ silenceEvents.js:9
SaveButton._this.handleClick @ SaveButton.js:129
callCallback @ react-dom.development.js:100
invokeGuardedCallbackDev @ react-dom.development.js:138
invokeGuardedCallback @ react-dom.development.js:187
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:201
executeDispatch @ react-dom.development.js:461
executeDispatchesInOrder @ react-dom.development.js:483
executeDispatchesAndRelease @ react-dom.development.js:581
executeDispatchesAndReleaseTopLevel @ react-dom.development.js:592
forEachAccumulated @ react-dom.development.js:562
runEventsInBatch @ react-dom.development.js:723
runExtractedEventsInBatch @ react-dom.development.js:732
handleTopLevel @ react-dom.development.js:4476
batchedUpdates$1 @ react-dom.development.js:16659
batchedUpdates @ react-dom.development.js:2131
dispatchEvent @ react-dom.development.js:4555
interactiveUpdates$1 @ react-dom.development.js:16714
interactiveUpdates @ react-dom.development.js:2150
dispatchInteractiveEvent @ react-dom.development.js:4532
index.js:2178 Warning: Failed prop type: Invalid prop `record` of type `string` supplied to `FileField`, expected `object`.
    in FileField (created by WithStyles(FileField))
    in WithStyles(FileField) (at operaciones.js:25)
    in div (created by FileInputPreview)
    in FileInputPreview (created by WithStyles(FileInputPreview))
    in WithStyles(FileInputPreview) (created by FileInput)
    in div (created by FileInput)
    in span (created by FileInput)
    in div (created by Labeled)
    in div (created by FormControl)
    in FormControl (created by WithStyles(FormControl))
    in WithStyles(FormControl) (created by Labeled)
    in Labeled (created by WithStyles(Labeled))
    in WithStyles(Labeled) (created by FileInput)
    in FileInput (created by WithStyles(FileInput))
    in WithStyles(FileInput) (created by TranslatedComponent(WithStyles(FileInput)))
    in TranslatedComponent(WithStyles(FileInput)) (created by ConnectedField)
    in ConnectedField (created by Connect(ConnectedField))
    in Connect(ConnectedField) (created by Field)
    in Field (created by FormField)
    in FormField (created by Connect(FormField))
    in Connect(FormField) (created by WithFormField)
    in WithFormField (at operaciones.js:24)
    in div (created by FormInput)
    in FormInput (created by WithStyles(FormInput))
    in WithStyles(FormInput) (created by SimpleForm)
    in div (created by SimpleForm)
    in form (created by SimpleForm)
    in SimpleForm (created by WithStyles(SimpleForm))
    in WithStyles(SimpleForm) (created by Form(WithStyles(SimpleForm)))
    in Form(WithStyles(SimpleForm)) (created by Connect(Form(WithStyles(SimpleForm))))
    in Connect(Form(WithStyles(SimpleForm))) (created by ReduxForm)
    in ReduxForm (created by TranslatedComponent(undefined))
    in TranslatedComponent(undefined) (created by Connect(TranslatedComponent(undefined)))
    in Connect(TranslatedComponent(undefined)) (at operaciones.js:23)
    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 CreateView)
    in div (created by CreateView)
    in CreateView (created by CreateController)
    in CreateController (created by TranslatedComponent(undefined))
    in TranslatedComponent(undefined) (created by Connect(TranslatedComponent(undefined)))
    in Connect(TranslatedComponent(undefined)) (created by Create)
    in Create (at operaciones.js:22)
    in OperacionCreate (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) (at App.js:35)
    in Route (created by RoutesWithLayout)
    in Switch (created by RoutesWithLayout)
    in RoutesWithLayout (created by Route)
    in div (at Layout.js:86)
    in main (at Layout.js:79)
    in div (at Layout.js:75)
    in div (at Layout.js:71)
    in Layout (created by WithStyles(Layout))
    in WithStyles(Layout) (created by Connect(WithStyles(Layout)))
    in Connect(WithStyles(Layout)) (at Layout.js:148)
    in MuiThemeProvider (at Layout.js:147)
    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 TranslationProvider (created by withContext(TranslationProvider))
    in withContext(TranslationProvider) (created by Connect(withContext(TranslationProvider)))
    in Connect(withContext(TranslationProvider)) (created by CoreAdmin)
    in Provider (created by CoreAdmin)
    in CoreAdmin (created by withContext(CoreAdmin))
    in withContext(CoreAdmin) (at App.js:26)
    in App (at index.js:7)

Source

josx

👍5

Most helpful comment

I got the same warning as stated by @josx and @nacimgoura using an ImageInput. I solved the problem by using input transforms.
Maybe this is helpful for someone. If there is an easier or better solution I am thankful for advice.

The data for the form in question looks somthing like this:

// Example data for a "Organization" object, omitting everything but the logo field producing the error
{
"logo": "http://66.media.tumblr.com/c6b877f8d6be9a2807b09be0f4c3b330/tumblr_ndel3b4S0Y1qaaccio1_500.gif"
}

The form I first came up with and which produced the error looks like this:

// Imports and other form fields omitted

export function OrganizationEdit (props) {
  return(
    <Edit {...props}>
      <SimpleForm>
        <ImageInput source="logo" accept="image/*">
          <ImageField />
        </ImageInput>
      </SimpleForm>
    </Edit>
  );
}

The form that works for my use case looks like this:

// Imports and other form fields omitted

function formatLogo(value) {
  if (!value ||  typeof value === "string") { // Value is null or the url string from the backend, wrap it in an object so the form input can handle it 
   return { url: value };
  } else {  // Else a new image is selected which results in a value object already having a preview link under the url key
    return value;
  }
}

export function OrganizationEdit (props) {
  return(
    <Edit {...props}>
      <SimpleForm>
        <ImageInput format={ formatLogo } source="logo" accept="image/*">
          <ImageField source="url"  />
        </ImageInput>
      </SimpleForm>
    </Edit>
  );
}

From a user perspective, I think it would be nice if the first form worked as well. @fzaninotto, @djhi do you think it is feasible to make it work? If you think so, I'd try to have a look at it.

sebashwa on 31 Jul 2019

👍7 🎉2 🚀1

All 9 comments

If you are able to illustrate the bug or feature request with an example, please provide a sample application via one of the following means:

CodeSandbox (https://codesandbox.io/s/vvw21793w0)
A sample application via GitHub

djhi on 30 Aug 2018

Same problem with react-admin 2.3.3

capture d ecran 2018-10-10 a 17 08 16

nacimgoura on 10 Oct 2018

It seems that there is an issue when you serialize/unserialize the image. It's probably related to code on your dataProvider rather than in react-admin (because I can't reproduce the issue on master).

If you are convinced this is a react-admin bug, please fork the CodeSandbox mentioned by @djhi and edit it to show the bug with minimum code.

fzaninotto on 11 Oct 2018

Despite this error, the image is correctly uploaded. I'll try to test this in a sandbox environment to show you the error.

nacimgoura on 12 Oct 2018

Bump, can you please provide a CodeSandbox?

fzaninotto on 31 Oct 2018

No news for some time, closing.

fzaninotto on 13 Dec 2018

👎6

This comment is specifically about image input.

I think the issue here was expectation vs reality. I'm having the same "issue". I don't store my images as base64 encoded strings, I store the url (as a string) because I use cloudinary (but really any cdn would behave the same way). The FileInput seems useless for Edit in that case because it needs the actual image instead of the url.

For me, expected behaviour would be allowed use of the "current" image as a string and replacing it with an image object when altered. That also allows you to see if the image changed in the dataprovider (because it's now an object instead of a string) and thus if you should re-upload the image or not. I now need to make my own component that downloads the image first to satisfy the image input.

RWOverdijk on 18 May 2019

👍3

The data for the form in question looks somthing like this:

// Example data for a "Organization" object, omitting everything but the logo field producing the error
{
"logo": "http://66.media.tumblr.com/c6b877f8d6be9a2807b09be0f4c3b330/tumblr_ndel3b4S0Y1qaaccio1_500.gif"
}

The form I first came up with and which produced the error looks like this:

// Imports and other form fields omitted

export function OrganizationEdit (props) {
  return(
    <Edit {...props}>
      <SimpleForm>
        <ImageInput source="logo" accept="image/*">
          <ImageField />
        </ImageInput>
      </SimpleForm>
    </Edit>
  );
}

The form that works for my use case looks like this:

// Imports and other form fields omitted

function formatLogo(value) {
  if (!value ||  typeof value === "string") { // Value is null or the url string from the backend, wrap it in an object so the form input can handle it 
   return { url: value };
  } else {  // Else a new image is selected which results in a value object already having a preview link under the url key
    return value;
  }
}

export function OrganizationEdit (props) {
  return(
    <Edit {...props}>
      <SimpleForm>
        <ImageInput format={ formatLogo } source="logo" accept="image/*">
          <ImageField source="url"  />
        </ImageInput>
      </SimpleForm>
    </Edit>
  );
}

sebashwa on 31 Jul 2019

👍7 🎉2 🚀1

@sebashwa : You save my day! Thank you.
Even with an object (a record fetch with an id for example), I add the warning message et the preview wasn't visible. The input property injected in ImageInput take the record id has value, not the full record...