How to set a file field via the forms API

[calicoderco]

Thanks to some help on this community I was able to get my regular form fields to set through the v3 API. I'm wondering, though, for one field which is a file field (credit_report), how do I set that? I need to accept a credit report PDF. I'm a lending company doing sales through hubspot and I need to accept a PDF from people whoa re signing up. Do I post the entire file binary data in the request body? Like this..?

{
"fields": [
{"name": "email", "value": "bj@gmail.com"},
{"name": "firstname", "value": "Bob"},
{"name": "lastname", "value": "James"},
{"name": "phone", "value": "445233311"},
{"name": "address", "value": "My address"},
{"name": "state", "value": "Delaware"},
{"name": "city", "value": "Warm Springs"},
{"name": "country", "value": "USA"},
{"name": "dob", "value": "02261986"},
{"name": "company", "value": "MyCompany"},
{"name": "credit_report", "value": ""}
],
"legalConsentOptions": {
"legitimateInterest": {
"value": true,
"subscriptionTypeId": 999,
"legalBasis": "CUSTOMER",
"text": "Legitimate interest consent text"
}
}
}

I have noticed that if I fill out the form through Hubspot's provided form link, the resulting contact in hubspot shows the credit report as a link to a file which has a url like this: https://cdn2.hubspot.net/hubfs//form-uploads/. That's exactly what I want, except I want it to happen when I fill out the form via the forms API from my Javascript client code. Good news is all the other fields work, I just don't know how to do the file field.

Do I need to use a separate API for this? Such as the Files API. https://developers.hubspot.com/docs/methods/files/post_files...I see that there are different APIs that might be relevant but I don't know how to connect them together..like how will the uploaded file get referenced in the contact data set by the forms API?

[cbarley]

Hi @calicoderco, 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. A call to the Files API could work, but it'd need to be done server side as doing so client side would expose your API key.

[chrispower]

Using the  submit form v2 endpoint, you can just append a file object to the formData before submitting it, like this:

var file = new File( [signatureBlob], fileName, { type: 'image/jpg' } );
formData.append('signature', file);

This uploads the file and stores the url in the relevant property which looks like this:

https://api.hubspot.com/form-integrations/v1/uploaded-files/signed-url-redirect/00000000000?portalId...

We use this to capture a signature in a landing page, and store it in hubspot.

Unfortunately this doesn't work with the v3 endpoint as it only accepts application/json.  Would be great if we could just pass in a base64 encoded file as an form value, and have Hubspot handle it the same way the v2 endpoint does.

[matt_scott]

Thanks I was also adding a signature to a form and your method helped, though I needed to add a file name in the append or in my case set.

I was using the standard hubspot form in a module so I left the default form in and just stopped it from submitting and submitted using ajax instead:

window.addEventListener('message', event => {
	if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormReady') {
		//Form has been created
		var $form = $('.hs_signature').closest('form'); //SELECT YOUR FORM - I'M SELECTING FORMS WITH WITH THE SIGNATURE FIELD
		$('input[type="submit"]',$form).on('click',function(e){
			e.preventDefault();
			var formData = new FormData($form[0]);
			formData.set('signature', file, 'signature');

			//Submit data manually
			var portalID = $form.data('portal-id');
			var formID = $form.data('form-id');
			var url = 'https://forms.hubspot.com/uploads/form/v2/' + portalID + '/' + formID;
			$.ajax({
				url: url,
				data: formData,
				processData: false,
				contentType: false,
				type: 'POST',
				mode: 'no-cors'
			});
		});
	}
});

And I used the idea here for my e signature just use jquery to append the required fields and save it as a blob to a file instead of the Data URL https://codepen.io/dus7/pen/qGQbVP