web-dev-qa-db-fra.com

PrimeNG - Envoi de données de formulaire et de données FileUpload via un clic de bouton

Dans notre projet Angular, nous avons un formulaire contenant des champs de formulaire et PrimeNG FileUpload et nous avons essayé d’envoyer des données de formulaire avec les fichiers sélectionnés. 

Nous avons consulté la documentation } et de nombreux exemples sur le Web, mais aucun d’entre eux ne répond à nos exigences (envoi de formulaires et de fichiers à l’aide du bouton Enregistrer au lieu du téléchargement automatique ou du bouton FileUpload). 

Nous avons essayé l'approche suivante en ajoutant les propriétés de chaque modèle aux fichiers de la demande de téléchargement de fichier, mais je pense qu'il doit exister une méthode plus intelligente en ajoutant des fichiers aux propriétés du modèle dans la méthode Save (dans le fichier .ts). 

Html:

<p-fileUpload name="files" url="/MyController/Save" 
    (onBeforeSend)="onBeforeSendFile($event)" 
    (onUpload)="onUploadFile($event)" 
    (onError)="onErrorFile($event)" 
    (onBeforeUpload)="onBeforeUploadFoto($event)" 
    multiple="multiple" 
    chooseLabel="Select" 
    uploadLabel="Load" 
    cancelLabel="Cancel">
</p-fileUpload>

.ts:

//code omitted fo brevity

//at here we append model properties to the array in file upload request:
onBeforeUploadFoto(event: any) {
    event.formData.append('id', this.entityId);
    event.formData.append('name', this.entityName);
}
angulartypescriptfile-uploadprimeng
6
Willys

Vous pouvez utiliser l'événement onSelect:

<p-fileUpload name="files" (onSelect)="dealWithFiles($event)"></p-fileUpload>

Et dans votre composant: 

dealWithFiles(event) {
    files = event.originalEvent.files;
    // Deal with your files
    // e.g  assign it to a variable, and on submit add the variable to your form data
}

Comme vous voulez télécharger manuellement (avec un autre bouton), masquez le bouton de téléchargement par défaut en ajoutant: 

<p-fileUpload name="files" showUploadButton="false" (onSelect)="dealWithFiles($event)"></p-fileUpload>
2
RzoQe

Ajoutez une référence à votre p-fileUpload pour pouvoir appeler la méthode upload à partir de votre méthode Save .

<p-fileUpload #fileInput name="files" ...

et

@ViewChild('fileInput') fileInput: FileUpload;

// ...

// save method manually called by clicking on your Save button
save() {
    if (this.fileInput && this.fileInput.files.length > 0) {
        this.fileInput.upload();
    }
}
1
Antikhippe