HOWTO: Attach images to a Forms 2.0 form post

Highlighted
Level 10 - Community Moderator

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:
  • 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
Highlighted
Level 8 - Champion Alumni

Re: HOWTO: Attach images to a Forms 2.0 form post

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 😉
Highlighted
Level 10 - Community Moderator

Re: HOWTO: Attach images to a Forms 2.0 form post

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!
Highlighted

Re: HOWTO: Attach images to a Forms 2.0 form post

Very nice solution, thanks for sharing. 
Highlighted

Re: HOWTO: Attach images to a Forms 2.0 form post

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

Highlighted
Level 10 - Community Moderator

Re: HOWTO: Attach images to a Forms 2.0 form post

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.

Highlighted
Anonymous
Not applicable

Re: HOWTO: Attach images to a Forms 2.0 form post

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

Highlighted
Anonymous
Not applicable

Re: HOWTO: Attach images to a Forms 2.0 form post

Amazing feature! Will it be possible to upload files such as pdf or docx some day?

Regards

Highlighted
Level 10 - Community Moderator

Re: HOWTO: Attach images to a Forms 2.0 form post

Amazing feature! Will it be possible to upload files such as pdf or docx some day?

Either one would work if they're small enough.  The irony (if you can call it that given the potential size of images in general) is that because of JPEG compression, outputting a compressed image with fixed dimensions is very likely to stay under the limit, whereas unless DOCX/PDF comes from a template with a set # of pages/fields it could get very huge, very quickly.

These days I am more likely to suggest Uploadcare as discussed and demoed here: Re: File Upload Field

Highlighted
Anonymous
Not applicable

Re: HOWTO: Attach images to a Forms 2.0 form post

Hi Sanford,

I've been reading up on the form you created here MktoForms2 :: Uploadcare - I just wanted to confirm what is the field name of the hidden field you created in the JS and what other actions did you do on the marketo database side to populate the URL into the hidden field?

I've tried recreating the the form you created (same HTML and JS just switched over to the form reference to what my own form as well as using my uploadcare public key) I even named my string field RFPURL however it still does not populate a URL on marketo after submission.

Not sure what I'm doing wrong as my javascript skills are very beginner level.

Please let me know your thoughts, happy to provide more information if necessary

Thanks!

Rafael