Upload file to a REST API using fetch in native NodeJS

Question

I'm trying to use the native fetch() API in NodeJS to upload a file to a REST API. So far, I've made other GET and POST requests successfully, but this file upload is causing me a lot of trouble.

I have the following function -

async function uploadDocumentToHub(hub_entity_id, document_path) {
  let formData = new FormData();
  formData.append("type", "Document");
  formData.append("name", "ap_test_document.pdf");
  formData.append("file", fs.createReadStream("ap_test_document.pdf"));
  formData.append("entity_object_id", hub_entity_id);

  const form_headers = {
    Authorization: auth_code,
    ...formData.getHeaders(),
  };

  console.log(
    `Uploading document ap_test_document.pdf to hub (${hub_entity_id}) `
  );
  console.log(formData);

  let raw_response = await fetch(urls.attachments, {
    method: "POST",
    headers: form_headers,
    body: formData,
  });
  
  console.log(raw_response);
}

which I then run with the following code -

async function async_main() {
  ......
.......
  await uploadDocumentToHub(hub_entity_id, document_path);
}

// main();
async_main();

And I keep getting the following error -

node:internal/deps/undici/undici:5536
          p.reject(Object.assign(new TypeError("fetch failed"), { cause: response.error }));
                                 ^

TypeError: fetch failed
    at Object.processResponse (node:internal/deps/undici/undici:5536:34)
    at node:internal/deps/undici/undici:5858:42
    at node:internal/process/task_queues:140:7
    at AsyncResource.runInAsyncScope (node:async_hooks:202:9)
    at AsyncResource.runMicrotask (node:internal/process/task_queues:137:8)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  cause: TypeError: object2 is not iterable
      at action (node:internal/deps/undici/undici:1660:39)
      at action.next (<anonymous>)
      at Object.pull (node:internal/deps/undici/undici:1708:52)
      at ensureIsPromise (node:internal/webstreams/util:172:19)
      at readableStreamDefaultControllerCallPullIfNeeded (node:internal/webstreams/readablestream:1884:5)
      at node:internal/webstreams/readablestream:1974:7
      at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
}

I'm baffled about what's going on and what this error is about. Any ideas? The following code correctly uploads the file (auto-generated from postman, some data <removed> for security) -

var axios = require('axios');
var FormData = require('form-data');
var fs = require('fs');
var data = new FormData();
data.append('type', 'Document');
data.append('name', 'ap_test_document.pdf');
data.append('file', fs.createReadStream('kX3bdHb1G/ap_test_document.pdf'));
data.append('entity_object_id', '<id>');

var config = {
  method: 'post',
  url: '<url>',
  headers: { 
    'Authorization': '<token>', 
    ...data.getHeaders()
  },
  data : data
};

axios(config)
.then(function (response) {
  console.log(JSON.stringify(response.data));
})
.catch(function (error) {
  console.log(error);
});

Some help would be much appreciated.

Thanks!

Answer 1

You can append a file to the Node 18 native Fetch by reading the file with fs.readFile and converting the contents to a Blob.

The following is some pseudo-code I whipped up in TypeScript (YMMV):

import fs from 'fs/promises';

async function createBlobFromFile(path: string): Promise<Blob> {
    const file = await fs.readFile(path);
    return new Blob([file]);
}

const path = '/path/to/file.txt';
const formData = new FormData();
formData.append('file', await createBlobFromFile(path), 'file.txt');

const response = await fetch('https://some.url', {
    method: 'POST',
    body: formData
});