title: PrimeNG - Sending form data and FileUpload data via button click
body: <p>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. </p>
  
  <p>We have look at the <a href="https://www.primefaces.org/primeng/#/fileupload" rel="noreferrer">documentation</a> 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). </p>
  
  <p>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). </p>
  
  <p><strong><em>Html:</em></strong></p>
  
  <pre><code>&lt;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"&gt;
  &lt;/p-fileUpload&gt;
  </code></pre>
  
  <p><strong><em>.ts:</em></strong></p>
  
  <pre><code>//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);
  }
  </code></pre>