How to customize PrimeNG p-fileUpload

4
votes

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.

2
angularfile-uploadprimeng
See the templating section at official documentation primefaces.org/primeng/#/fileupload – Cagatay Civici
Thanks for your suggestion, but of course I did look at the documentation. But they don't show a full example and they don't explain how to change the labels of the buttons nor how to change the format of the file size. If you do know how to do this, please show me some examples. – Paul Meems
The label customization is coming soon as it seems github.com/primefaces/primeng/issues/1247 – Cagatay Civici
I've updated my post with the template option. – Paul Meems
By adding cancelLabel="Annuleren" to the HTML tag I can now (after upgrading to the latest PrimeNG) change the labels on the buttons. But I still can't override the formatSize function. I tried this (formatSize)="formatSizeCustom" but that didn't work. – Paul Meems

2 Answers

6
votes

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

6
votes

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.