How to emulate an upload being in progress with p:fileUpload

user_880619 0
Viewed 862

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.

primefaces jsf
2 Answers

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

user_44780470

It turned out to be really simple actually. While styling, use auto="false". 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.

user_8806190
Related