PrimeNG - Sending form data and FileUpload data via button click

Question

In our Angular project we have a form containing form fields and PrimeNG FileUpload and we have tried to send form data with the selected files.

We have look at the documentation and lots of examples on the web, but none of them fulfill our requirements (sending form and files using Save button rather than auto upload or FileUpload button).

We tried the following approach by appending each model properties to the files in the file upload request but I think there must be a smarter way by appending files to the model properties in Save method (in .ts file).

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

is (onBeforeSend)="onBeforeSendFile($event)" working as expected ? — Shanil Arjuna, Aug 29 '18 at 10:34
No, because I need to invoke upload manually i.e. on [PrimeNG manually invoke FileUpload](https://stackoverflow.com/questions/44153451/primeng-manually-invoke-fileupload). But not pass the file data to the Controller in ASP.NET MVC. Maybe it is related to request header or etc I am not sure :( — Jack, Aug 29 '18 at 14:10
you can read files with onSelect and then read the data using `fileReader.readAsDataURL`. I can post solution if you need — Toolkit, Jan 19 '19 at 13:51
@Toolkit Many thanks for your reply. Actually I solved the problem, but if it is ready you can post it here so that other people will also benefit from your solution. Regards... — Jack, Jan 28 '19 at 07:27

RzoQe · Answer 1 · 2018-10-08T06:32:37.843

You may use onSelect event:

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

And in your component:

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
}

As you want to upload manually(by another button), then hide the default upload button by adding:

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

score 1 · Answer 2 · answered Sep 01 '18 at 23:42

1

Add a reference to your p-fileUpload so that you can invoke upload method on it from your Save method.

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

and

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

answered Sep 01 '18 at 23:42

Antikhippe

6,316
2
28
43

Thanks for reply. I have already tried this approach as I mentioned my comments above on **PrimeNG manually invoke FileUpload** page. However, the file data pass as null in the Controller (ASP.NET MVC) after returning from service.ts. Any idea how to set **'Content-Type': 'multipart/form-data'**? I gave details on [Cannot set Content-Type in Angular FileUpload control](https://stackoverflow.com/questions/52115680/cannot-set-content-type-in-angular-fileupload-control/52115943#52115943). – Jack Sep 02 '18 at 13:55

PrimeNG - Sending form data and FileUpload data via button click

2 Answers2