3

I have a PrimeFaces 8 application which I need to style. One of the requirements is applying custom style to the UI that is shown when an upload is in progress in a p:fileUpload component using auto="true". Triggering that UI by doing an actual upload will be very laborious. Is there a way to emulate the upload being in progress? I just want the UI elements to be visible in order to apply custom styling.

Jasper de Vries
  • 19,370
  • 6
  • 64
  • 102
  • 1
    What I did previously is to upload a ridiculously large file and then in the HTML element inspector copy the "outer HTML" and then wait for it to finish and then put it back in. It'll stay there permanently. I imagine there's a better approach than that :) – BalusC May 28 '20 at 09:06
  • @BalusC Thanks! I also thought of that in combination with reducing the bandwidth in the browser developer tools. I was hoping for a Javascript call. Hope one of the PF devs will know if that's possible. – Jasper de Vries May 28 '20 at 09:14

2 Answers2

5

In The Auto, Advanced (and non explicit single or multiple) showcase the follwing 

var f = new File([""], "filename", { type: 'text/html' });
var data = new Object();
PF('widget_j_idt726_j_idt727').addFileToRow(f, data);

shows 'something'

image after calling addFileToRow

I got the addFileToRow from the PrimeFaces fileupload javascript source

You do get the following error

    TypeError: this.files[i].ajaxRequest.submit is not a function

But I think it can be ignored...

When you next call ucfg.progress(...) on the widget and before this set some data properties/fields/...

data.files = [];
data.files[0] = f;
data.total = 100;
data.loaded = 10;

PF('widget_j_idt726_j_idt727').ucfg.progress(null, data);

It shows

enter image description here

Kukeltje
  • 12,223
  • 4
  • 24
  • 47
1

Although Kukeltje's answer will work, there is simpler way. While styling, use auto="false" instead. This will give you a preview of the file to upload, including a progress bar at 0%. Now, use the development tools to select the progress bar element with class name ui-progressbar-value and set the style properties to display: block; and any width. You can achieve this by simply and only using the DOM inspector.

See also:

Jasper de Vries
  • 19,370
  • 6
  • 64
  • 102