PrimeNG manually invoke FileUpload

问题

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

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

回答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

回答2:

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

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

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
}

来源：https://stackoverflow.com/questions/44153451/primeng-manually-invoke-fileupload

标签

angular

typescript

primeng