# File upload using hubspot submit form api

**URL:** <https://community.hubspot.com/t/file-upload-using-hubspot-submit-form-api/88768>\
**Category:** APIs & Integrations\
**Tags:** forms\
**Created:** [September 1, 2023, 5:36am UTC](https://community.hubspot.com/t/file-upload-using-hubspot-submit-form-api/88768 "2023-09-01T05:36:34Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![ankurchauhan](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/ankurchauhan/32/192681_2.png) [@ankurchauhan](https://community.hubspot.com/u/ankurchauhan)\
**Post date:** [September 1, 2023, 5:36am UTC](https://community.hubspot.com/t/file-upload-using-hubspot-submit-form-api/88768/1 "2023-09-01T05:36:34Z")

</div>

Hellow There,

I have been trying to upload file in my custom html form and submit it to my hubspot form using submit form api.

“POST [https://api.hsforms.com/submissions/v3/integration/submit/:portalId/:formGuid](https://api.hsforms.com/submissions/v3/integration/submit/:portalId/:formGuid)”

I am creating an array of fields and an object for each field as per below. And then pushing the field object to the array.

let answers = [];

let nameObj = {};  
nameObj.name = “firstname”;  
nameObj.value = ‘Test112’;  
answers.push(nameObj);

However, I am not sure what object I should be creating for file upload in both cases when it is single file or multiple files.

Can someone please guide me in the right direction.

---

<div class="post-metadata">

**Author:** ![KNakamura2](https://avatars.discourse-cdn.com/v4/letter/k/bc79bd/32.png) [@KNakamura2](https://community.hubspot.com/u/KNakamura2)\
**Post date:** [February 21, 2024, 9:54pm UTC](https://community.hubspot.com/t/file-upload-using-hubspot-submit-form-api/88768/2 "2024-02-21T21:54:50Z")

</div>

Did you find a good solution for this? ie. do you have to manually upload first via this [https://legacydocs.hubspot.com/docs/methods/files/v3/upload\_new\_file,](https://legacydocs.hubspot.com/docs/methods/files/v3/upload_new_file,) then append the url to that field to the v3 forms api?

---

<div class="post-metadata">

**Author:** ![ankurchauhan](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/ankurchauhan/32/192681_2.png) [@ankurchauhan](https://community.hubspot.com/u/ankurchauhan)\
**Post date:** [February 22, 2024, 2:20am UTC](https://community.hubspot.com/t/file-upload-using-hubspot-submit-form-api/88768/3 "2024-02-22T02:20:44Z")

</div>

@KNakamura2

No. Unfortunately I didnt find any solution for this yet as my problem statement is uploading a file in custom HTML form directly from the user’s machine and pushing it to Hubspot. And as while client side upload, there is no backend to support the file\_option parameters. Hence it didnt work.

I used Email-JS service as a workaround for this to send the uploaded files in the email.

Are you also looking for solution for similar issue or do you have some solution for this?

---

<div class="post-metadata">

**Author:** ![KNakamura2](https://avatars.discourse-cdn.com/v4/letter/k/bc79bd/32.png) [@KNakamura2](https://community.hubspot.com/u/KNakamura2)\
**Post date:** [February 22, 2024, 7:21am UTC](https://community.hubspot.com/t/file-upload-using-hubspot-submit-form-api/88768/4 "2024-02-22T07:21:34Z")

</div>

okay got it to work, by:

1. adding an onchange handler on the file input field, that triggers a JS function to post the file contents of that field to the server
2. on the server we upload the file using file upload api (i think you can save this anywhere though like s3 bucket - you just need a url to actually send back to hubspot form api) - [https://legacydocs.hubspot.com/docs/methods/files/v3/upload\_new\_file](https://legacydocs.hubspot.com/docs/methods/files/v3/upload_new_file)
3. the response returns file meta data [https://legacydocs.hubspot.com/docs/methods/files/get\_files\_file\_id](https://legacydocs.hubspot.com/docs/methods/files/get_files_file_id) so we send back the url field to the JS function call in step 1
4. then we store the url value into a hidden field in the form
5. when the form is actually submitted we just send the url field (had to set it to public, but not indexible) via [https://legacydocs.hubspot.com/docs/methods/forms/submit\_form\_v3\_authentication](https://legacydocs.hubspot.com/docs/methods/forms/submit_form_v3_authentication) , so that the link in hubspot from the form submission works

our form is multi-step, so there’s no race condition to wait for the file upload to complete before actual form is submitted, thats why we’re able to trigger the upload just on file input fields change event.