Prevent form submission while files are uploading

From pmusers
Jump to: navigation, search

If a Dynaform is submitted while fields are being uploaded in a Multiple File field, the files will not be properly saved. To prevent this from happening, an onsubmit event handler can set with form.setOnSubmit() to loop through all the files in a Multiple File field to check that all of them have finished uploading. If any haven't finished, then the submit action can be terminated by returning false in the event handler.


Process: Submit_when_done_uploading-1.pmx (right click and select Save Link As)
Tested in: PM 3.3.0 Community with in Debian 9.5 with Firefox 52.9
Version: 1.0 (2018-12-10)
Author: Amos Batto (amos@processmaker.com)


Create the following Dynaform that contains a Multiple File field whose ID is "specFiles":

PreventSubmitWhenUploadingFormInDesigner.png

Then, add the following JavaScript to the Dynaform to prevent it from being submitted while files are being uploaded.

var formId = $("form").prop("id");

$("#"+formId).setOnSubmit( function() {
  var aFiles = $("#specFiles").getInfo().fileCollection.models;
  
  for (i in aFiles) {
    if (aFiles[i].attributes.percentage != 100) {
      alert("Please wait until '"+aFiles[i].attributes.file.name+"' finishes uploading.");
      return false; //stop submit
    }
  }
})

To better understand this code, see Accessing files through their fileCollection. If aFiles[i].attributes.percentage does not equal 100 then it hasn't been 100% uploaded and false is returned to stop the Dynaform's submit action.

PreventSubmitWhenUploadingMessage.png