Open and Close File Picker Manually
Use Filestack JavaScript SDK to open and close the File Picker manually using external buttons.
Try it yourself:
Having the PickerInstance
allows you to open the picker using the .open()
method and close the picker using the .close()
method.
Terminal
npm install filestack-js tslib
HTML
This area for displaing the File Picker
CSS
#app {
height: 300px;
width: 90%;
border: 2px solid #000;
padding: 30px;
margin: 20px 0;
}
index.mjs
import * as filestack from "filestack-js";
//Replace Your_API_key with you API Key from DevPortal dev.filestack.com/login/
const client = filestack.init("Your_API_key");
let picker;
document.getElementById("openPicker").addEventListener("click", function () {
// Display picker inline on the page
let options = {
displayMode: "inline",
container: "#app",
};
picker = client.picker(options);
picker.open();
});
document.getElementById("closePicker").addEventListener("click", function () {
picker.close();
});
client.on("upload.error", (filestackError) => {
console.log(filestackError);
});
Start building your own file upload solution today.
PREVIEW
Users can preview their uploaded files directly inside the File Picker.
CONNECT TO 20+ CLOUD DRIVES
Connect your app directly to AWS, Facebook, Dropbox, Instagram, and more.
PROGRESS BAR UPLOADS
Give your users confidence that their files are on the way to the right destination.
MULTI-FILE UPLOADS
Let your users upload multiple files at one time for speed and simplicity.
CUSTOM CSS
Filestack blends seamlessly into your website or app. Ask about white-labeling.
CLIENT-SIDE CROP
Users can crop files to perfection before sending them to your website or app.
UNLIMITED UPLOADING
Upload any file type, from any local or cloud source, at any scale.
WEBSITES & HTML
Filestack can even load web content from any public URL and capture the rendered page as an image. Perfect for generating screenshots, previews, or converting HTML-based content into other formats.
SECURE CLOUD STORAGE
Store uploads directly in your cloud storage for ease and accessibility.
"Being smart here, in my opinion, is seriously looking at Filestack to give you a fantastic uploading experience, while you spend your time on your product vision, not already-solved problems."
— CHRIS COYIER, FOUNDER OF CSS-TRICKS & CODEPEN