\n\n\n**Table of Contents**\n\n\n- [What's in the box?](#whats-in-the-box)\n- [Installation](#installation)\n- [API Documentation](#api-documentation)\n- [Usage](#usage)\n - [Browsers](#browsers)\n - [ES module](#es-module)\n - [UMD module](#umd-module)\n - [SRI](#sri)\n - [Node](#node)\n - [CommonJS module](#commonjs-module)\n- [Module Overview](#module-overview)\n- [Releases Info](#releases-info)\n- [Live examples (JSFiddle)](#live-examples-jsfiddle)\n- [Picker Quick Start](#picker-quick-start)\n- [Polyfills](#polyfills)\n- [Development](#development)\n- [Debugging](#debugging)\n - [Node](#node-1)\n - [Browser](#browser)\n - [Error event](#error-event)\n- [Sentry Integration](#sentry-integration)\n- [Versioning](#versioning)\n- [Contributing](#contributing)\n\n\n## What's in the box?\n\n* A multi-part uploader powered on the backend by the [Filestack CIN](https://www.filestack.com/products/content-ingestion-network).\n* An interface to the [Filestack Processing Engine](https://www.filestack.com/docs/image-transformations) for transforming assets via URLs.\n* The Filestack Picker - an upload widget for the web that integrates over a dozen cloud providers and provides pre-upload image editing. \n\n\n## Installation\n\n```sh\nnpm install filestack-js\n```\n\nTo get your free API key, sign up for a Filestack account here:\n[https://dev.filestack.com/signup/free](https://dev.filestack.com/signup/free).\n\n## API Documentation\n\n[https://filestack.github.io/filestack-js/](https://filestack.github.io/filestack-js/)\n\n## Usage\n\n### Browsers\n\n#### ES module\n```js\nimport * as filestack from 'filestack-js';\nconst client = filestack.init('apikey');\n```\n\n#### UMD module\n```HTML\n\n\n```\n\nwhere ```{MAJOR_VERSION}``` is one of the MAJOR versions of the filestack-js ie: \n```HTML\n\n\n```\n\n\n#### SRI\nSubresource Integrity (SRI) is a security feature that enables browsers to verify that files they fetch (for example, from a CDN) are delivered without unexpected manipulation. It works by allowing you to provide a cryptographic hash that a fetched file must match\n\nTo obtain sri hashes for filestack-js library check manifest.json file on CDN:\n\n```\nhttps://static.filestackapi.com/filestack-js/{LIBRARY_VERSION}/manifest.json\n```\n\n```HTML\n\n```\n\nWhere ```{LIBRARY_VERSION}``` is currently used library version and ```{FILE_HASH}``` is one of the hashes from integrity field in manifest.json file\n\n\n### Node\n\n#### CommonJS module\n```js\nconst client = require('filestack-js').init('apikey');\n```\n\n\n## Module Overview \n\nThe `package.json` specifies two separate modules: \n\n* `main` for the CommonJS module (intended for Node runtimes)\n* `browser` for the pre-bundled ES module (intended for browser runtimes)\n\nNode 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.\n\nThe 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:\n\n* [Filestack CDN](https://static.filestackapi.com/filestack-js/3.x.x/filestack.min.js)\n* [unpkg](https://unpkg.com/filestack-js@3.x.x)\n\n## Releases Info\n\nMajor releases will bo listed (with detailed examples) in releases folder starting from version 3.0.0\n\n\n## Live examples (JSFiddle)\n\n[Upload image](https://jsfiddle.net/gh/get/library/pure/filestack/filestack-js/tree/master/examples/upload) \n[Multiupload](https://jsfiddle.net/gh/get/library/pure/filestack/filestack-js/tree/master/examples/multiupload) \n[Open picker](https://jsfiddle.net/gh/get/library/pure/filestack/filestack-js/tree/master/examples/picker) \n[Open picker in inline mode](https://jsfiddle.net/gh/get/library/pure/filestack/filestack-js/tree/master/examples/picker-inline) \n[Crop images](https://jsfiddle.net/gh/get/library/pure/filestack/filestack-js/tree/master/examples/crop) \n[Multiple drop panes](https://jsfiddle.net/gh/get/library/pure/filestack/filestack-js/tree/master/examples/multiple-drop-panes) \n[Preview](https://jsfiddle.net/gh/get/library/pure/filestack/filestack-js/tree/master/examples/preview) \n[Import using RequireJS](https://jsfiddle.net/gh/get/library/pure/filestack/filestack-js/tree/master/examples/requirejs) \n[Retrieve image data](https://jsfiddle.net/gh/get/library/pure/filestack/filestack-js/tree/master/examples/retrieve) \n[Transform image](https://jsfiddle.net/gh/get/library/pure/filestack/filestack-js/tree/master/examples/transform) \n[Custom Picker CSS](https://jsfiddle.net/gh/get/library/pure/filestack/filestack-js/tree/master/examples/customization) \n[Assign file to user](https://jsfiddle.net/gh/get/library/pure/filestack/filestack-js/tree/master/examples/assign-file-to-user) \n\nExamples can be run locally with: \n```\nnpm run examples\n```\n\n## Picker Quick Start\n\nIf you are here to use the picker widget, it can be initialized from the Filestack client by calling `client.picker(options)`. Options for the picker are [documented here](https://filestack.github.io/filestack-js/interfaces/pickeroptions.html).\n\nThe picker instance returned from `client.picker` can be controlled with a few methods:\n\n* open - Create the application and mount it into the DOM based on the `displayMode`.\n* close - Close the application and remove its resources from the DOM.\n* crop(files) - Create the application, mount it, and pre-select the passed files for cropping.\n* cancel - Cancel all uploads controlled by this instance.\n\nPlease see our examples above to learn more about customizing the picker for your use case.\n\n## Polyfills\n\nIf you target IE11 or iOS before 8.0 you will need to add additional polyfills to your page or application.\n(We are no longer support IE11 and older browser, so it can stop working on this browser)\n\nPolyfills we recommend:**\n\nModule (for bundling):\n* https://babeljs.io/docs/en/babel-polyfill\n\n\n## Development\n\nMost tests in this library are expected to interface with actual backend services. Because we like to run tests during development, these services are mocked during unit testing.\n\nAll tests are using Jest. \n\nTo run units:\n\n```\nnpm test\n```\n\n## Debugging\n\nFilestack-js uses [`debug`](https://github.com/visionmedia/debug), so just run with environmental variable `DEBUG` set to `fs.*`.\n\n### Node\n```js\nDEBUG=fs.* node example_upload.js\n```\n\n### Browser\nDebug's enable state is persisted by localStorage\n\n```js\nlocalStorage.debug = 'fs:*'\n```\n\nAnd then refresh the page.\n\n### Error event\nThe ```upload.error``` event was added to sdk. To obtain every upload request error just add callback to it. \nError contains details field with responseBody, responseHeaders, code (only when error type is FilestackErrorType.REQUEST)\n\n```js\n\n```\n\nUpload abort throws an `FilestackError` with type `FilestackErrorType.ABORTED`\n\n## Sentry Integration\n\nIf you're using [Sentry](https://sentry.io/welcome/) to monitor your application, Filestack will automatically report upload errors to Sentry, and tag them with helpful diagnostic information via [`@sentry/browser`](https://github.com/getsentry/sentry-javascript/tree/master/packages/browser).\n\n## Versioning\n\nWe use [SemVer](http://semver.org/) for versioning. For the versions available, see the [tags](https://github.com/filestack/filestack-js/tags) on this repository.\n## Contributing\n\nWe follow the [conventional commits](https://conventionalcommits.org/) specification to ensure consistent commit messages and changelog formatting.\n","_attachments":{},"homepage":"https://github.com/filestack/filestack-js#readme","bugs":{"url":"https://github.com/filestack/filestack-js/issues"},"license":"MIT"}
![](\"https://static.filestackapi.com/filestack-js.svg?refresh\")
\n![](\"https://img.shields.io/npm/v/filestack-js.svg\")
\n ![](\"https://img.badgesize.io/https://static.filestackapi.com/filestack-js/3.x.x/filestack.min.js?compression=gzip&color=green\")
![](\"https://img.badgesize.io/https://static.filestackapi.com/filestack-js/3.x.x/filestack.min.js?color=green\")
![](\"https://img.shields.io/badge/module%20formats-umd%2C%20esm%2C%20cjs-green.svg\"){kind=icon}
\n ![](\"https://codecov.io/gh/filestack/filestack-js/branch/master/graph/badge.svg\"){kind=icon}
\n ![](\"https://travis-ci.org/filestack/filestack-js.svg?branch=master\")
\n