Pickers

Filestack offers plug and play UI widgets for uploading files from both browsers and mobile devices.

Web Picker

The web picker is currently offered through the Javascript API Client. It can be included directly in web pages and/or bundled into your own application scripts.

For single file uploads it’s simple enough:

const client = filestack.init('apikey');
const options = {
  uploadInBackground: false,
  onUploadDone: showFileData
};

client.picker(options).open();

API Reference

Please see the official Javascript SDK documentation for the full picker API documentation.

Live Examples

Live examples of how to use the picker are available on JSFiddle. These are taken directly from the filestack-js GitHub.

Open picker
Open picker in inline mode
Crop images
Multiple drop panes
Custom Picker CSS
Assign file to user

Supported Browsers

  • Chrome (last 2 versions)
  • Firefox (last 2 versions)
  • Edge (last 2 versions)
  • Safari (last 2 versions)
  • Mobile Chrome
  • Mobile Firefox
  • Mobile Safari
  • IE11 (with Promise polyfill)

Hybrid frameworks such as Ionic or Cordova are not officially supported yet.

The web picker is highly configurable, and if you have questions on what is possible beyond what is covered in the API documentation please reach out to our support team.

Mobile Pickers

iOS

Please see the official filestack-ios documentation.

Android

Please see the official filestack-android documentation.

Cloud Integrations

The pickers utilize the Filestack Cloud API, which manages its own OAuth clients under the Filestack name and logo. By default users are presented with OAuth consent screens that ask them to let Filestack view their files. This can be changed to let you use your own OAuth clients by adding your OAuth client credentials to the Auth Keys section in the Developer Portal.

Note: You must use your own OAuth clients if you are using the Custom CNAME add-on for your application
Note: If you are using Dropbox you are required to create your own Dropbox application. Please see our quick tutorial.

The following providers are supported for custom OAuth:

  • Box
  • Dropbox
  • Facebook
  • Flickr
  • Google Drive
  • Google Search
  • GitHub
  • Gmail
  • Instagram
  • Picasa
  • OneDrive
  • OneDrive for Business

Custom S3 Source

You can setup your own Amazon S3 bucket as an upload source for use in the web picker. The source value is 'customsource' and can be added to the fromSources picker option. You can customize it further with the options customSourceName, customSourceContainer, and customSourcePath.

This feature requires a paid plan and once enabled can be configured in the Developer Portal.