The File Uploader control (BPM document store) posts the file with an XMLHttpRequest; the toolkit exposes progress through the control's On upload progress style events on newer versions, and on older ones you can attach to the request yourself. The formula is always loaded / total:
// UI Toolkit File Uploader "on upload started" (newer toolkits expose the xhr) - or in a custom uploader coach view
xhr.upload.addEventListener("progress", function (e) {
if (e.lengthComputable) {
var pct = Math.round(e.loaded * 100 / e.total); // 0..100
${Progress}.setData(pct); // Progress Bar control bound to a number 0..100
${Label}.setText(Math.round(e.loaded / 1024) + " KB of " + Math.round(e.total / 1024) + " KB");
}
});
xhr.upload.addEventListener("load", function () { ${Progress}.setData(100); });If your toolkit level does not expose the request, build a tiny custom uploader: a file input, a FormData POST to the document REST resource, and the progress listener above:
var fd = new FormData(); fd.append("file", input.files[0]);
var xhr = new XMLHttpRequest();
xhr.open("POST", "/rest/bpm/wle/v1/document?name=" + encodeURIComponent(input.files[0].name) + "&processInstanceId=" + piid, true);
xhr.setRequestHeader("BPMCSRFToken", csrfToken); // BAW 20+ / CP4BA
xhr.upload.onprogress = function (e) { if (e.lengthComputable) ${Progress}.setData(Math.round(e.loaded * 100 / e.total)); };
xhr.onload = function () { ${DocList}.refresh(); };
xhr.send(fd);The file size is known before the upload from input.files[0].size (bytes), which also lets you refuse files over a limit before sending them (question 2968 covers the total across uploads).
References