Filestack Update: Use filestack-js in Node

This update brings many exciting improvements, including a new module for Node runtimes and full TypeScript support. After several requests from customers, you can now use filestack-js in your browser and/or your Node apps. The bottom line benefit of using filestack-js in Node is a universal library that uses the same API, client and server side, for uploads and transformations.

Module Overview

The package.json specifies two separate modules:

  • main for the CommonJS module (intended for Node runtimes)
  • browser for the pre-bundled ES module (intended for browser runtimes)

Node projects which depend on filestack-js will follow the main field in package.json. When building for the browser, newer tools (like Webpack, Rollup, and Parcel) follow the browser field, which will resolve to the pre-bundled ES module. Both modules follow the same API, but some methods behave differently based on their runtime. For example, client.upload treats the file argument as a file path in Node but in browsers it assumes a Blob object.

The pre-bundled browser module is also available in UMD format. This is useful if you are using script tags on a web page instead of bundling your application. It can be retrieved from both the Filestack CDN and the unpkg CDN:

Breaking Changes

Here is a list of Update 1.0.0’s breaking changes:

  • filestack.init now takes 2 arguments, apikey and optionsRead more.
  • No more default export. The ES module must be imported using qualified imports, such as import * as filestack from 'filestack-js'.
  • Custom source in the picker must now use customSourceName to configure the name of the source in the UI. This is no longer pulled from the Filestack application.
  • rejectOnCancel has been removed from the picker options.
  • hideWhenUploading has been renamed to hideModalWhenUploading, since it applies only when displayMode is 'overlay'
  • pickmakeDropPane, and cropFiles have been replaced by a unifying picker instance that exposes methods for controlling the picker lifecycle. Supporting this change are two new picker options, displayMode and container, which allow users to configure how their pickers are integrated into the document.

You can find our full changelog here, and please feel free to ask questions.

 

Read More →