You are viewing limited content. For full access, please sign in.

Question

Question

consolidate all attachments on one tab

Forms Version 10 Web Customizations
Updated March 22, 2018
asked on January 31, 2018

Hello Everyone,

I am using tabs on a Travel form. Each tab has an upload button for attachments so I can track doc type. I am trying to have a consolidated list of all attachment on its own tab. I have been able to grab the html from an upload field and it displays each attachment nicely:

$('#q231').on('click', function(){
    //console.log($('#q192 .files').html());
    $(this).html($('#q192 .files').html());
  });

I would love to be able to make the delete feature work, but it doesn't:

I knew it was a long shot, for that to work. Has anyone found a way to do this that works? How can I consolidate all my attachments from multiple tabs onto one tab and make it dynamic? Thanks for the help, comments and criticism :)

 

 

0 0

Answer

SELECTED ANSWER
replied on January 31, 2018

Hi Chris,

You can update the html content of the delete button to click the original delete button.

Here is script that allows more customization and allows reading from multiple tabs:

The file upload fields should have custom CSS 'myUpload', the customHTML field for showing list of files should have CSS 'customHTML':

$(document).ready(function(){
  var filesList = [];
  $('.fileuploader').on('updatevalidation', function(){
    filesList = [];
    $('.myUpload').each(function(){
      $(this).find('.file').each(function(){
        var file = {}
        file.title = $(this).find('td:eq(0) a').attr('title');
        file.href = $(this).find('td:eq(0) a').attr('href');
        file.size = $(this).find('td:eq(1) div').text();
        file.aid = $(this).find('.delCell div').attr('aid');
        filesList.push(file);
      });
    });
    var html = '<table class="files"><colgroup><col width="80%"><col width="15%"><col width="5%"></colgroup><tbody>';
    _.each(filesList, function(file){
      html += '<tr class="file"><td><a target="_blank" download="" title="' + file.title + '" class="ellipsis" href="'+file.href+'">'+file.title+'</a></td><td><div>'+file.size+'</div></td><td class="delCell"><div onclick="DeleteFile('+file.aid+')" class="selectable lfi-times" title="Delete">×</div></td></tr>';
    });
    html += '</tbody></table>';
    $('.customHTML').html(html);
  });
});
  
function DeleteFile(aid) {
  $('.file-del[aid="'+aid+'"]').click();
}

 

1 0
View 2 previous replies
replied on February 1, 2018 • Show version history

Wow, fantastic Rui! Thanks for this code. I am having a hard time triggering the updatevalidation event. I added the classes you suggested, but are not needed in the below test.

I have simplified the code to:

  $('.fileuploader').on('updatevalidation', function(){
    console.log("uploader event");
    });

When I upload the attachment the required field is lingering:

<--any click removes it, but I am wondering if it is throwing off your code.

In the html when the above pic is shown there is a "parsley-error" class:

Once I click out of the upload field the required field warning disappears and the class changes to "parsley-success":

Additionally,

I changed the trigger event from 'updatevalidation' to 'click' to test the rest of the code. It recreated the upload attachment in the customHTML field nicely. When I try to delete the attachment, it tells me that DeleteFile is not defined:

Any idea why it doesn't see your last 3 lines of code?

I have it copied into mine:

 

I can't wait to use your code for this! It is awesome!!

Thanks

 

0 0
replied on February 2, 2018 • Show version history

Hi Chris,

The "updatevalidation" event is triggered by Forms when you finish uploading a file so you don't need to trigger it manually.

For the required field alert issue, does the issue persist if remove all code? When the issue happens, what is the "whole" code on the custom script page? I'm assuming that you didn't post the whole code because there is no "document ready" part which is required.

For the second issue, again where did you put the "document ready" function? In your screenshot it lacks the ending "})" for the document ready function comparing with mine. The "DeleteFile" function should be outside of document ready function.

1 0
replied on March 21, 2018

@████████, 

Regarding the code and functionality in this post, it does not appear after submittal. Is there a way for these attachments to  appear as the steps change through the process?

Thanks!

0 0
replied on March 21, 2018

Updated script for handling user task, read-only form (the submitted form shown on thank you page/instance history), and form saved to repository:

$(document).ready(function(){
  var filesList = [];
  var readOnlyForm = false;
  var printForm = false;
  if ($("input[name='IsLocked']").val() == "True")
  {
    //Fix for read-only form
    readOnlyForm = true;
    if (window.isPrintMode)
    {
      //Fix for form saved to repository
      printForm = true;  
    }
  }
  else
  {
  	$('.fileuploader').on('updatevalidation', UpdateHTMLField);
  }
  //Fix for user task
  UpdateHTMLField();
  
  function UpdateHTMLField()
  {
    filesList = [];
    $('.myUpload').each(function(){
      $(this).find('.file').each(function(){
        var file = {}
        file.title = printForm ? $(this).find('td:eq(0) span').text() : $(this).find('td:eq(0) a').attr('title');
        file.href = printForm ? "" : $(this).find('td:eq(0) a').attr('href');
        file.size = $(this).find('td:eq(1) div').text();
        file.aid = readOnlyForm ? "" : $(this).find('.delCell div').attr('aid');
        filesList.push(file);
      });
    });
    var html = '<table class="files"><colgroup><col width="80%"><col width="15%"><col width="5%"></colgroup><tbody>';
    _.each(filesList, function(file){
      if (printForm)
      {
        html += '<tr class="file"><td><span>'+file.title+'</span></td><td><div>'+file.size+'</div></td>';
      }
      else
      {
      	html += '<tr class="file"><td><a target="_blank" download="" title="' + file.title + '" class="ellipsis" href="'+file.href+'">'+file.title+'</a></td><td><div>'+file.size+'</div></td>';
      }
      if (!readOnlyForm)
      {
      	html += '<td class="delCell"><div onclick="DeleteFile('+file.aid+')" class="selectable lfi-times" title="Delete" style="cursor:pointer;">×</div></td>';
      }
      html += '</tr>';
    });
    html += '</tbody></table>';
    $('.customHTML').html(html);
  }
});
  
function DeleteFile(aid) {
  $('.file-del[aid="'+aid+'"]').click();
}

 

1 0
replied on March 22, 2018 • Show version history

Thanks Rui! It works perfectly!! 

Congrats on the 4000+ points also!

0 0

Replies

replied on February 2, 2018

Hi Rui,

I have a TON of of javaScript & jQuey in there. I stripped it all out to test your code. Here is what I am working with right now:

$(document).ready(function(){
  var filesList = [];
  $('.fileuploader').on('updatevalidation', function(){
    filesList = [];
    $('.myUpload').each(function(){
      $(this).find('.file').each(function(){
        var file = {}
        file.title = $(this).find('td:eq(0) a').attr('title');
        file.href = $(this).find('td:eq(0) a').attr('href');
        file.size = $(this).find('td:eq(1) div').text();
        file.aid = $(this).find('.delCell div').attr('aid');
        filesList.push(file);
      });
    });
    var html = '<table class="files"><colgroup><col width="80%"><col width="15%"><col width="5%"></colgroup><tbody>';
    _.each(filesList, function(file){
      html += '<tr class="file"><td><a target="_blank" download="" title="' + file.title + '" class="ellipsis" href="'+file.href+'">'+file.title+'</a></td><td><div>'+file.size+'</div></td><td class="delCell"><div onclick="DeleteFile('+file.aid+')" class="selectable lfi-times" title="Delete">×</div></td></tr>';
    });
    html += '</tbody></table>';
    $('.customHTML').html(html);
  });
});
  
function DeleteFile(aid) {
  $('.file-del[aid="'+aid+'"]').click();
}

^I pasted in your code with  no changes.

Also, I removed the 'required field' setting on the upload button.

Here is what is happening:

I can upload a file with no 'value is required' error mssage:

But it does not appear in my custom HTML field. So it seems like it is not triggering properly.

I swapped out the updatevalidation with click to test and the upload will appear in im customHTML field:

On clicking the 'X' to delete, nothing happens now. Probably because I have the DeleteFile outside of the document.ready. (Sorry about that  before!)

Tell me what you need to see and I'll send it over.

Thanks Rui for your patience dealing with the noobs!

Chris

 

 

0 0
replied on February 4, 2018

Hi Chris,

Did you test on preview form page? Can you try it on new submission page?

Sorry I should have mentioned this: the script could not work properly on preview page, because uploading file on preview form is quite different from uploading on new submission page. When preview, the files are not actually uploaded to Forms server, so there is no "aid" generated for the "uploaded" file and "updatevalidation" is not triggered.

1 0
replied on February 6, 2018 • Show version history

That was it. I was in preview. It is working great! Thanks so much for the code for the array and html. You are the best Rui!

0 0
You are not allowed to follow up in this post.

Sign in to reply to this post.

Details
Related Posts
Loading ...