HOWTO: Attach images to a Forms 2.0 form post

SanfordWhiteman
Level 10 - Community Moderator
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:
  • 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!
Tags (1)
26 REPLIES 26
Anonymous
Not applicable

Interesting, I nice it seems this can turn in to different options

Jep_Castelein2
Level 10
Very nice solution, thanks for sharing. 
Neil_Robertson6
Level 5

Thanks Sandford - Great JS but only downside I can see is the size limit of a small 64k!

SanfordWhiteman
Level 10 - Community Moderator

You can actually split the files across multiple textareas to get more space (Base64 is easily splittable and joinable). But that can get unmanageable once you get past 3-4 fields, as you can imagine.  I've since found a third-party upload/storage provider that really Gets It (tm) about integrating with independent forms (not just Marketo) and I've been recommending them to my clients.  PM me and I'll tell you about them if you want.

SanfordWhiteman
Level 10 - Community Moderator
Was hoping you'd check it out, Justin.

The basic concept was to phrase the question like so: "Can Marketo store data that can be displayed as an image?" (As opposed to the more common question, "Can you upload an image with a form?")   Once phrased that way, it was easy to test that a text field can indeed hold a Base64-encoded data-URI of reasonable length.  Then what remained was to figure out how to get such data into a form post.  Since we run an image hosting service that part was somewhat easy. 🙂

Just hit me up here or offline with any questions!
Justin_Norris1
Level 10 - Champion Alumni
Thanks for this Sandy. That is pretty cool!

Now you're going to make me struggle with my shoddy JS knowledge as I poke through to see how you've done it 😉