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

Question

Question

File Upload Preview

asked on December 15, 2016

Hello All,  I have been attempting to use the code from this post, http://answers.laserfiche.com/questions/86375/Employee-Expense-Process, to allow users to preview receipts uploaded to an expense report.  However, I can not seem to get it to work properly.  I have assigned my upload button the class="receipt" and using the following code:

$('.files tbody tr').each(function () {
  if ($(this).find('a').length && $(this).find('a').attr('title').toLowerCase().indexOf('.jpg') >= 0) {
        var imgSrc = $(this).find('a').attr('href');
        var imgRow = $('<img width="300px" class="receipt">');
        imgRow.attr('src', imgSrc);
     $('<tr><td colspan="6">' + imgRow.prop('outerHTML') + '</td></tr>').insertAfter($(this).parents('.cf-table>tbody>tr'));
     }
});

I cannot figure out what part of this I am missing.  Any suggestions???

0 0

Replies

replied on December 15, 2016

Hi Glenn

We've taken a slightly different approach with this JS to have it write the images onto the page and have found this works well. This is based off of the thread https://answers.laserfiche.com/questions/90599/Viewing-a-Form-attachment-in-LF-client

We used this JS instead of what was originally provide to get the images to start at the left margin on the next line below the upload button. 

Something else for you to consider, is that you are putting all of the different types of expenses on one line (Hotel, Meals, Travel, etc). We broke the different types out into sections so that all meals are together, hotels, etc as the folks in accounting preferred the data separately as it was easier for them to have this broken out when posting into the ERP.

$(document).ready(function () { 
    var iml = ['jpg','jpeg','gif','png']; 
    $('.files tbody tr').each(function() { 
      if ($(this).find('a').length && $.inArray($(this).find('a').attr('title').match(/\.(\w{3,4})$/)[1],iml)>-1) { 
        var ims = $(this).find('a').attr('href'), 
            imr = $('<img style="width:300px;" />'); 
        imr.attr('src',ims); 
        $('<tr><td colspan=3>'+imr.prop('outerHTML')+'</td></tr>').insertAfter($(this).find('a').closest('tr')); 
      } 
    }); 
});

 

As a second part of this, we also write the images into the Forms Image that is saved into the Repository so we don't have to manage the individual Photos that are uploaded after the fact.

To do that you need to update the file printform.js located at C:\Program Files\Laserfiche\Laserfiche Forms\Forms\js\form (best to duplicate and rename the printform file in case you need to revert back). 

In the Printform.js replace the current code with the following

// Copyright 2012-2016 Laserfiche. All rights reserved

$(function(){$(".cf-section-block>.collapsible.collapsed").each(function(){if(window.isPrintMode){$(this).next().show();$(this).toggleClass("collapsed");}});$.ConvertFieldsReadonly=function(){$(":input[name^=Field][type='text'],[type='number'],[type='email']").not(".calendar").each(function(){if(!shouldMakeReadOnly($(this)))
return;var fieldType=$(this).attr('type');var v=$('<div/>').text(fieldType=="number"?$(this).attr('data-val'):$(this).val()).html();var eid="id='"+$(this).attr('id')+"'"+" type='"+fieldType+"'";var cf=$(this).attr("currencyformat");if(cf){eid+="currencyformat='"+cf+"'";}
var link=v;if(!window.isPrintMode){link=LF.utils.GenerateLink(v);}
if(window.isPrintMode){$(this).parent().width($(this).parent().innerWidth());}
$(this).parent().css("word-wrap","break-word");var new1=$("<div class='ro' "+eid+" >"+link+"</div>");if(cf){new1.css("display","inline-block");}
else{setWidthPrintItem($(this)[0].className.split(/\s+/),new1);}
$(this).replaceWith(new1);});$(":input[name^=Field][type='text'].calendar").each(function(){if(!shouldMakeReadOnly($(this)))
return;var v=$('<div/>').text($(this).val()).html();if(window.isPrintMode){$(this).parent().width($(this).parent().innerWidth());}
$(this).parent().css("word-wrap","break-word");var new1=$("<span class='ro'>"+v+"</span>");$(this).replaceWith(new1);});$("textarea[name^=Field]").each(function(){if(!shouldMakeReadOnly($(this)))
return;var eid="id='"+$(this).attr('id')+"'"+" type='textarea'";var v=$(this).val();v=$('<div/>').text(v).html().replace(/\n/g,"<br>");var link=v;if(!window.isPrintMode){var link=LF.utils.GenerateLink(v);}
var new1=$("<div class='ro' style = 'word-wrap: break-word'  "+eid+" >"+link+"</div>");setWidthPrintItem($(this)[0].className.split(/\s+/),new1);$(this).replaceWith(new1);});$("input[name^=Field][type='checkbox'],[type='radio']").each(function(){if(!shouldMakeReadOnly($(this)))
return;$(this).attr('disabled','disabled');});$("select").each(function(){if(!shouldMakeReadOnly($(this)))
return;var t=$(this).find("option:selected").text();if(window.isPrintMode){$(this).parent().width($(this).parent().innerWidth());}
$(this).parent().css("word-wrap","break-word");var eid="id='"+$(this).attr('id')+"'"+" type='select'";var new1=$("<div class='ro' "+eid+" >"+t+"</div>");setWidthPrintItem($(this)[0].className.split(/\s+/),new1);$(this).replaceWith(new1);});if($("input[name=IsLocked]").val()=="True")
{$(".ui-datepicker-trigger, .form-del-field, .form-add-field").remove();$('.form-dup-field, .form-del-field').addClass('disabled');}
function setWidthPrintItem(classes,newItem){$.each(classes,function(index,item){if(item==='cf-xlarge'||item==='cf-large'||item==='cf-medium'||item==='cf-small'){newItem.addClass(item);return false;}});};function shouldMakeReadOnly(ele){return($("input[name=IsLocked]").val()=="True"&&!LF.isLessThenIE8);};}});
 

0 0
replied on February 24, 2017

Hey @████████

I'm trying to implement your solution.  I don't need the part about saving it to the repository, just the part to display the uploaded image inside the form.

The code you have posted appears only to run on form load, not after a document has been uploaded.  How does that work into your process?  Because I was hoping to have it display the image immediately after upload, and then on any subsequent views of the form in other user tasks.

Thanks!

0 0
replied on February 24, 2017

Hi Matt

In our process, the files are only displayed once the form is submitted as in our case it was about creating a file in the repository with the images embedded.

I do believe the photos would be displayed on subsequent User Tasks in your process, I would need to look at that further.

0 0
replied on February 24, 2017

It probably will be, I hadn't tested that far.

Thanks for the quick reply!

0 0
replied on February 24, 2017

Yes, the file thumbnails are displayed in subsequent user tasks.  I have implemented this into an expense report approval process so that the person approving the expenses does not have to click individually on each receipt. 

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

Sign in to reply to this post.