HOWTO: Attach images to a Forms 2.0 form post

[SanfordWhiteman]

Hi Raf,

There's no other work done on the Marketo side, but you need to have the corresponding custom (string) field in Marketo of course.

You'd have to point me to your URL for me to troubleshoot further.

[Anonymous]

Hi Sanford,

Edit fiddle - JSFiddle

Please let me know your thoughts

Raf

[SanfordWhiteman]

JavaScript is case-sensitive.

You have a hidden field that's been added to the form in Form Editor: rfpURL.

Then you're adding another field via the JS addHiddenFields method: RFPURL.

The latter field gets bound to the UploadCare widget, but there's no field of that name in your Marketo instance.

I would remove the hidden field from Form Editor. Then change the RFPURL to rfpURL:

form.addHiddenFields({ 
  rfpURL: '' 
});

[Anonymous]

It works now, Thank you Sanford! Appreciate the assistance.

Raf

[Carrie_Thomas1]

Can you upload other file types such as a word doc? 

[SanfordWhiteman]

Sure, UploadCare supports all binary file types.

[Hana_AlBarazi]

Hi Sanford Whiteman, this is really cool! Thanks for sharing. I am running into some major confusion as to how I can render the URI into an image, though. When I copy and paste into another tab in my Chrome browser, it doesn't load appropriately. Perhaps I'm too new to these things to understand the alternate ways I can access the data that you described, and I'm wondering if you can you point me to a resource that gives a basic explanation of how to access it in those ways, step by step?

Thanks for your help!

[SanfordWhiteman]

You'll have to tell me more (a lot more!) about how you're trying to use the URI.

Here's a field I just created on a lead using that form and embedded like so, directly into this Community post:

<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/2wBDAQMDAwQDBAgEBAgQCwkLEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBD/wAARCAAYABgDAREAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD86fgz8D/HXx617VfC/wAPIbK41XStIl1j7Nc3IgNzHHLFEY42YbPMLTLjeyrgHLDgEA5rxh4J8X/D7XZvDPjfw3qOh6pb8va31u0TlckB1yPmQ4OHXKnqCRQBi0AfZH/BLD/k4PxB/wBibd/+l1lQB9+/tC/8M+/8ILJ/w0V/wj39gfP5P9qf67zNvzfZdn7/AM3bn/UfPjOKAPxv+MP/AAqL/hOr3/hSP/CQ/wDCL/8ALH+3PL87zNzbvL2c+Vjbs3/Pj73NAFr4M/HDx38Bde1XxR8PJrK31XVdJl0f7Tc2wnNtHJLFKZI1Y7PMDQrjerLgnKnggA5rxh428XfEHXZvE3jfxJqOuapccPdX1w0rhckhFyflQZOFXCjoABQBi0Af/9k=" />

[Hana_AlBarazi]

Hi Sanford - thanks for the quick response. I'm trying to set up a form on a Marketo landing page where people can upload a headshot that we will place on our website. I'm just having trouble accessing the actual image after successfully uploading it using the script you provided. The field is being loaded correctly (I think) with the URI (pasted below), but when I paste it into my Chrome and Safari browsers, I get an error message, "The webpage at, [URI LINK] might be temporarily down or it may have moved permanently to a new web address. ERR_INVALID_URL".

1. <img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/2wBDAQMDAwQDBAgEBAgQCwkLEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBD/wAARCADIAMgDASIAAhEBAxEB/8QAHQAAAAcBAQEAAAAAAAAAAAAAAAMEBQYHCAIBCf/EAEIQAAEDAwIEBAMGBAQFAwUAAAECAwQABREGIQcSMUETUWGBIjJxCBRCkaGxFWLB8CNy0eEWJDNSomOC8SU0Q5Ky/8QAGwEAAgMBAQEAAAAAAAAAAAAAAwUCBAYBAAf/xAAzEQABBAEDAwIEBQIHAAAAAAABAAIDEQQFEiETMUFRYQYicYEUMjORsSNCFTRScqHB4f/aAAwDAQACEQMRAD8ANQ3t0o5KcY2r0Jo5tvG5raALN914honejwjFepTyjPTFddsYrqkBa8CBneuu+EivQgk712EgV5T2gLgJPrXQRtXQP0pp1PqWBpa0PXa4H4WxhCO7i+yRUXyNiaXuPARGMMjg1vcpycfjxUeNIeS0gdVKOBSZnUumnkuhN/gHkWDy+MkkHOMY89+lZO17xLuWrpqnLjcFR4oVytx21EDrtmo5ab0+/JCOiWW1uuOJ7J23UenUUkfq7nOqNvCdDRdrQXv59AtdyuMGibOX0z0POkKUlKEo3UnOMg/nUZXx/wBFuuFEaDPbPksJP9RWZLnrebcJqo7TBKFFQS5zcoCR6n2/Omt+RPcdJQyxLSk9UKST7HB/WqJ1HJBsFXRpeLt5u1ruBxm0pNUlLjE1gK/FyBY8twk59sVMbbdrbd2BItc1qS2e6FZI9COoPoaxXbrm6rlSH3ITwG3iZSFAdwfL6HNSjT2tL3YphnNvOpdj/PyHlV18xsRnqFentYh1eVv6gsIEujRuH9M0tcu48VQ2wNtvSucbdahnD/iHC1fES0842mUgYUR8OT5EfhVjt37VNAFA9tqewTsyG7mFIJ8d8Dtrwi1Jz1otTfpShWMZrwpz1GKMq9JGpvHbNEqTS1SM7iiHEEZ2rhC52SNaBRKk+dLFJ3xRS0YqJFr3dIlt53pK80PKnBScZohxGRQiFFMkpkcpOKFLZDexoVFeUpbQAKPSnbJGK5SOXqOtGAEncVaRA1AAk12lIA32r3YDNDpXlNe/SvOtAHPQUYy2pawCM79vOu9uSuot0sxozkuQ4EtMoK1q8gKyxxu4lC+XBcdtwpYZTysNBWAkeZPmev8AoMVdPGrU5tFtVYoiySr/AKpBOVKwdgO4Gax7qRpFylrQy7ykrJy6ncE9T1/eszqWb1XbG9gtBpuJ0x1Hdym4akX955DI5k53Qg+vp/vU+020xIZDYbyzMODtnYJOBv8AU7f2GbQPCCdquYllrKgo/OgfL7GtSaK+zXMjRWlPcnKjBwd87f70r6ld08ige/mlmS7256NJU1AjguSFBOSnZKe5PoMdBjpnvTLLnFmR4CVoLaO7iQTjuo7YH0H61rrUH2fZcJas2/xAvIStIzgHbfHSu7F9kO3XFgSbmkjnThQUMY/v+tQMgRRiOJ4WVLVcrc8pLSJTZUcHCkYzv59R+dTaPbzKiiVGaUVIbAcbIyUjGNsbKGOvfGe9Svil9k+7aUWu8aVDkqK3lTjadlAentUE0Rf3LTczbLqtJa/6RUvIWyScELHUpOeuetdY4FRkifF+YJ2sDEyxzhPtb7iSysEhOVcoPTYdU75x+VaX0FqRjWVsU2SlFyjDK2ubPOnsQe4ONj6EHcGqtYsf3iMbtEbw9Gd8KQ3zhQII5gM9z1IPfc9eiuJJmaQfiatsRH3RKv8AEIJT4Ks9FduUnAV2GxHQZt4078Z4c1LczGZks91b7jZT8wrg5" /> 

I also tried to embed the photo below, but this is the icon I get, in the place of where the photo should be.

Also, here's my fiddle.

So perhaps it's my limited knowledge of what I'm actually doing that is preventing me from understanding what the problem is, but I thought I followed your instructions pretty closely.

Thanks for the guidance, it is much appreciated.

[SanfordWhiteman]

If I paste that entire src (everything inside the quotes) in my browser(s) I see a 200x200 white JPEG, which I assume is what you uploaded.

There must be something else you're doing -- that is a valid data: url.