# Webhook API Integration not working with base64 encoded files

**URL:** <https://community.feathery.io/t/webhook-api-integration-not-working-with-base64-encoded-files/1012>\
**Category:** Support\
**Created:** [August 27, 2024, 8:30pm UTC](https://community.feathery.io/t/webhook-api-integration-not-working-with-base64-encoded-files/1012 "2024-08-27T20:30:29Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![dwohlfahrt](https://avatars.discourse-cdn.com/v4/letter/d/3e96dc/32.png) [@dwohlfahrt](https://community.feathery.io/u/dwohlfahrt)\
**Post date:** [August 27, 2024, 8:30pm UTC](https://community.feathery.io/t/webhook-api-integration-not-working-with-base64-encoded-files/1012/1 "2024-08-27T20:30:29Z")

</div>

Hi there, I have a javascript API integration to post form data to my backend webhook, including uploaded files. I’ve implemented the javascript to base64 encode the contents of the files when present and that part is working. The webhook also works, EXCEPT when there are files. It simply never comes through and there are no errors logged to the console or anything. Is there a max payload size that I’m exceeding or something? Code below:

```auto
// Javascript rule code
function readAsDataUri(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.addEventListener('loadend', (e) => {
      if (typeof reader.result === 'string') {
        resolve(reader.result);
      } else {
        reject(reader.error);
      }
    });
    reader.readAsDataURL(file);
  });
}

const API_URL = `https://<my_domain_here>/api/application/`;

let fields = {};

for (const [key, value] of Object.entries(feathery.fields)) {
  fields[key] = feathery.fields[key].value;
}

const urlParams = new URLSearchParams(window.location.search);
const formId = urlParams.get('_slug');

let uploads = fields.uploads;
let uploadsResolved = [];

console.log('uploads', uploads);

if (uploads && uploads.length) {
  console.log('uploads.length', uploads.length);
  uploads = await Promise.all(uploads);
  
  let contents = [];
  uploads.forEach(f => contents.push(readAsDataUri(f)) );
  contents = await Promise.all(contents);

  contents.forEach((val, idx) => {
    uploadsResolved.push({
      name: uploads[idx].name,
      size: uploads[idx].size,
      type: uploads[idx].type,
      contents: contents[idx]
    });
  })
}

fields.uploads = uploadsResolved;
console.log('fields.uploads', fields.uploads);

const payload = {
  formId: formId,
  fields: fields,
  userId: feathery.userId,
  stepProperties: feathery.getStepProperties(),
  completed: feathery.isLastStep(),
  isTestForm: feathery.isTestForm()
}

console.log('payload', payload);

feathery.http.post(API_URL, payload);

```

---

<div class="post-metadata">

**Author:** ![eri](https://avatars.discourse-cdn.com/v4/letter/e/8baadc/32.png) [@eri](https://community.feathery.io/u/eri)\
**Post date:** [August 28, 2024, 12:41am UTC](https://community.feathery.io/t/webhook-api-integration-not-working-with-base64-encoded-files/1012/2 "2024-08-28T00:41:34Z")

</div>

Hello. For API calls with files, a multipart/form-data request would work the best.

---

<div class="post-metadata">

**Author:** ![dwohlfahrt](https://avatars.discourse-cdn.com/v4/letter/d/3e96dc/32.png) [@dwohlfahrt](https://community.feathery.io/u/dwohlfahrt)\
**Post date:** [August 28, 2024, 2:51am UTC](https://community.feathery.io/t/webhook-api-integration-not-working-with-base64-encoded-files/1012/3 "2024-08-28T02:51:53Z")

</div>

Totally, that’s a fair point, but essentially what I’m wanting to know is if it’s possible to have feathery post the files to my endpoint using the `feathery.http` built-in. I’m including an auth header in my webhook to verify the sender, so I’m hoping there’s a way to do so server-side as to not leak this credential on the client. If you can provide a code example if this is possible that would be much appreciated. Thanks so much!

---

<div class="post-metadata">

**Author:** ![eri](https://avatars.discourse-cdn.com/v4/letter/e/8baadc/32.png) [@eri](https://community.feathery.io/u/eri)\
**Post date:** [August 28, 2024, 10:52pm UTC](https://community.feathery.io/t/webhook-api-integration-not-working-with-base64-encoded-files/1012/4 "2024-08-28T22:52:19Z")

</div>

Here’s some Feathery references on API calls:

> **[Connect to API Action | External Docs](https://docs.feathery.io/platform/build-forms/logic/advanced/visual-rule-builder/connect-to-api-action)**
>
> Send or receive data to/from any API without having to write code

> **[API Connectors in Code | External Docs](https://docs.feathery.io/platform/build-forms/logic/advanced/javascript-rule-builder/api-connectors-in-code)**