Lightrun
question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Console Warning using FileInput on redirect

See original GitHub issue

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)

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:8
  • Comments:13 (7 by maintainers)

github_iconTop GitHub Comments

30reactions
sebashwacommented, Jul 31, 2019

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.

9reactions
fzaninottocommented, Dec 13, 2018

No news for some time, closing.

Read more comments on GitHub >

github_iconTop Results From Across the Web

debugging with visual studio using redirected standard input
I am debugging c++ console application with Visual studio. I exhausted of inserting the same input every time I debug this program.
Read more >
JavaScript console.warn() Method - W3Schools
The warn() method writes a warning to the console. ... The message (warning) to write to the console. ... Use an object as...
Read more >
Console.ReadLine Method (System) - Microsoft Learn
The following example uses the ReadLine method to read input that is redirected from a file. The read operation terminates when the method...
Read more >
How to Read from stdin in Python - DigitalOcean
1. Using sys.stdin to read from standard input · 2. Using input() function to read stdin data · 3. Reading Standard Input using...
Read more >
How to upload files from your HTML form using Base64 ...
Learn how to quickly encode your file input content as Base64 Data URI and save it to your server.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found
Previous page

Exception on resettableAppReducer(state, action)

Next page

[RFC] Remove the List button