Build Rich File Upload Experiences with JavaScript
Add powerful file uploading, image editing, and transformation capabilities to your web applications with our comprehensive JavaScript SDK.
// Quick start example
import * as filestack from 'filestack-js';
const client = filestack.init('YOUR_API_KEY');
const options = {
onUploadDone: (res) => {
console.log(res.filesUploaded);
},
maxFiles: 5,
accept: 'image/*'
};
client.picker(options).open();Why Choose Our JavaScript SDK?
Drag & Drop Interface
Beautiful, customizable file picker with native drag and drop support. Works seamlessly across all modern browsers.
Built-in Image Editor
Powerful image editing capabilities including crop, rotate, filters, and text overlays - all in the browser.
Multi-Source Uploads
Upload from local files, URLs, social media accounts, cloud storage, and even camera/webcam directly in the browser.
Real-time Transformations
Apply image transformations, resizing, format conversion, and optimization on-the-fly with URL-based parameters.
Security & Validation
Built-in virus scanning, file type validation, size limits, and content moderation to keep your app secure.
Mobile Optimized
Responsive design that works perfectly on mobile devices with touch-friendly interfaces and camera integration.
Trusted by innovative companies worldwide
Get Started in Minutes
Our JavaScript SDK is designed for developers who want to get file uploading working quickly without sacrificing customization options.
- 1Install filestack-js via npm
- 2Import and initialize the client with your API key
- 3Configure your upload options and callbacks
- 4Open the picker and start uploading files
// 1. Install filestack-js
npm install filestack-react
// 2. Import and initialize client
import * as filestack from 'filestack-js';
const client = filestack.init('YOUR_API_KEY');
// 3. Configure options
const options = {
maxFiles: 10,
accept: ['image/*', 'video/*'],
fromSources: ['local_file_system', 'url', 'imagesearch'],
onUploadDone: (result) => {
console.log('Upload completed!', result);
// Handle your uploaded files
result.filesUploaded.forEach(file => {
console.log(file.url);
});
}
};
// 4. Open picker
client.picker(options).open();
CDN Alternative
- 1Add the script tag to your HTML
- 2Initialize and use filestack globally
// Add to your HTML head
<script src="//static.filestackapi.com/filestack-js/4.x.x/filestack.min.js">script>
// Use filestack globally
const client = filestack.init('YOUR_API_KEY');
const options = {
maxFiles: 10,
accept: ['image/*', 'video/*'],
onUploadDone: (result) => {
console.log('Upload completed!', result);
result.filesUploaded.forEach(file => {
console.log(file.url);
});
}
};
client.picker(options).open();