Manipulating Multiple File controls with JavaScript

From pmusers
Jump to: navigation, search

A Multiple File control can be accessed with the JavaScript code $("#MultipleFileID").

Accessing model information

ProcessMaker uses Backbone.js to store the model information about DynaForm fields and the attributes for a Multiple File control are available in an object at:
getFieldById("field-id").model.attributes
or
$("#field-id").getInfo()

For example, the following form has a MultipleFile control with two uploaded files:

ShowImagesButtonInMultipleFileForm.png

The fileCollection object is large and complicated, but here is a simplified representation of the more useful information in the object about the two uploaded files stored in getFieldById('imageFiles').model.attributes.fileCollection:

{
  length: 2,
  models: [
    {
      attributes {
        appDocUid: "2489364075ab54e0de17a28021324630",
        file: {
          lastModified: 1513915201000,
          lastModifiedDate: Date 2017-12-22T04:00:01.000Z,
          name: "ForumCaptcha.png", 
          size: 13745,  
          type: "image/png"
        }
        index: 0,
        isValid: true,
        mode: "edit",
        percentage: 100,
        size: "16",
        sizeUnity: "MB",
        urlBase: "{server}/sys{ws}/en/{skin}/cases/cases_ShowDocument?a={docUID}&v=1",
        version: 1
      },
      getDataFileLink() //in version 3.2.1 and earlier
      getData()         //in version 3.2.2 and later
      getLinkDownload() //in version 3.2.2 and later
      
    },
    {      
      attributes {
        appDocUid: "8001226465ab54e0e274224073266424",
        file: {
          lastModified: 1513124784000,
          lastModifiedDate: Date 2017-12-13T00:26:24.000Z,
          name: "GoogleMap.png", 
          size: 287173,
          type: "image/png"
        }
        index: 1,
        isValid: true,
        mode: "edit",
        percentage: 100,
        size: "16",
        sizeUnity: "MB",
        urlBase: "{server}/sys{ws}/en/{skin}/cases/cases_ShowDocument?a={docUID}&v=1",
        version: 1
      },
      getDataFileLink() //in version 3.2.1 and earlier
      getData()         //in version 3.2.2 and later
      getLinkDownload() //in version 3.2.2 and later
    }
  ],
}

fileCollection.length is the number of uploaded files and fileCollection.models is a array of objects holding information about each uploaded file.

Accessing files through their fileCollection

Get the number of files in a MultipleFile control:

$("#MultipleFileID").getInfo().fileCollection.length

Get the ID of the first file:

$("#MultipleFileID").getInfo().fileCollection.models[0].attributes.appDocUid

Get the filename of the first file:

$("#MultipleFileID").getInfo().fileCollection.models[0].attributes.file.name

Get the size in bytes of the first file:

$("#MultipleFileID").getInfo().fileCollection.models[0].attributes.file.size

      Note: file.size is only set if file was uploaded in the current DynaForm.

Get the MIME type of the first file (such as "image/png" or "application/pdf" or "application/msword"):

$("#MultipleFileID").getInfo().fileCollection.models[0].attributes.file.type

      Note: file.type is only set if file was uploaded in the current DynaForm.

Check if the first file is valid (i.e., allowed to be uploaded):

$("#MultipleFileID").getInfo().fileCollection.models[0].attributes.isValid

Check if the first file is fully uploaded (i.e., 100% uploaded):

if ($("#MultipleFileID").getInfo().fileCollection.models[0].attributes.percentage == '100') {
  //add code here
}

Get file info in version 3.2.1 and earlier

The getDataFileLink() function in version 3.2.1 and earlier returns an object with information about a uploaded file, similar to the following:

{  
  ext:  "png",
  href: "http://example.com/sysworkflow/en/neoclassic/cases/cases_ShowDocument?a=2489364075ab54e0de17a28021324630&v=1",
  icon: "file-mage-o",
  name: "streetMap.png"
}

The following code would get the filename and URL to download the first file uploaded to a MultipleFile field in version 3.2.1 and earlier:

var oFileInfo = $("#MultipleFileID").getInfo().fileCollection.models[0].getDataFileLink();
var filename = oFileInfo.name;
var url = oFileInfo.href;

The following code loop through all the files uploaded to a MultipleFile field in version 3.2.1 and earlier and create an array of information about them:

var aUploadedFiles = [];
var aFiles = $("#MultipleFileID").getInfo().fileCollection;

for (var i = 0; i < aFiles.length; i++) {
  aUploadedFiles.push( {
     filename: aFiles.models[i].attributes.file.name,
     id:       aFiles.models[i].attributes.appDocUid,
     url:      aFiles.models[i].getDataFileLink().href
  } );
}

Get file info in version 3.2.2 and later

The fileCollection.models[X].getDataFileLink() function is not available in version 3.2.2 and later, but the getData() function can be used instead to return an object with information about a uploaded file, similar to the following:

{ 
   appDocUid: "9468402345c0f02a8d662c3090406388", 
   name: "streetMap.png", 
   version: 1
}

Likewise, the fileCollection.models[x].getLinkDownload() can be used to get the URL to download the file.

The following code would get the filename and URL to download the first file uploaded to a MultipleFile field in version 3.2.2 and later:

var filename = $("#MultipleFileID").getInfo().fileCollection.models[0].getData().name;
var url = $("#MultipleFileID").getInfo().fileCollection.models[0].getLinkDownload();

The following code loop through all the files uploaded to a MultipleFile field in version 3.2.2 and later and create an array of information about them:

var aUploadedFiles = [];
var aFiles = $("#MultipleFileID").getInfo().fileCollection;

for (var i = 0; i < aFiles.length; i++) {
  aUploadedFiles.push( {
     filename: aFiles.models[i].attributes.file.name,
     id:       aFiles.models[i].attributes.appDocUid,
     url:      aFiles.models[i].getLinkDownload()
  } );
}

Accessing deleted files

Get the number of files deleted from the MultipleFile:

$("#MultipleFileID").getInfo().toRemoveArray.length

Get the filename of the first file deleted from the MultipleFile:

$("#MultipleFileID").getInfo().toRemoveArray[0].attributes.file.name

Get the size in bytes of the first file deleted from the MultipleFile:

$("#MultipleFileID").getInfo().toRemoveArray[0].attributes.file.size

Get the MIME type of the first file deleted from the MultipleFile:

$("#MultipleFileID").getInfo().toRemoveArray[0].attributes.file.type

Delete files in version 3.2.1 and earlier

Delete all the files in a MultipleFile control:

$("#MultipleFileID").find("div.multiplefile-button-delete").click()

Delete the first file.

$("#MultipleFileID").find("div.multiplefile-container").eq(0).find("div.multiplefile-button-delete").click()

Delete the last file:

$("#MultipleFileID").find("div.multiplefile-container").last().find("div.multiplefile-button-delete").click()

Delete files in version 3.2.2 and later

Delete all the files in a MultipleFile control:

$("#MultipleFileID").find("a.fa-trash").click()

Delete the first file.

$("#MultipleFileID").find("a.fa-trash").eq(0).click()

Delete the last file:

$("#MultipleFileID").find("a.fa-trash").last().click()


Accessing MultipleFile fields inside grids

To get the number of rows in a grid:

getFieldById("gridID").gridtable.length

To get the number of files in a MultipleFile control in specified row and column numbers:

getFieldById("gridID").gridtable[row][column].model.attributes.fileCollection.models.length

Note that the counting of row and column numbers starts from 0.

For example, to get the number of files uploaded to the MultipleFile control located on the 2nd row in the 3rd Column in the "clientsList" grid:

getFieldById("clientsList").gridtable[1][2].model.attributes.fileCollection.models.length

Get the ID of the first uploaded file:

getFieldById("clientsList").gridtable[1][2].model.attributes.fileCollection.models[0].attributes.appDocUid

Get the filename of the first uploaded file:

getFieldById("clientsList").gridtable[1][2].model.attributes.fileCollection.models[0].attributes.file.name

Get the size in bytes of the first uploaded file:

getFieldById("clientsList").gridtable[1][2].model.attributes.fileCollection.models[0].attributes.file.size

Get the MIME type of the first uploaded file:

getFieldById("clientsList").gridtable[1][2].model.attributes.fileCollection.models[0].attributes.file.type

Check if the first uploaded file is valid (i.e., doesn't exceed the maximum size and has the correct extension):

getFieldById("clientsList").gridtable[1][2].model.attributes.fileCollection.models[0].attributes.file.isValid

Use the getDataFileLink() function to get information about an uploaded file in version 3.2.1 and earlier. The following code gets info about the first file uploaded in the second row in the third column of a grid:

var oFileInfo = getFieldById("clientsList").gridtable[1][2].model.attributes.
   fileCollection.models[0].getDataFileLink();
var filename = oFileInfo.name;
var url = oFileInfo.href;

Likewise, use the getLinkDownload() function to get the URL to download a file in version 3.2.2 and later:

var filename = getFieldById("clientsList").gridtable[1][2].model.attributes.
   fileCollection.models[0].attributes.file.name;
var url = getFieldById("clientsList").gridtable[1][2].model.attributes.
   fileCollection.models[0].getLinkDownload();