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