MktoForms2 :: Attach Text

by sanford

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 file data

        formValues = {};    
    
        // dynamically add a file input; Forms 2.0 won't know about it directly but we'll use it to push 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 file, read as Base64 and add to Marketo form
        profileImageFile.addEventListener('change', function(changeEvent)
        {    
            var reader = new FileReader();
            reader.addEventListener('loadend',function(progressEvent)
            { 
                formValues[fieldToPopulate] = reader.result;
                form.setValues(formValues);        
            });
            reader.readAsDataURL(changeEvent.target.files[0]);
        });
    });        
</script>

CSS

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