PrimeNG manually invoke FileUpload

Question

I want to select the files first and then to start upload those files by an another button instead of component's own Upload button.

How can I do this?

Example code what I've tried:

<button pButton type="button" label="Start Upload"
        (click)="startUpload()"></button>

<p-fileUpload #fileInput name="fileIcon"
              url="rest/batch/file/multimedia/"></p-fileUpload>


@ViewChild('fileInput') fileInput:ElementRef;

constructor( private renderer: Renderer ) { }

startUpload(){

    // this.fileInput.upload(); -> doesn't compile, undefined
    // this.fileInput.nativeElement.upload(); -> this.fileInput.nativeElement is undefined

    ?????????????????
}

Answer 1

Example code which works for me

import {FileUpload} from 'primeng/primeng';

@Component({
  ...
})
export class AppComponent {
    @ViewChild('fileInput') fileInput: FileUpload;

    startUpload(){
        this.fileInput.upload();
    }
}

Plunker Example

Answer 2

If you can, you should use build in buttons. To get access to class variables and methods, you can use ViewChild. You should:

1. Set customUpload to true.
2. Set your uploadHandler for custom upload
3. Set local variable #variable_name in template.
4. Add ViewChild with local variable as selector in component.ts

5. Add new variable to your component.ts with FileUpload type (so now you have access to variables and methods - in VS Code you can click right and go to definition to see all things)

   @ViewChild('fileInput') fileInput:FileUpload;
   // remember to import FileUpload and of course FileUploadModule
   
   onSelect() {
     // here custom validation for file (for example check image's dimension)
   }
   customUpload(event) {
     // here you can set your custom upload
   }