[sgkalluri]

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

[amosbatto]

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

[amosbatto]

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.

[sgkalluri]

Amos,

Thank you very, very much! This was very helpful!

Best wishes,
SGK

[azatrath]

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

[amosbatto]

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/

[azatrath]

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

[amosbatto]

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.

[azatrath]

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.

abab (1).json

(4.93 KiB) Downloaded 693 times

there is my json, can you check it out. only the 3rd one is working

[amosbatto]

Oh, I see the problem. I have fixed it:

show_uploaded_images.json

(5.07 KiB) Downloaded 709 times

[azatrath]

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?

[amosbatto]

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.

[azatrath]

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

[fiqihpunya]

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.

hallo amosbatto, i want to ask, why i can't upload document in multiple upload in grid ? progress bar is not responding

[dipsha35a]

Athletes know how to use their carbs wisely, and you can, too.
https://www.iorganifireviews.com/

[dipsha35a]

I feel completely satisfied after reading your post,Your posts makes me internally happy and gives me lots of the pleasure.
http://www.ultraomegaburnstore.com/
leptin @ http://bioleptinstore.com/
grs ultra @ http://grsultrastore.com/
panalean @ http://panaleanstore.com/
hydralyft @ http://hydralyft.info/

[dipsha35a]

dairy — thought to be nutritionally dense and thus good for one's health. Blueberries, salmon, kale and acai are just a few examples of foods that have garnered the "superfood" label.
http://www.organiccompleteproteinpowder.com/
http://www.nanotowelreviews.com
http://purathriveliposomalturmericextractreviews.com
http://myyogaburnreviews.com
http://organifiredjuicepowderreviews.com/

[shiotogel4d]

Daftar 5 Bandar Togel Terbesar dan Terpercaya

Bandar Togel Terpercaya dan paling baik di Indonesia 2021 adalah keliru satu agen judi togel online dan bandar togel online yang terpercaya di Indonesia yang formal. Web site togel 4d yang focus terhadap permainan toto togel macau 100 perak online. Satu web togel singapore, hongkong, kamboja. Disini juga terdapat pasaran togel favorit global lainnya, keseluruhan tersedia lebih berasal dari 30 pasaran yang mampu dimainkan tiap tiap hari nya bersama dengan jam keluaran yang berbeda.

Web togel online Terpercaya adalah web site judi online bersama dengan uang orisinil yang miliki lisensi formal untuk game online yang terdaftar di lisensi formal. bandar judi togel online juga sedia kan permainan slot online, dan live casino yang bisa para pemain mampu mainkan dan masih berlimpah ulang.

Bandar togel online terpercaya telah beroperasi berasal dari tahunan 2012 bersama dengan minimal deposit 10.000 dan withdraw sebesar 50.000 dimana bo togel hadiah full udah jadi pilihan primer dan paling baik bagi penduduk Indonesia. Bersama dengan adanya lisensi formal, maka member mampu jalankan taruhan di permainan apapun tanpa takut bukan dibayar.

Cuman memadai bersama 1 akun daftar togel, kamu dapat nikmati bermacam permainan judi online di situs ini layaknya bo togel terpercaya bet 100 perak. Menikmati permainan layaknya judi bola, dan juga bermacam permainan slot layaknya tidak benar satunya Pragmatic play, Joker123, Habanero dan juga lainnya.
:(
https://befonts.com/author/livedrawhk
https://liveviewsports.com/community/profile/live-draw-togel-hongkong-tercepat/
https://shiotogel4d.gumroad.com/
https://my.ptg.org/network/members/profile?UserKey=bd55434d-c6db-4126-ad57-dbb9ac492d8d
https://sketchfab.com/shio-togel
https://play.eslgaming.com/player/17757959/
https://allmy.bio/shiotogel4d-shio-togel-2022
https://www.deviantart.com/shiotogel4d
https://www.figma.com/@shiotogel4d
http://interactive.balchik.bg/CMS/Content/shio-togel-2022-dan-artinya.html
https://www.esthetiquejulie.be/wp-content/uploads/settingsimages/slot-deposit-pulsa.html
https://viparmouring.com/admin_site/upload/files/slot-deposit-pulsa.html
https://jordanaviation.jo/admin_site/upload/files/slot-deposit-pulsa.html
https://www.jordanaviation.jo/admin_site/upload/files/bandar-togel-hadiah-4d-10-juta-terpercaya.html
https://www.ippreview.com/Public/Admin/kindeditor/attached/file/20220213/20220213115511_19176.html
https://www.nispsekuritas.com/pdf/bandar-togel-hadiah-4d-10-juta-terpercaya.htm
https://www.cultureowl.com/kcfinder/upload/files/bandar-togel-hadiah-4d-10-juta-terpercaya.shtml
https://caminhodafe.com.br/ptbr/community/profile/shiotogel4d-daftar-shio-togel-2022-dan-artinya/
https://thesavannahbananas.com/fans-ticket-board/account/bandar-togel-hadiah-4d-10-juta/
https://filesmarcinx125.prv.pl/web/store/shio-togel-2022-dan-artinya.htm
https://powermatic.co.th/uploaded/bandar-togel/bandar-togel-hadiah-4d-10-juta-terpercaya.html
https://community.ascb.org/network/members/profile?UserKey=530cd4e5-655e-41be-be58-302b3efaea9a
https://designaddict.com/community/profile/shiotogel4d-shio-togel-2022/
https://www.kaggle.com/shiotogel4d
https://reedsy.com/discovery/user/shiotogel4ddaftarshi
https://shiotogel4d-daftar-shio-togel-2022.webflow.io/
https://en.gravatar.com/shiotogel4d
https://salonbluehair.com/wp-content/uploads/dreamwork/22321_uploadfolder/big/bandar-togel-hadiah-4d-10-juta-terpercaya.html
https://www.cultureowl.com/kcfinder/upload/files/live-draw-hk.shtml
https://www.nutfruit.org/js/admin/ckeditor/plugins/kcfinder/upload/files/live-draw-hk.shtml
http://www.mtcbus.com.tw/Public/Js/kindeditor/attached/file/20220216/20220216130552_28890.html
http://45.77.205.75/
http://45.32.101.177
https://ss.msu.ac.th/img/portfolio/99fa28999977aa257e67564aba9ee581.html
https://forum.politicsandwar.com/index.php?/profile/15963-shiotogel2022/
http://hq.prospec.co.th/bandar-togel-hadiah-4d-10-juta-terpercaya.html
https://forum.openkm.com/viewtopic.php?p=53268#p53268

[rubygarage]

RubyGarage provides professional web development consulting services. We offer guidance on technology, IT infrastructure, and improvements to existing systems to help you get the most value out of technology. You’ll work with our business analysts, technical architects, user experience professionals, and other specialists to come up with solutions to your business problems.

https://rubygarage.org/services/web-development