Validation messages can be customized using the following four options:

The next code snippet and screenshot demonstrate custom messages. They also show how you can set custom labels for buttons:

<p-fileUpload name="demofiles[]" url="http://localhost:3004/
              fake-backend"
              multiple="true" accept="image/*" maxFileSize="50000"
              invalidFileSizeMessageSummary="{0} has wrong size, "
              invalidFileSizeMessageDetail="it exceeds {0}."
              invalidFileTypeMessageSummary="{0} has wrong file type, "
              invalidFileTypeMessageDetail="it doesn't match: {0}."
              chooseLabel="Select file"
              uploadLabel="Upload it!"
              cancelLabel="Abort">
</p-fileUpload>

The UI is fully customizable by three named ng-template tags. You can customize the toolbar, the content section, and the area with selected files. The next code snippet shows a fully customizable UI:

<p- name="demofiles[]" url="http://localhost:3004/fake-backend"
    multiple="true" accept=".pdf" maxFileSize="1000000">
  <ng-template pTemplate="toolbar">
    <div style="font-size: 0.9em; margin-top: 0.5em;">
      Please select your PDF documents
    </div>
  </ng-template>
  <ng-template let-file pTemplate="file">
    <div style="margin: 0.5em 0 0.5em 0;">
      <i class="fa fa-file-pdf-o" aria-hidden="true"></i>
      {{file.name}}
    </div>
  </ng-template>
  <ng-template pTemplate="content">
    <i class="fa fa-cloud-upload" aria-hidden="true"></i>
    Drag and drop files onto this area
  </ng-template>
</p-fileUpload>

The screenshot shows the initial UI state when no file was selected:

After selection from the file dialog, the UI looks like the following:

Note that only PDF files may be selected. The ng-template with pTemplate="file gets the File instance as an implicit variable. This instance has a property name, which we leverage in our custom UI.

The next level of customization is callback events, which are fired at a certain point of time. There are onBeforeUpload, onBeforeSend, onUpload, onError, onClear, onSelect, and uploadHandler events. The next code snippet demonstrates two of them:

<p-fileUpload name="demofiles[]" url="http://localhost:3004/
              fake-backend" accept="image/*" maxFileSize="1000000"
              (onBeforeSend)="onBeforeSend($event)" 
              (onUpload)="onUpload($event)">
</p-fileUpload>

The onBeforeUpload event is fired shortly before uploading. The registered callback gets an event object with two parameters:

• xhr: The XMLHttpRequest instance (https://developer.mozilla.org/en/docs/Web/API/XMLHttpRequest).
• formData: The FormData object (https://developer.mozilla.org/en/docs/Web/API/FormData).

We can use this callback to customize the request data such as post parameters or header information. For example, we could set a token jwt to send it to the server. Just write the following callback method in the component class:

onBeforeSend(event: any) {
  (<XMLHttpRequest>event.xhr).setRequestHeader('jwt', 'xyz123');
}

As you see, the token has really been sent:

The onUpload event is triggered when all selected files have finished uploading. They passed event object has the mentioned XMLHttpRequest instance and an array of objects of type File. We can iterate over files and gather them together for further processing:

uploadMsgs: Message[] = [];
uploadedFiles: any[] = [];

onUpload(event: any) {
  for (let file of event.files) {
    this.uploadedFiles.push(file);
  }

  // produce a message for growl notification
  this.uploadMsgs = [];
  this.uploadMsgs.push({severity: 'info', 
    summary: 'File Uploaded', detail: ''});
}

It is possible to provide a custom uploading implementation by setting customUpload="true" and defining a custom upload handler. An example:

<p-fileUpload name="demofiles[]" customUpload="true"
              (uploadHandler)="smartUploader($event)">
</p-fileUpload>

It is up to you how to implement the smartUploader callback. The callback has an access to the event.files, which is an array of objects of type File.