Búsqueda de sitios web

angular - PrimeNG - Enviando datos de formulario y datos de FileUpload mediante clic en el botón

En nuestro proyecto de Angular tenemos un formulario que contiene campos de formulario y PrimeNG FileUpload, y hemos intentado enviar los datos del formulario con los archivos seleccionados.

Hemos revisado la documentación y muchos ejemplos en la web, pero ninguno de ellos cumple con nuestros requisitos (enviar formulario y archivos usando el botón Guardar en lugar de carga automática o el botón FileUpload).

Probamos el siguiente enfoque agregando cada propiedad del modelo a los archivos en la solicitud de carga de archivos, pero creo que debe haber una manera más inteligente de agregar archivos a las propiedades del modelo en el método Guardar (en el archivo .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);
}

Respuesta #1

Puedes usar el evento onSelect:

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

Y en tu componente:

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
}

Como quieres subir manualmente (por otro botón), entonces oculta el botón de subida predeterminado agregando:

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

Respuesta #2

Agrega una referencia a tu p-fileUpload para que puedas invocar el método upload en él desde tu método Guardar.

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

y

@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();
    }
}

Artículos relacionados