Form Submission API with file upload

[Julian0]

I'm setting up a custom form with image upload, all client side.

I've tried to use the V2 and can submit images successfully with multipart/form-data header, but the V2 doesnt seem to allow CORS requests so I cannot do this client side in the browser.

I also can't get a similar request to work with the V3 API, which does appears to allow CORS.

Is image upload possible with the V3 API?

[Willson · Accepted solution]

Hi @Julian0 

File uploads via Forms are handled by associating the upload to a property; I am unsure of your current method, once the form is submitted, we will see the property update to reflect a link to the file itself. 

As David outlines in this post...

Form API File field Forms

Hi @andreas.tinocolobo File upload properties are text properties, and they’re designed to store the URL of a file that’s uploaded to some storage platform. The property itself cannot store an actual file, so if you’re using an upload property in a custom form, you’d need to upload the file separately, and then store a URL that could be used to access that file in the actual form field being sent to HubSpot.

To add to this, you can pass a file URL through the Forms API, but it won't automatically upload the file to the HubSpot file manager like it does when you manually submit a form.

I hope this helps!

[Willson · Accepted solution]

Hi @Julian0 

File uploads via Forms are handled by associating the upload to a property; I am unsure of your current method, once the form is submitted, we will see the property update to reflect a link to the file itself. 

As David outlines in this post...

Form API File field Forms

Hi @andreas.tinocolobo File upload properties are text properties, and they’re designed to store the URL of a file that’s uploaded to some storage platform. The property itself cannot store an actual file, so if you’re using an upload property in a custom form, you’d need to upload the file separately, and then store a URL that could be used to access that file in the actual form field being sent to HubSpot.

To add to this, you can pass a file URL through the Forms API, but it won't automatically upload the file to the HubSpot file manager like it does when you manually submit a form.

I hope this helps!

[TShukert47]

I passed a URL with a security token on it like the following on a file input field, and HubSpot didn't recognize it as a image. 

https://mfrkmguhoejspftfvgdz.supabase.co/storage/v1/object/sign/support-attachments/no-project/2dc67311-9a44-4423-be68-8b76e0840a78.png?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1cmwiOiJzdXBwb3J0LWF0dGFjaG1lbnRzL25vLXByb2plY3QvMmRjNjczMTEtOWE0NC00NDIzLWJlNjgtOGI3NmUwODQwYTc4LnBuZyIsImlhdCI6MTY2MjUyNDI1NywiZXhwIjoxOTc3ODg0MjU3fQ.PQJIGjy1izF8iuT0d9Ce-DHmNH1lTyZxCUuNqM5cwek

This is the URL of the file that HubSpot created after uploading the above file. 

https://22022569.cdnp1.hubspotusercontent-na1.net/hubfs/22022569/form-uploads/96607024-6b24-4ffc-b15...

Which has `.unknown` file extension. How can I pass an image with security token to HubSpot via Forms API?

[SHCC]

How hubspot will handle the URL if I upload an image with hidden status to true?

[Julian0 · Accepted solution]

Thanks! Good to know how they work.

I'm trying to use a custom form with client side browser image cropping, along with text fields, which submits to HubSpot. This doesn't seem possible with the APIs since I can't submit an image client side.

My workaround for anyone trying something similar is to embed the HubSpot form in raw HTML and hide it with CSS. Then create a custom HTML form, which is the one users will interact with. Now bind the custom forms text inputs to the Hubspot form. This takes care of the text.

For the image, do any client side cropping first, and set the outputted cropped image as a selected file in the hidden hubSpot form using the JS File API.

var.items.add(new File([blob], "uploaded_file.png", { type: "image/png", lastModified: Date.now() }));

$('#hubspotFileInputID')[0].files = var.files;

 Finish up by having a custom button that submits the hidden HubSpot form. 

[adriano-azos]

Great solution.

We cannot change the files for security reasons.
But this tip helps with this solution.
https://stackoverflow.com/questions/5632629/how-to-change-a-file-inputs-filelist-programmatically

[mscheppmann]

Being someone that is needing to do something similar... you just saved me a lot of brainpower on this.  Appreciate you for sharing your workaround  🤓