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

Question

Question

Paste an image into a custom html, and then save it to the repository

Forms
Updated February 23, 2024
asked on February 22, 2024

I have a form where a student's schedule needs to be stored with the form.  I don't currently have access to that data where I can look it up and retrieve it to a table on the form.  But I can provide the user a link to look up a student's schedule and then snip it.  

From there I could take  the additional steps of having the user open something like Paint, paste in the screen snip, crop it, save it, then upload it to the form where they can see a preview of it.  Or, thanks to my friend, chatgpt, now I have the jquery code to be able to paste it into a custom html field and cut out steps and screw-up factor.

Here's what that looks like on the most basic of test forms...

 

And the code behind it looks like this...

$(document).ready(function() {
    // Add paste event listener to the document
    $(document).on('paste', function(event) {
        var items = (event.clipboardData || event.originalEvent.clipboardData).items;
        
        // Loop through clipboard items
        for (var i = 0; i < items.length; i++) {
            if (items[i].type.indexOf("image") !== -1) {
                var blob = items[i].getAsFile();

                // Read the image blob as Data URL
                var reader = new FileReader();
                reader.onload = function(event) {
                    var imageData = event.target.result;
                    
                    // Append the image to the container
                    $('#imageContainer').html('<img src="' + imageData + '" alt="Pasted Image">');
                };
                reader.readAsDataURL(blob);

                break; // Stop loop after finding an image
            }
        }
    });
});

 

It seems to work well.  Feel free to copy it.  Create a custom html field and paste this in the javascript.  Then, copy an image and paste it into the custom html.  It should pop right up. 

 

Now for the big question...how do I get it to save?

0 0

Replies

replied on February 23, 2024 • Show version history

Hi Jamie, 

You can do the following to make it printed, I managed to work on Forms 11U5.

1. Add a multi-line field, and assign the imageData to this field.

$(document).ready(function() {
    // Add paste event listener to the document
    $(document).on('paste', function(event) {
        var items = (event.clipboardData || event.originalEvent.clipboardData).items;
        
        // Loop through clipboard items
        for (var i = 0; i < items.length; i++) {
            if (items[i].type.indexOf("image") !== -1) {
                var blob = items[i].getAsFile();

                // Read the image blob as Data URL
                var reader = new FileReader();
                reader.onload = function(event) {
                    var imageData = event.target.result;
                    //use multiline field to store data
                    $('li[attr="Multi_line" ] textarea').val(imageData);
                    // Append the image to the container
                    $('#imageContainer').html('<img src="' + imageData + '" alt="Pasted Image">');
                };
                reader.readAsDataURL(blob);

                break; // Stop loop after finding an image
            }
        }
    });
});

2. Create another form with a html field. Set the src to the multi-line field. Use this form in your save to repository task, the custom html should be

the image
<div id="imageContainer">
<img src="{/dataset/Multi_line}">
</div>

Here are the screenshots when submit and how it look like in repository.

 

2 0
replied on February 23, 2024

Thanks for such a speedy and helpful reply!

 

I have taken the steps you outlined but have not seen the results you have seen.  The multi-line field on the first form populates with the data from imageData. 

But on the second form when I assign it to the second custom html field it does not render a picture.

When I inspect the element the src shows as "signed"

 

Any idea what I've left out?

0 0
replied on February 23, 2024 • Show version history

I was able to make it work, but came at it from a slightly different tack.  By taking your suggestion of writing the value of the src to the multi-line field, then using the few lines of code below to see if this was the submitted form, I used javascript to grab it from the text instead of the val.  Then updated the src of the html element.  It worked great.  An added benefit was I was able to do it all on one form instead of needing a second.

  var y = $("#Field7").text();
  if (y != ''){
    $('#imageContainer').html('<img src="' + y +  '" alt="Pasted Image">');
  }

 

Thanks for your help!

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

Sign in to reply to this post.

Details
Related Posts
Loading ...