This content originally appeared on DEV Community and was authored by Shin'ya Ueoka
The release of Node v16.15.0 and v17.5.0 brought in the Fetch API and FormData. Before that, the node-fetch and form-data packages were used to use browser-like APIs in Node.js. To migrate node-fetch/form-data packages to Node.js native APIs, some changes can be made by removing import statements of 3rd-party packages, but there are important considerations to keep in mind when using Node.js features such as file system. This article outlines about migrating from node-fetch/form-data packages to Node.js native APIs.
Overview of migration
import fs from 'node:fs';
-import FormData from 'form-data';
-import fetch from 'node-fetch';
-const file = fs.createReadStream('secret.txt');
+const file = await fs.openAsBlob('secret.txt', { type: 'text/plain' });
const form = new FormData();
-form.append('file', file);
+form.append('file', file, 'secret.txt');
const response = await fetch('https://example.com/upload', {
method: 'POST',
body: form,
});
Details
Incompatibility of types
The form-data package and Node.js FormData are not compatible and cannot be passed directly with the Fetch API. If you pass form-data to the native Fetch API, the request body will be the string [object FormData].
import FormData from 'form-data';
const form = new FormData();
await fetch('https://example.com/upload', {
method: 'POST',
body: form,
});
// [object FormData]
The form-data package accepts fs.ReadStream in Node.js. The native API accepts a browser-compatible Blob. To create a Blob from a file, we can sue fs.openAsBlob(),added in Node.js v19.8.0. If you pass fs.ReadStream to the native API's FormData, the value will be [object Object].
import fs from 'node:fs';
const file = fs.createReadStream('secret.txt');
const form = new FormData();
form.append('file', file);
// Content-Disposition: form-data; name="file"
//
// [object Object]
Incompatibility of internal behavior
The form-data package obtains the file name from fs.ReadStream and uses it as the filename field (internal implementation). It also determines the file type from the file name and sets the Content-Type header (internal implementation).
Blob does not have a file name, it needs to be specified manually. The native API's FormData defaults to application/octet-stream if the Content-Type is not specified. We can specify the Content-Type explicitly from the argument of fs.openAsBlob().
const file = await fs.openAsBlob('secret.txt');
const form = new FormData();
form.append('file', file);
// Content-Disposition: form-data; name="file"; filename="blob"
// Content-Type: application/octet-stream
const file = await fs.openAsBlob('secret.txt', { type: 'text/plain' });
const form = new FormData();
form.append('file', file, 'secret.txt');
// Content-Disposition: form-data; name="file"; filename="secret.txt"
// Content-Type: text/plain
Conclusion
Fetch API and FormData have become Stability: 2 (Stable) from Node.js v21.0.0. fs.openAsBlob() is still Stability: 1 (Experimental) in the latest version of Node.js (v22.5.1 as of at July 27, 2024). We need to take care when running in old runtimes or using experimental APIs which has potential feature changes.
This content originally appeared on DEV Community and was authored by Shin'ya Ueoka
Shin'ya Ueoka | Sciencx (2024-07-27T12:31:04+00:00) Migrating node-fetch/form-data to Node.js native APIs. Retrieved from https://www.scien.cx/2024/07/27/migrating-node-fetch-form-data-to-node-js-native-apis/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.