PrimeNG invoque manuellement FileUpload

Question

Je veux d'abord sélectionner les fichiers, puis lancer le téléchargement de ces fichiers à l'aide d'un autre bouton au lieu du composant lui-même. Upload bouton.

Comment puis-je le faire ?

Exemple de code que j'ai essayé :

<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

Exemple de code qui fonctionne pour moi

import {FileUpload} from 'primeng/primeng';

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

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

Exemple de Plunker

Answer 2

Si vous le pouvez, vous devriez utiliser des boutons intégrés. Pour accéder aux variables et méthodes de la classe, vous pouvez utiliser ViewChild. Vous devriez :

1. Définissez customUpload à true.
2. Définissez votre uploadHandler pour le téléchargement personnalisé
3. Définir la variable locale #variable_name dans le modèle.
4. Ajouter ViewChild avec une variable locale comme sélecteur dans component.ts

5. Ajouter une nouvelle variable à votre component.ts avec le type FileUpload (donc maintenant vous avez accès aux variables et méthodes - dans VS Code vous pouvez cliquer à droite et aller à la définition pour voir toutes les choses)

   @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
   }