Primeng: FileUpload Cannot read property 'nativeElement' of undefined; PrimeNG 4.1.3 Release -

[chompy1]

Base Issue:
https://github.com/primefaces/primeng/issues/3385

Notes:
Issue still exists with 4.1.3 release, rolled back to 4.1.2 to remove exceptions in console.

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

[X] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Plunkr Case (Bug Reports)
Please fork the plunkr below and create a case demonstrating your bug report. Issues without a plunkr have much less possibility to be reviewed.

http://plnkr.co/edit/q9KmvhK5Z1hnsIJTj06H?p=preview

Updated systemjs.config.js to use latest build:
'primeng': 'npm:[email protected]'

Current behavior
Using the basic FileUpload, when selecting a single file the system throws errors in the console

Same premise, but different line numbers from Plunker and a demo project:

_PLUNKER_
FileUpload.html:40 ERROR TypeError: Cannot read property 'nativeElement' of undefined
at FileUpload.onFileSelect (fileupload.ts:194)
at Object.eval [as handleEvent] (FileUpload.html:41)
at handleEvent (view.ts:142)
at callWithDebugContext (services.ts:815)
at Object.debugHandleEvent [as handleEvent] (services.ts:411)
at dispatchEvent (util.ts:185)
at eval (element.ts:238)
at HTMLInputElement.eval (dom_renderer.ts:75)
at ZoneDelegate.invokeTask ([email protected]?main=browser:398)
at Object.onInvokeTask (ng_zone.ts:288)
at ZoneDelegate.invokeTask ([email protected]?main=browser:397)
at Zone.runTask ([email protected]?main=browser:165)
at HTMLInputElement.ZoneTask.invoke ([email protected]?main=browser:460)

_DEMO PROJECT:_
FileUpload.html:40 ERROR TypeError: Cannot read property 'nativeElement' of undefined
at FileUpload.webpackJsonp.../../../../primeng/components/fileupload/fileupload.js.FileUpload.onFileSelect (fileupload.js:86)
at Object.eval [as handleEvent] (FileUpload.html:41)
at handleEvent (core.es5.js:11997)
at callWithDebugContext (core.es5.js:13458)
at Object.debugHandleEvent [as handleEvent] (core.es5.js:13046)
at dispatchEvent (core.es5.js:8601)
at core.es5.js:9212
at HTMLInputElement. (platform-browser.es5.js:2651)
at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:424)
at Object.onInvokeTask (core.es5.js:3881)

Expected behavior
No exceptions being thrown in the console window

Minimal reproduction of the problem with instructions

1. Create a new angular-cli project
   ng new primeng-fileupload

1. Install bootstrap 4;
   npm install [email protected] --save

2. Install primeng;
   npm install primeng --save

3. Add bootstrap css to styles.css;
   @import "~bootstrap/dist/css/bootstrap.min.css";

4. Import fileupload module in app.module.ts;
   import { FileUploadModule } from '../../node_modules/primeng/components/fileupload/fileupload';

@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FileUploadModule
],
. . .

1. Add HTML markup to app.component.html for basic fileupload with auto;
   

2. Run the project
   ng serve

3. Click "Browse" button and select a file

What is the motivation / use case for changing the behavior?
Bug fix

Please tell us about your environment:

Windows 7, Visual Code 32/64-bit, webpack
Windows 10, Visual Code 32-bit, webpack

• Angular version: 4.0.X

• PrimeNG version: 4.1.3

• Browser: [Chrome XX | Firefox XX | IE XX ]

• Language: [all | TypeScript X.X | ES6/7 | ES5]

[a-kolybelnikov]

same issue. saying good-bye to primeng's file-upload: cannot find a quick solution and cannot wait for one either because of the project deadline.

[maciekstary]

Same issue with PrimeNG 4.1.3 and Angular 4.3.5

[ningacoding]

@a-kolybelnikov, is as simple as they (primeng team) add this to the p-fileUpload component:

clear() {
        this.files = [];
        this.onClear.emit();
        if (this.fileinput && this.fileinput.nativeElement) { // this validation fixes the issue
            this.fileinput.nativeElement.value = '';
        }
    }

[a-kolybelnikov]

@ikuriel thanks a lot, brilliant. Meanwhile I just implemented a simple HTML5 FileHolder and styled it with CSS. It works just fine.

[ivansnek]

@ikuriel is there a way to call the clear() method on any of the events? I want to validate the image size on the "onSelect" event, but I can't find a way to cancel the event propagation and prevent the file to be uploaded, any thoughts on this?

[ningacoding]

@ivansnek you can pass the ElementReference with:

and in the "onSelect", something like this:

onSelect($event, pfuReference)

So complete HTML template is like:

<p-fileUpload #pfuReference onSelect($event, pfuReference) ... etc...></p-fileUpload>

in the Class you can do next:

onSelect(event, pfuReference) {
    if(pfuReference.msgs && pfuReference.msgs.lenght > 0) { // msgs are the messages of errors/validations
        pfuReference.clear();
        return; // return if you wanna break
    }
    // other things...
}

[ivansnek]

Thanks @ikuriel that helped me to solve it, with a little modification, also I'm closing this issue with the description https://github.com/primefaces/primeng/issues/3736

[ivansnek]

For any one who enter here and still having the same issue, for me on version 4.1.2, the issue was caused by use the mode="basic", I made a workaround hiding the element, hope soon it gets resolved.

[fadelc99]

@ivansnek i have same issue and try to do with #3736 with out mode="basic" and then when click button dialog select file not show. how do you solve this issue?

[ivansnek]

Are you also trying to validate images only? I think I didn’t get your question, as far I understood you’re not able to see the file to selec on the dialog box right? What kind of file is it? Are you using the acept=“image/*” property on the component?