Thanks Matthew, our JavaScript guru did try and find a plugin to use where it would allow the user to copy and paste into an upload field but had no luck.

Yeah, they would have to save their screenshot and then upload it.  I encourage our staff to do similar with the built-in Snipping Tool in Windows.

If you want to use the custom field you've made, you'll need to get creative determining a way to save the values - and it's going to take a bit of Javascript.

One possible way to make this would would be having the contents of your custom HTML field copied into a hidden field, and then copied back into your custom field when the form is loaded during later tasks.  I haven't done this myself, so I can't specifically address how this will play out - but I do have a somewhere similar example that we use - we use signature pads and the signature image is saved in a hidden multi-line field, and then we have Javascript that converts that encoded image back into a visiable image and adds it to the form for display.  Since I don't know how your custom HTML field is storing the data for the attached image, I can't guess whether this method would work or not.

If you wanted to try to play around with that, here's an example that may help (without the specific part about using signature pads).  This takes the stored signature image from the user profile and displays it on the form.

Add 4 fields to your form:

• single-line - name: user_name - class name: username
• single-line - name: user_id - class name: userid1
• multi-line - name: sig_data - class name: sigdata1
• custom html - class name: sigimage1 - html: 

  <b>User Profile Signature<br></b><div id="oldsigimage1"></div> <div id="mm100" style="left: 0px; top: 0px; width: 100mm; height: 100mm; position: absolute; z-index: -1;"></div>
  

Add these lookups on those four fields from your LFForms database:

Add this Javascript: 

$(document).ready(function () {

  //this section deals with applying the 1st signature image from a prior task in the process
  var activeSigValue1 = $('.sigdata1 textarea').val();
  var archiveSigValue1 = $('.sigdata1 .cf-field').text();
  if (activeSigValue1 != undefined && activeSigValue1 != '')
  {
    var decoded = HtmlDecode(activeSigValue1);
    var $img1 = $('<img style="background-color:white;" class=imported1></img>');
    $img1.attr("src", decoded).appendTo('#sigimage1');
  }
  //this section deals with applying the 1st signature image on the submitted form
  else if (activeSigValue1 == undefined && archiveSigValue1 != '')
  {
    var decoded = HtmlDecode(archiveSigValue1);
    var $img1 = $('<img style="background-color:white;" class=imported1></img>');
    $img1.attr("src", decoded).appendTo('#sigimage1');
  }

}); //end of $(document).ready(function () {

//function used for encoding the image to URI data
function HtmlEncode(value)
{
  return $('<div/>').text(value).html();
}

//function used for decoding the URI data to an image
function HtmlDecode(value)
{
  return $('<div/>').html(value).text();
}

//This section deals with applying the 1st signature image from the loaded date
$(document).on("lookupcomplete", function (event) {
  var activeSigValue1 = $('.sigdata1 textarea').val();
  console.log('test: ' + activeSigValue1);
  if (activeSigValue1 != undefined && activeSigValue1 != '')
  {
    if ($(".imported1").length)
    {
      //clear the existing signature image on the screen
      $(".imported1").remove();
    }
    var decoded = HtmlDecode(activeSigValue1);
    var $img1 = $('<img style="background-color:white;" class=imported1></img>');
    $img1.attr("src", decoded).appendTo('#sigimage1');
  }
});

End result is a form that pulls in the image data from the database (it could be any image - but I know this one works from the signature, so it was a good place to start) and displays it on the form: