How to customize PrimeNG p-fileUpload

Question

We're using p-fileUpload from PrimeNG 1.0.0-beta.16

I want to customize the buttons. They now have as labels 'Choose', 'Upload' and 'Cancel'. How do I change the labels?

Another related question. After selecting some files the filenames are shown and the file sizes. How to change the format of the file size? It now shows '877.271 KB'. The 3 digits are a bit confusion. How to change it to only show 1 digit: '877.2 KB'

I tried ith templating:

        <template let-file pTemplate type="file">
            <div>{{file.name}}</div>
            <div>{{file.size}}</div>
        </template>

And I now have full control of the file size and I can format it as I wish, but I don't have the remove button again. I need to re-implement that as well. It all looks a bit overkill for only changing the format of the file size.

Answer 1

as @Paul already mentioned, we can easily modify 3 labels using HTML attributes:

<p-fileUpload name="myfile[]" 
              url="http://localhost:3000/upload"
              chooseLabel="My choose"
              uploadLabel="My upload"
              cancelLabel="My cancel"></p-fileUpload>

Function which is responsible for format size formatting is:

FileUpload.prototype.formatSize = function (bytes) {
  if (bytes == 0) {
    return '0 B';
  }
  var k = 1000, 
      dm = 3, 
      sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],    
      i = Math.floor(Math.log(bytes) / Math.log(k));
  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
};

I copied it from https://unpkg.com/[email protected]/components/fileupload/fileupload, as we can see dm variable is responsible for number of digits after float dot. Let's modify it from 3 to 1 and override this function.

First, import FileUpload class:

import {FileUpload, FileUploadModule} from 'primeng/primeng';

Second, override its prototype's function:

FileUpload.prototype.formatSize = function (bytes) {
  if (bytes == 0) {
    return '0 B';
  }
  var k = 1000, 
      dm = 1, 
      sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'], 
      i = Math.floor(Math.log(bytes) / Math.log(k));
  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
};

plunker: http://plnkr.co/edit/yo6LyYgKlThcewtpjiyI?p=preview

Answer 2

I don't know if this can still be helpful, but I have found in another webpage a solution for this. First, here is the code for the html part:

<p-fileUpload #fileUploader name="file">
    <ng-template let-file pTemplate='file'>
        <div>{{file.name}}</div>
        <div>{{file.size | convertFileSize}}</div>
        <div><button icon="fa-close" pButton type="button" label="Remove" (click)="removeFile(file, fileUploader)"></button></div>
    </ng-template>
</p-fileUpload>

So, the button is calling a custom removeFile function inside component.ts and passing the file to be removed (given by the template) and the fileUpload component itself to that method, which is the following one:

removeFile(file: File, uploader: FileUpload) {
  const index = uploader.files.indexOf(file);
  uploader.remove(null, index);
}

Analyzing the remove method of the FileUpload original component, I've seen that the first param (null in the example) is a MouseEvent, so that null can actually be replaced by a derived class from Event.