Questions and discussion about developing processes and programming in PHP, JavaScript, web services & REST API.

Moderator: amosbatto

Forum rules: Please search to see if a question has already asked before creating a new topic. Please don't post the same question in multiple forums.
By sgkalluri
#790709
Hello everyone,

Here are a couple of queries regarding Multiple File Uploader in Grids using JavaScript ...

a) Just like we get the Value contents and Text contents of a grid variable using $("#AnyGrid").getValue(row, col) and $("#AnyGrid").getText(row, col), is there a way by which one can get the contents of a Multiple File Uploader control in a Grid (details of all files uploaded for that variable in that grid row / col) into some sort of a variable (array type?) ?

b) Is it possible to copy the contents of a Multiple File Uploader variable from one row / col cell to another Multiple File Uploader variable in another row / col cell, using JavaScript and by not depending on user intervention?

c) Similarly, is there a way by which the contents of a Multiple File Uploader variable in a row / cell of a grid are removed using Javascript without depending on user intervention?

Thanks in advance,
SGK
By amosbatto
#790773
I have not been able to figure out where the model information is kept for MultipleFile controls when inside grids.

If you are dealing with MultipleFile controls outside grids, they can be accessed in JavaScript in the following ways:

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()

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.name

Get the MIME type of the first file:
#("#MultipleFileID").getInfo().fileCollection.models[0].attributes.file.type

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 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
By amosbatto
#790781
I figured out how to get the list of files in a MultipleFile control in a grid.

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
Set to false if not valid or true if valid

I can't figure out how to delete a file in a grid.
By azatrath
#815605
amosbatto wrote: Fri May 12, 2017 12:48 am I have not been able to figure out where the model information is kept for MultipleFile controls when inside grids.

If you are dealing with MultipleFile controls outside grids, they can be accessed in JavaScript in the following ways:

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()

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.name

Get the MIME type of the first file:
#("#MultipleFileID").getInfo().fileCollection.models[0].attributes.file.type

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 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
with that code may i ask something.

is there any possible way to get date with more id as like
Code: Select all
var oFiles = getFieldById('file').model.attributes.fileCollection.models;
note just file, such as File1, File2, File3
By amosbatto
#815614
If you want an array of the uploaded filenames:
Code: Select all
var aFilenames = [];
var aFiles = $("#MultipleFileID").getInfo().fileCollection.models;

for (i = 0; i < aFiles.length; i++) {
   aFilenames.push( aFiles[i].attributes.file.name );
}
If you want an array of objects with information about the uploaded files:
Code: Select all
var aFilesInfo = [];
var aFiles = $("#MultipleFileID").getInfo().fileCollection.models

for (i = 0; i < aFiles.length; i++) {
   aFilesInfo.push( aFiles[i].getDataFileLink() );
}
See: https://sourceforge.net/p/pmcommunity/c ... dedImages/
By azatrath
#815623
amosbatto wrote: Thu Aug 09, 2018 11:52 pm If you want an array of the uploaded filenames:
Code: Select all
var aFilenames = [];
var aFiles = $("#MultipleFileID").getInfo().fileCollection.models;

for (i = 0; i < aFiles.length; i++) {
   aFilenames.push( aFiles[i].attributes.file.name );
}
If you want an array of objects with information about the uploaded files:
Code: Select all
var aFilesInfo = [];
var aFiles = $("#MultipleFileID").getInfo().fileCollection.models

for (i = 0; i < aFiles.length; i++) {
   aFilesInfo.push( aFiles[i].getDataFileLink() );
}
See: https://sourceforge.net/p/pmcommunity/c ... dedImages/
Code: Select all
var aPreviousFileUids = []; //array holding UIDs of uploaded files
var panelWidth = $("#imagesPanel").find("div.panel-body").width();

function showAnyImages() {
    //check if the list of uploaded files has changed since last showAnyImages():
    var oFiles = getFieldById('dosya').model.attributes.fileCollection.models;
    aCurrentFileUids = [];
    
    for (i=0; i < oFiles.length; i++) {
      aCurrentFileUids.push( oFiles[i].attributes.appDocUid );
    }
    
    //if no change in file list:
    if (JSON.stringify(aCurrentFileUids) == JSON.stringify(aPreviousFileUids)) {
      return;
    }
    
    //update the file images
    aPreviousFileUids = aCurrentFileUids;
	var imagesHtml = '';
  
    for (i=0; i < oFiles.length; i++) {
      var oFileInfo = oFiles[i].getDataFileLink();
      if (oFileInfo.ext=='png' || oFileInfo.ext=='jpeg' || oFileInfo.ext=='jpg') {
        imagesHtml += '<p>'+oFileInfo.name+':<br><img src="'+oFileInfo.href+'"></p>'
      }
    }
  
    //set max-width of the images in the panel:
    var panel = $("#imagesPanel").find("div.panel-body");
    panel.html(imagesHtml); 
    var aImgs = panel.find("img").each(function() {
        $(this).css("max-width", panelWidth);
    });
}

function clickShowImages() {
  if ($("#showImages").getValue() == 'Resimleri Göster') {
    $("#showImages").setValue('Resimleri Gizle');
    $("#imagesPanel").show();
    showAnyImages();
  }
  else { //if 'Hide Images':
    $("#showImages").setValue('Resimleri Göster');
    $("#imagesPanel").hide();
  }
  //reset onclick handler because setValue() resets properties of button
  $("#showImages").find("button").click(clickShowImages);
}

//Execute when Dynaform loads:
$("#showImages").find("button").click(clickShowImages);
$("#imagesPanel").hide();
setInterval("showAnyImages()", 2000);
this is the code i use for showing uploaded images. i am trying to get more than one multiplefile variable.

i did this but its not working
Code: Select all
var aPreviousFileUids = []; //array holding UIDs of uploaded files
var panelWidth = $("#imagesPanel").find("div.panel-body").width();

function showAnyImages() {
    var filenames=['siparis_1' , 'etiket',  'konfekfile']
    For(k=0 ; k<filenames.length;k++)
    {
	var oFiles = getFieldById(filenames [k]).model.attributes.fileCollection.models;
    aCurrentFileUids = [];
    
    for (i=0; i < oFiles.length; i++) {
      aCurrentFileUids.push( oFiles[i].attributes.appDocUid );
    }
    
    //if no change in file list:
    if (JSON.stringify(aCurrentFileUids) == JSON.stringify(aPreviousFileUids)) {
      return;
    }
    
    //update the file images
    aPreviousFileUids = aCurrentFileUids;
	var imagesHtml = '';
  
    for (i=0; i < oFiles.length; i++) {
      var oFileInfo = oFiles[i].getDataFileLink();
      if (oFileInfo.ext=='png' || oFileInfo.ext=='jpeg' || oFileInfo.ext=='jpg') {
        imagesHtml += '<p>'+oFileInfo.name+':<br><img src="'+oFileInfo.href+'"></p>'
      }
    }
  
    //set max-width of the images in the panel:
    var panel = $("#imagesPanel").find("div.panel-body");
    panel.html(imagesHtml); 
    var aImgs = panel.find("img").each(function() {
        $(this).css("max-width", panelWidth);
    });
}
}
function clickShowImages() {
  if ($("#showImages").getValue() == 'Resimleri Göster') {
    $("#showImages").setValue('Resimleri Gizle');
    $("#imagesPanel").show();
    showAnyImages();
  }
  else { //if 'Hide Images':
    $("#showImages").setValue('Resimleri Göster');
    $("#imagesPanel").hide();
  }
  //reset onclick handler because setValue() resets properties of button
  $("#showImages").find("button").click(clickShowImages);
}

//Execute when Dynaform loads:
$("#showImages").find("button").click(clickShowImages);
$("#imagesPanel").hide();
setInterval("showAnyImages()", 2000);
By amosbatto
#815632
Are you trying to show all the uploaded files in the same panel?

If so, try it this way:
Code: Select all
function showAnyImages() {
  var aFieldIds = ['siparis_1' , 'etiket',  'konfekfile'];
  aCurrentFileUids = [];

  for (k=0; k < aFieldIds.length; k++) {
    var oFiles = getFieldById(aFieldIds[k]).model.attributes.fileCollection.models;

    for (i=0; i < oFiles.length; i++) {
      aCurrentFileUids.push( oFiles[i].attributes.appDocUid );
    }
  }
  
  //if no change in file list:
  if (JSON.stringify(aCurrentFileUids) == JSON.stringify(aPreviousFileUids)) {
      return;
  }
    
  //update the file images
  aPreviousFileUids = aCurrentFileUids;
  var imagesHtml = '';
  
  for (i=0; i < oFiles.length; i++) {
      var oFileInfo = oFiles[i].getDataFileLink();
      if (oFileInfo.ext=='png' || oFileInfo.ext=='jpeg' || oFileInfo.ext=='jpg') {
        imagesHtml += '<p>'+oFileInfo.name+':<br><img src="'+oFileInfo.href+'"></p>'
      }
  }
  
  //set max-width of the images in the panel:
  var panel = $("#imagesPanel").find("div.panel-body");
  panel.html(imagesHtml); 
  var aImgs = panel.find("img").each(function() {
        $(this).css("max-width", panelWidth);
  });
}
If you can't figure it out, then post the .json file for your Dynaform.
By azatrath
#815647
amosbatto wrote: Fri Aug 10, 2018 10:11 pm Are you trying to show all the uploaded files in the same panel?

If so, try it this way:
Code: Select all
function showAnyImages() {
  var aFieldIds = ['siparis_1' , 'etiket',  'konfekfile'];
  aCurrentFileUids = [];

  for (k=0; k < aFieldIds.length; k++) {
    var oFiles = getFieldById(aFieldIds[k]).model.attributes.fileCollection.models;

    for (i=0; i < oFiles.length; i++) {
      aCurrentFileUids.push( oFiles[i].attributes.appDocUid );
    }
  }
  
  //if no change in file list:
  if (JSON.stringify(aCurrentFileUids) == JSON.stringify(aPreviousFileUids)) {
      return;
  }
    
  //update the file images
  aPreviousFileUids = aCurrentFileUids;
  var imagesHtml = '';
  
  for (i=0; i < oFiles.length; i++) {
      var oFileInfo = oFiles[i].getDataFileLink();
      if (oFileInfo.ext=='png' || oFileInfo.ext=='jpeg' || oFileInfo.ext=='jpg') {
        imagesHtml += '<p>'+oFileInfo.name+':<br><img src="'+oFileInfo.href+'"></p>'
      }
  }
  
  //set max-width of the images in the panel:
  var panel = $("#imagesPanel").find("div.panel-body");
  panel.html(imagesHtml); 
  var aImgs = panel.find("img").each(function() {
        $(this).css("max-width", panelWidth);
  });
}
If you can't figure it out, then post the .json file for your Dynaform.
(4.93 KiB) Downloaded 8 times
there is my json, can you check it out. only the 3rd one is working
By azatrath
#815682
amosbatto wrote: Mon Aug 13, 2018 11:19 pm Oh, I see the problem. I have fixed it:
show_uploaded_images.json
ty amos i am glad,

can we try to show excel such as image? is this possible?
for example upload excel file showing like image? or showing excel on panel?
By amosbatto
#815691
azatrath wrote: Tue Aug 14, 2018 2:50 am can we try to show excel such as image? is this possible?
for example upload excel file showing like image? or showing excel on panel?
I don't have time to develop this, but here are the basic steps if you want to do it:

You can use form.submitForm() to submit the Dynaform and then fire a trigger after the Dynaform that would check if there are any uploaded spreadsheet files. If so, then it would use PhpSpreadSheet to open the spreadsheet files and get their contents and place them in an array. Then, serialize the contents with json_encode() and assign them to a case variable that is associated with a hidden variable in the Dynaform.

Then add JavaScript to your Dynaform that uses JSON.parse() to read the contents of the hidden field and convert it to an array. Then take that array and use DataTables to display it inside a div inside your panel where you are displaying the other images.
By azatrath
#815855
amosbatto wrote: Tue Aug 14, 2018 11:33 pm
azatrath wrote: Tue Aug 14, 2018 2:50 am can we try to show excel such as image? is this possible?
for example upload excel file showing like image? or showing excel on panel?
I don't have time to develop this, but here are the basic steps if you want to do it:

You can use form.submitForm() to submit the Dynaform and then fire a trigger after the Dynaform that would check if there are any uploaded spreadsheet files. If so, then it would use PhpSpreadSheet to open the spreadsheet files and get their contents and place them in an array. Then, serialize the contents with json_encode() and assign them to a case variable that is associated with a hidden variable in the Dynaform.

Then add JavaScript to your Dynaform that uses JSON.parse() to read the contents of the hidden field and convert it to an array. Then take that array and use DataTables to display it inside a div inside your panel where you are displaying the other images.
thank you for replying mate, but i think this method is far beyond my limits :) i am newbie with coding

Hi, Please tell to processmaker team for solu[…]

Hey jamesjohnston, Your first course of action is[…]

https://wiki.processmaker.com/3.2/Case_Summary#Mor[…]

instagram download for pc

Download images on Instagram, you have to take a s[…]