@SanfordWhiteman As refering you previous discussion blog HOWTO: Attach images to a Forms 2.0 form post, i tried to build this functionality in my marketo form 2.0.
Also created a custom field type Url Called "Image upload" and use this field in my form to upload the image. As per mentioned javascript in the your post blog, i just use this code over the marketo landing page and page gets distored and multiple form shown over the landing page.
Landing page url -http://na-abm.marketo.com/lp/980-EGK-205/ProfileimagetestWebinarPrograms--_02.DLS-NEW-2019-LP-Templa...
Please see the screenhot for the same.
Can you Please guide me where i am doing mistake to make it feasible.
Code Paste over the landing page
<script src="//app-abm.marketo.com/js/forms2/js/forms2.min.js"></script>
<form id="mktoForm_1131"></form>
<script>MktoForms2.loadForm("//app-abm.marketo.com", "980-EGK-205", 1131,
function(form)
{
var fieldToPopulate = 'imageUpload'; // the Forms 2.0 field name that will hold the image data
var MAX_WIDTH = 200, MAX_HEIGHT = 200, formValues = {};
// dynamically add a file input; Forms 2.0 won't know about it directly but we'll use it to push image data into the form
var profileImageFile = document.createElement('INPUT');
profileImageFile.id = 'profileImageFile';
profileImageFile.type = 'file';
var existingProfileField = document.getElementById(fieldToPopulate);
existingProfileField.parentNode.insertBefore( profileImageFile, existingProfileField);
// chain events: user selects image, draw image data on a dynamic CANVAS el to resize, then extract as Base64 and add to Marketo form
profileImageFile.addEventListener('change', function(changeEvent)
{
var reader = new FileReader();
reader.addEventListener('loadend',function(progressEvent)
{
var originalImg = new Image();
originalImg.addEventListener('load', function()
{
var canvas = document.createElement('canvas');
// resize to fit max dimensions
if ( originalImg.width > MAX_WIDTH && originalImg.width >= originalImg.height ) {
canvas.width = MAX_WIDTH, canvas.height = MAX_WIDTH * originalImg.height / originalImg.width;
} else if ( originalImg.height > MAX_HEIGHT ) {
canvas.height = MAX_HEIGHT, canvas.width = MAX_HEIGHT * originalImg.width / originalImg.height;
} else {
canvas.width = originalImg.width, canvas.height = originalImg.height;
}
// draw onto a purposely-sized canvas to reduce size
canvas.getContext('2d').drawImage(originalImg, 0,0, canvas.width, canvas.height);
// extract contents of canvas
var resizedImgData = canvas.toDataURL('image/jpeg');
// now write (string) data to Forms 2.0 field
formValues[fieldToPopulate] = resizedImgData;
form.setValues(formValues);
// display resized image for fun
var lastPreviewImg = existingProfileField.parentNode.querySelector('.imagePreview');
!lastPreviewImg || existingProfileField.parentNode.removeChild( lastPreviewImg );
var newPreviewImg = new Image();
newPreviewImg.src=resizedImgData;
newPreviewImg.className = 'imagePreview';
existingProfileField.parentNode.insertBefore( newPreviewImg, existingProfileField );
});
originalImg.src=reader.result;
});
reader.readAsDataURL(changeEvent.target.files[0]);
});
});
</script>
.png)