MktoForms2 :: Attach Image

HTML

<script src="//app-sj01.marketo.com/js/forms2/js/forms2.min.js"></script>
<form id="mktoForm_169"></form>
<script>MktoForms2.loadForm("//app-sj01.marketo.com", "410-XOR-673", 169,
    function(form) 
    {    
        var fieldToPopulate = 'MarketoSocialLinkedInProfileURL'; // the Forms 2.0 field name that will hold the image data

        var MAX_WIDTH = 2000, MAX_HEIGHT = 2000, 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,...

CSS

#MarketoSocialLinkedInProfileURL {
    display:none;
}
#profileImageFile {
    position:absolute;
}
.imagePreview {
    float: right;
    margin-top: 32px;
}