Cannot read property 'show' of undefined at FileUpload.validate

[JaviGarciaWozzo]

I'm submitting a ... (check one with "x")

[ X ] bug report
[ ] feature request
[ ] support request

Codesandbox Case (Bug Reports)
I have this FileUpload:

import React, { Component } from 'react';
import { FileUpload } from 'primereact/fileupload';

const SELF_CALL = 'self';

export default class Dropzone extends Component {
  constructor(props) {
    super(props);
    this.state = {
      files: [],
    };
    this.onClear = this.onClear.bind(this);
    this.onSelect = this.onSelect.bind(this);
    this.onBeforeUpload = this.onBeforeUpload.bind(this);
  }

  onClear(param) {
    // Only for calls by user
    if (SELF_CALL === param) {
      const { onClear } = this.props;

      this.setState({ files: [] }, onClear ? () => onClear() : null);
    }
  }

  onSelect(event) {
    const { files } = event;
    const { maxSize } = this.props;

    if (files && 0 < files.length) {
      // size is correct
      if (files[files.length - 1].size <= maxSize) {
        this.setState({ files: [ ...files ] });
      } else {
        this.onClear();
      }
    }
  }

  onBeforeUpload() {
    const { files } = this.state;
    const { onUpload, multiple } = this.props;

    if (onUpload && files && 0 < files.length) {
      onUpload(multiple ? files : files[0]);
    }
  }

render() {
<FileUpload
          accept="image/*"
          auto
          className="own-dropzone"
          maxFileSize={10000}
          mode="basic"
          multiple={false}
          onClear={this.onClear}
          onSelect={this.onSelect}
          onBeforeUpload={this.onBeforeUpload}
/>
}
}

and I get this error, only in basic mode:

FileUpload.js?461f:223 Uncaught TypeError: Cannot read property 'show' of undefined
    at FileUpload.validate (FileUpload.js?461f:223)
    at FileUpload.onFileSelect (FileUpload.js?461f:145)
    at HTMLUnknownElement.callCallback (react-dom.development.js?61bb:149)
    at Object.invokeGuardedCallbackDev (react-dom.development.js?61bb:199)
    at invokeGuardedCallback (react-dom.development.js?61bb:256)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js?61bb:270)
    at executeDispatch (react-dom.development.js?61bb:561)
    at executeDispatchesInOrder (react-dom.development.js?61bb:583)
    at executeDispatchesAndRelease (react-dom.development.js?61bb:680)
    at executeDispatchesAndReleaseTopLevel (react-dom.development.js?61bb:688)

and because of this, my method onSelect is never called.

Expected behavior
Should call onSelect method

Minimal reproduction of the problem with instructions
After selecting the image, it gets an error.

Please tell us about your environment:
npm, Windows 10.

• React version:
  "react": "^16.8.1",

• PrimeReact version:
  "primereact": "^3.0.0",

• Browser:
  [ Chrome ]

[cagataycivici]

Provide a sample please at;

https://codesandbox.io/s/qjx332qq4

I'm unable to replicate.

[wendellde]

I'm having the same error

[wendellde]

Provide a sample please at;

https://codesandbox.io/s/qjx332qq4

I'm unable to replicate.

To replicate:

1. go to https://www.primefaces.org/primereact/#/fileupload
2. open devtools
3. upload a file that is greater than 2MB using 'Basic with Auto'

error:

Uncaught TypeError: Cannot read property 'show' of undefined
    at t.value (FileUpload.js:164)
    at t.value (FileUpload.js:128)
    at Object.<anonymous> (react-dom.production.min.js:49)
    at d (react-dom.production.min.js:69)
    at react-dom.production.min.js:73
    at k (react-dom.production.min.js:140)
    at P (react-dom.production.min.js:169)
    at O (react-dom.production.min.js:158)
    at A (react-dom.production.min.js:232)
    at _n (react-dom.production.min.js:1713)

mine:

        <FileUpload
          className={error ? 'p-error' : ''}
          chooseLabel={chooseLabel}
          mode="basic"
          name="image_1"
          accept="image/*"
          maxFileSize={9000000}
          onSelect={onSelect}
          url={`${config.apiURL}uploads/${uploadToBucket}/images`}
          onUpload={onUpload}
          onError={onError}
          onBeforeSend={onBeforeSend}
          onProgress={onProgress}
          auto
        />

error:

Uncaught TypeError: Cannot read property 'show' of undefined
    at FileUpload.validate (FileUpload.js:223)
    at FileUpload.onFileSelect (FileUpload.js:145)
    at HTMLUnknownElement.callCallback (react-dom.development.js:149)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:199)
    at invokeGuardedCallback (react-dom.development.js:256)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:270)
    at executeDispatch (react-dom.development.js:561)
    at executeDispatchesInOrder (react-dom.development.js:583)
    at executeDispatchesAndRelease (react-dom.development.js:680)
    at executeDispatchesAndReleaseTopLevel (react-dom.development.js:688)
validate @ FileUpload.js:223
onFileSelect @ FileUpload.js:145
callCallback @ react-dom.development.js:149
invokeGuardedCallbackDev @ react-dom.development.js:199
invokeGuardedCallback @ react-dom.development.js:256
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:270
executeDispatch @ react-dom.development.js:561
executeDispatchesInOrder @ react-dom.development.js:583
executeDispatchesAndRelease @ react-dom.development.js:680
executeDispatchesAndReleaseTopLevel @ react-dom.development.js:688
forEachAccumulated @ react-dom.development.js:662
runEventsInBatch @ react-dom.development.js:816
runExtractedEventsInBatch @ react-dom.development.js:824
handleTopLevel @ react-dom.development.js:4824
batchedUpdates$1 @ react-dom.development.js:19260
batchedUpdates @ react-dom.development.js:2150
dispatchEvent @ react-dom.development.js:4903
react-dom.development.js:289 Uncaught TypeError: Cannot read property 'show' of undefined
    at FileUpload.validate (FileUpload.js:223)
    at FileUpload.onFileSelect (FileUpload.js:145)
    at HTMLUnknownElement.callCallback (react-dom.development.js:149)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:199)
    at invokeGuardedCallback (react-dom.development.js:256)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:270)
    at executeDispatch (react-dom.development.js:561)
    at executeDispatchesInOrder (react-dom.development.js:583)
    at executeDispatchesAndRelease (react-dom.development.js:680)
    at executeDispatchesAndReleaseTopLevel (react-dom.development.js:688)

[wendellde]

this could be because of the renderBasic function in FileUpload does not have the element <Messages ref={(el) => this.messagesUI = el } />

I could be wrong though...

[cagataycivici]

There is a new onValidationFail event to handle validation errors in basic mode such as displaying a message with a UI of your choice, in advanced they are displayed using the built-in messages.

[findelallc]

fileupload className property not working! any idea how to solve?

<FileUpload className="p-button-danger" uploadLabel="Uploading.." chooseLabel="Browse Document" mode="basic" name="demo3[]" accept="application/pdf" maxFileSize={1000000} onUpload={this.onBasicUpload} />