Question
HOWTO: Attach images to a Forms 2.0 form post
Not a question, but an answer!
In a couple of Community threads I've remarked that -- despite conventional wisdom -- it is possible to attach images to Marketo forms (both LP-hosted and embedded) and save the image data in your Marketo database.
To prove I wasn't blowing smoke, here's a demo.
This form populates the built-in MarketoSocialLinkedInProfileURL field with an image of the lead's choosing; you can use any text field you want. In the demo, the file size is limited to 64K: since the image is exported as a maximum 200 x 200 low-quality JPEG, that'll do fine, but the larger you set the MAX_WIDTH and MAX_HEIGHT, the larger the file will naturally be.
At this point in time I would recommend this technique only for obviously small (in dimensions) images such as avatars, small headshots, or logos... though I suppose if you know people will be uploading 2-color scans, for example, you could go bigger, at your own risk. (If you've worked at all with web images, you know there is no hard-and-fast rule because I could make a "giant" 5000 x 5000 JPG that's only a couple K on disk -- the size on the wire depends on complexity and compressibility.)
I hope at least some of you are impressed so far! Here are the caveats/details:
In a couple of Community threads I've remarked that -- despite conventional wisdom -- it is possible to attach images to Marketo forms (both LP-hosted and embedded) and save the image data in your Marketo database.
To prove I wasn't blowing smoke, here's a demo.
This form populates the built-in MarketoSocialLinkedInProfileURL field with an image of the lead's choosing; you can use any text field you want. In the demo, the file size is limited to 64K: since the image is exported as a maximum 200 x 200 low-quality JPEG, that'll do fine, but the larger you set the MAX_WIDTH and MAX_HEIGHT, the larger the file will naturally be.
At this point in time I would recommend this technique only for obviously small (in dimensions) images such as avatars, small headshots, or logos... though I suppose if you know people will be uploading 2-color scans, for example, you could go bigger, at your own risk. (If you've worked at all with web images, you know there is no hard-and-fast rule because I could make a "giant" 5000 x 5000 JPG that's only a couple K on disk -- the size on the wire depends on complexity and compressibility.)
I hope at least some of you are impressed so far! Here are the caveats/details:
- Does not work in IE 8 or 9. I'm sympathetic to people who have to support old browsers -- we still expect and support IE 8 for our web app -- but sometimes you have to build something cool, no matter what. If you aren't comfortable pushing people to use IE 10+, Chrome, Safari, or Firefox, you will have to consider this technique a "progressive enhancement" and apply it appropriately (for example, let people use a default avatar if their browser doesn't support attaching an avatar to the form post). You could get it working in old IE using Silverlight, Flash, or Java... writing that code is up to you. :)
- The Marketo app will not display the image as an picture but rather as a URL -- technically, a data URI, which is just an agglomeration of bytes into something that looks like a URL -- which you need to copy-paste into another browser tab to view. (You could build a bookmarklet to render it into the page, most likely, but I'll leave that up to you.)
- Aside from the default Marketo UI, all other ways of reading data from Marketo, including the Forms APIs and the REST/SOAP APIs, and even SFDC, are capable of displaying the picture in your browser. You could, for example, create a VisualForce page that displays the image in SFDC, or read the field using REST and convert it to a standalone image to use anywhere you want.
- The technical implementation is all there in the JavaScript, so how awesome or horrifiying it is probably depends on your love of code.
- Hope you like it!