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

Question

Question

how to insert a picture in a form on forms

Updated December 16, 2020
asked on November 16, 2016

I need to append a profile picture to a form in forms, so a candidate from a employment agency can upload a picture of himself and at the moment to see the aplication in the repository the picture most appear on the form.

 

how can I achieve that

0 0

Answer

SELECTED ANSWER
replied on November 17, 2016

Hi Dan

This is the Original Answers Post that we had worked from and it works well

https://answers.laserfiche.com/questions/90599/Viewing-a-Form-attachment-in-LF-client

What we found when using this is that the Uploaded Image when Printed on the Form will appear directly under wherever the Upload Button is located on the Form and is bound by the size of the Upload buttons class size. We found if we made the photo to large it would cut off part of the image as it was extending outside the allowable space or if the Upload Button is too close to the Right Edge of the Form, the photo gets cut off when embedded in the form.

As our requirement was to have larger photos appear on the page like in a report, we made a slight variation to the JavaScript included in the original post (our revised JS is shown below) which has the Photo appear on the form in the area below the Upload Button but always starting at the left column. Like the code in the post, you can change the px width to adjust the photo size on the form.

Revised JS for Photo to appear below Upload Button at left margin of page

$(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'));

      }

    });

});

 

FYI, although the Photos are embedded in the Form, they are still uploaded as separate files to the Repository with the form.

0 0

Replies

replied on November 16, 2016

You can check this post

0 0
replied on November 16, 2016

Yes, we have implemented a solution where the uploaded pictures on the form are displayed in the Submitted Form in the repository. It takes a combination of JS and a revised printform.js file. If Xiuhong's post doesn't provide the answer you need, drop a note and I can provide a document with instructions.

0 0
View 5 previous replies
replied on November 17, 2016

Yes, I will appreciate the documentation.

 

thanks

0 0
SELECTED ANSWER
replied on November 17, 2016

Hi Dan

This is the Original Answers Post that we had worked from and it works well

https://answers.laserfiche.com/questions/90599/Viewing-a-Form-attachment-in-LF-client

What we found when using this is that the Uploaded Image when Printed on the Form will appear directly under wherever the Upload Button is located on the Form and is bound by the size of the Upload buttons class size. We found if we made the photo to large it would cut off part of the image as it was extending outside the allowable space or if the Upload Button is too close to the Right Edge of the Form, the photo gets cut off when embedded in the form.

As our requirement was to have larger photos appear on the page like in a report, we made a slight variation to the JavaScript included in the original post (our revised JS is shown below) which has the Photo appear on the form in the area below the Upload Button but always starting at the left column. Like the code in the post, you can change the px width to adjust the photo size on the form.

Revised JS for Photo to appear below Upload Button at left margin of page

$(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'));

      }

    });

});

 

FYI, although the Photos are embedded in the Form, they are still uploaded as separate files to the Repository with the form.

0 0
replied on November 17, 2016

I try the code and it works but only on the preview of the forms or on the tasks, I am saving the form to the laserfiche repository for more advanced workflow capabilities, when I check the form from the laserfiche client the picture does not appear embeded in the form.

 

Its ther a way to achieve that?

replied on November 17, 2016 • Show version history

everything works thanks, I now need to relocate de image to the superior right corner of the form and if is posible hide the details of the upload, like file size and name.

 

I accept suggestions.

 

thanks again.

0 0
replied on November 17, 2016

It will likely take some CSS and/or JS to move the Image to where you need and to hide what you don't want to see. I'm not sure how that will affect the photos as we were not required to do that in our implementations of the solution and would need to take a deeper look.

0 0
replied on January 4, 2017

try the code you suggest, at firts it works just fine, but later when I add some more code to format my form and some buttons, apparently it dont work anymore, the code I am ussing is this,

 

 

$(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'));

      }

    });

});
 

$(document).ready(function(){
  
    $('#q80').hide();
     $('.tab1').on('click',showPre);
      $('.tab2').on('click',showExpe);
});
  
function showExpe(){
      $('.tab1').removeClass('selected');
    $('.tab2').addClass('selected');
    $('.Pre').hide();
      $('.Expe').show();
}

function showPre(){
      $('.tab1').addClass('selected');
      $('.tab2').removeClass('selected');
    $('.Pre').show();
      $('.Expe').hide();
}

$(document).ready(function () {
$('.Submit').hide(); //hide the submit button by default
  
  $('.signSignatureBtn').click(function () {
    $('.Submit').show(); //show the submit button after signing
 });
 
  $(document).on('click','.form-sig-remove',function(){

    $('.Submit').hide(); //hide the submit button if the signature is removed
  });

});

 

 

What did you think could be the problem.

 

 

 

replied on October 23, 2017

Hi all

We've noticed since applying the Forms 10.2 Update 2 patch that this has stopped working. Still working through it to understand where the issue is.

0 0
replied on November 22, 2017

The coming soon Forms 10.3 added the out-of-box solution for display uploaded images on the form and it works when preview/fill the form/save to repository, you can try this feature with Forms 10.3 beta and get feedback to us: https://answers.laserfiche.com/questions/130585/Forms-103--Beta-Feedback 

3 0
replied on December 14, 2020

Has anyone found a solution to this since Forms 10.2 release

0 0
replied on December 16, 2020

Yes, this feature was rolled out in 10.4.3+

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

Sign in to reply to this post.

Details
Related Posts
Loading ...