Quick Start Example
// 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?
Built specifically for modern web development, our JavaScript SDK provides everything you need to handle files in the browser.
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
Complete Implementation
// 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 Implementation
// 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();
Implement JavaScript File Solutions
Join thousands of developers who trust Filestack to handle their file management needs. Get started with our JavaScript SDK today.