filestack-js
Advanced tools
Javascript SDK for the Filestack API and content management system.
Table of Contents
npm install filestack-js
https://filestack.github.io/filestack-js/
import * as filestack from 'filestack-js';
const client = filestack.init('apikey');
<script src="//static.filestackapi.com/filestack-js/{MAJOR_VERSION}.x.x/filestack.min.js" crossorigin="anonymous"></script>
<script>
const client = filestack.init('apikey');
</script>
where {MAJOR_VERSION} is one of the MAJOR versions of the filestack-js ie:
<script src="//static.filestackapi.com/filestack-js/3.x.x/filestack.min.js" crossorigin="anonymous"></script>
<script>
const client = filestack.init('apikey');
</script>
To speed up library loading you can use gzipped file available after adding gz to file extension
<script src="//static.filestackapi.com/filestack-js/{MAJOR_VERSION}.x.x/filestack.min.js.gz" crossorigin="anonymous"></script>
<script>
const client = filestack.init('apikey');
</script>
Subresource 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
To obtain sri hashes for filestack-js library check manifest.json file on CDN:
https://static.filestackapi.com/filestack-js/{LIBRARY_VERSION}/manifest.json
<script src="//static.filestackapi.com/filestack-js/{LIBRARY_VERSION}/filestack.min.js.gz" integrity="{FILE_HASH}" crossorigin="anonymous"></script>
Where {LIBRARY_VERSION} is currently used library version and {FILE_HASH} is one of the hashes from integrity field in manifest.json file
const client = require('filestack-js').init('apikey');
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:
Major releases will bo listed (with detailed examples) in releases folder starting from version 3.0.0
Upload image
Multiupload
Open picker
Open picker in inline mode
Crop images
Multiple drop panes
Preview
Import using RequireJS
Retrieve image data
Transform image
Custom Picker CSS
Assign file to user
Examples can be run locally with:
npm run examples
If 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.
The picker instance returned from client.picker can be controlled with a few methods:
displayMode.Please see our examples above to learn more about customizing the picker for your use case.
If you target IE11 or iOS before 8.0 you will need to add additional polyfills to your page or application.
Polyfills we recommend:**
Module (for bundling):
Script (for script tag):
Most 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.
All tests are using Jest.
To run units:
npm test
Filestack-js uses debug, so just run with environmental variable DEBUG set to fs.*.
DEBUG=fs.* node example_upload.js
Debug's enable state is persisted by localStorage
localStorage.debug = 'fs:*'
And then refresh the page.
The upload.error event was added to sdk. To obtain every upload request error just add callback to it.
Error contains details field with responseBody, responseHeaders, code (only when error type is FilestackErrorType.REQUEST)
<script>
const client = filestack.init('apikey');
client.on('upload.error', (filestackError) => {
console.log(filestackError);
});
</script>
filestack-js now using @sentry/minimal package.
We use SemVer for versioning. For the versions available, see the tags on this repository.
We follow the conventional commits specification to ensure consistent commit messages and changelog formatting.
FAQs
Official JavaScript library for Filestack
The npm package filestack-js receives a total of 72,053 weekly downloads. As such, filestack-js popularity was classified as popular.
We found that filestack-js demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
A Stanford study reveals 9.5% of engineers contribute almost nothing, costing tech $90B annually, with remote work fueling the rise of "ghost engineers."
Research
Security News
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.
Security News
MITRE's 2024 CWE Top 25 highlights critical software vulnerabilities like XSS, SQL Injection, and CSRF, reflecting shifts due to a refined ranking methodology.