Add Images to Marketo form

Level 1

Add Images to Marketo form

@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 -


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="//"></script>
<form id="mktoForm_1131"></form>
<script>MktoForms2.loadForm("//", "980-EGK-205", 1131,
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';
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();
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;

// display resized image for fun
var lastPreviewImg = existingProfileField.parentNode.querySelector('.imagePreview');
!lastPreviewImg || existingProfileField.parentNode.removeChild( lastPreviewImg );
var newPreviewImg = new Image();
newPreviewImg.className = 'imagePreview'; 
existingProfileField.parentNode.insertBefore( newPreviewImg, existingProfileField );


Level 10 - Community Moderator

Re: Add Images to Marketo form

I don't recommend this approach anymore. Please search the Community for "UploadCare" and you'll see pointers to a much more flexible mechanism.

Level 1

Re: Add Images to Marketo form

@SanfordWhiteman  Thanks for the guidlines. Sure i will go through Uploadcare coomunity blog to know more about it.



Rahul Kumar

rahul kumar