Ajouter des informations supplémentaires au transfert de données PrimeNG FileUpload

Question

Je cherche à envoyer des informations supplémentaires avec les fichiers qui sont téléchargés avec le composant de téléchargement de fichiers primeng. Fondamentalement, j'ai besoin de savoir à quoi ces fichiers téléchargés sont liés.

Je peux ajouter des en-têtes dans la fonction "onBeforeSend" comme le code d'autorisation dans l'exemple ci-dessous. Où pourrais-je ajouter des informations supplémentaires par exemple 'DocumentID': 'A123'

onBeforeSend(event) {
    event.xhr.setRequestHeader("Authorization", 'Bearer ' + this.authService.getAccessToken());
} 

Quelqu'un sait?

Merci

Answer 1

Dans l'événement onBeforeSend du contrôle primeng fileupload, il existe un objet appelé event.formData, vous pouvez utiliser cet objet pour personnaliser la requête avec des informations supplémentaires. J'ai réussi à implémenter cette fonctionnalité avec succès dans le projet sur lequel je travaille actuellement.

Dans le fichier component.ts:

    onBeforeSend(event) {
       event.xhr.setRequestHeader("Authorization", `Bearer ${this.authService.getToken()}`);
       event.formData.append('DocumentID', 'A123');
    }

Dans le fichier template.html:

J'espère que cela vous aidera !!

Answer 2

Je suis en train d'envoyer l'entité aux côtés des fichiers sur ma demande comme suit (voir cette réponse pour plus d'informations)

Nous pouvons envoyer l'entité sérialisée en JSON dans un Blob à l'intérieur de notre FormData en utilisant le bon type de contenu 'application/json'. Avec cela, nous pouvons inclure des objets imbriqués, ajouter des champs à notre entité - et nous n'aurons pas besoin de changer la signature de la méthode du contrôleur de ressources à chaque nouveau champ ajouté -

curso-update.component.ts

private onBeforeSend(event) {
    const token = this.localStorage.retrieve('authenticationToken') || this.sessionStorage.retrieve('authenticationToken');
    if (!!token) {
        event.xhr.setRequestHeader('Authorization', `Bearer  ${token}`);
    }
    event.formData.append('curso', new Blob([JSON.stringify(this.curso)], { type: 'application/json' }));
}

adapter le contrôleur de ressources en conséquence

CursoResource.java

@PostMapping("/cursos/archivos")
@Timed
public ResponseEntity createCurso(@Valid @RequestPart(value = "curso") Curso curso, 

@RequestPart("archivos[]")MultipartFile[] archivos) {
...
Curso result = this.cursoService.save(curso);
...
}