Filestack
Configure Filestack integration so customers can upload images from cloud services in the Print Editor.
Filestack is a cloud file upload service that provides a unified file picker supporting multiple sources including Facebook, Instagram, Google Drive, Dropbox, OneDrive, and more. When configured, customers using the Print Editor can browse and upload images from any of the enabled sources directly into their design without leaving the editor.
The Filestack integration requires an API Key and optionally an API Secret from your Filestack account. You also select which cloud sources are available to customers in the file picker.
Configure Filestack
- From your Unified Admin, go to Settings > Integrations > Filestack Integration.
- Enter your Api Key and API Secret.
- In the Sources dropdown, check the cloud services you want to enable for customers.
- Click Save.
Settings
| Field | Description |
|---|---|
| Api Key | Your Filestack API key. Required for the integration to function. When set, the Filestack upload option appears in the Print Editor image sidebar. |
| API Secret | Your Filestack app secret. Used to generate security policies and signatures that protect your Filestack account from unauthorized usage. Optional but recommended for production. |
| Sources | Multi-select list of cloud services to enable in the file picker. Customers will only see the sources you check here. Available options: Facebook, Computer, Flickr, Google, Imgur, Instagram, Web Images, Alfresco, Amazon Cloud Drive, Box, CloudApp, Dropbox, Evernote, Gmail, Google Drive, One Drive. |
Available Sources
| Source | Value | Description |
|---|---|---|
FACEBOOK | Browse and upload photos from a Facebook account. | |
| Computer | COMPUTER | Upload files from the local device. |
| Flickr | FLICKR | Browse and upload photos from Flickr. |
PICASA | Browse and upload photos from Google Photos (legacy Picasa). | |
| Imgur | IMGUR | Browse and upload images from Imgur. |
INSTAGRAM | Browse and upload photos from an Instagram account. | |
| Web Images | IMAGE_SEARCH | Search the web for images to upload. |
| Alfresco | ALFRESCO | Connect to an Alfresco content management system. |
| Amazon Cloud Drive | CLOUDDRIVE | Browse files from Amazon Cloud Drive. |
| Box | BOX | Browse and upload files from Box. |
| CloudApp | CLOUDAPP | Browse and upload files from CloudApp. |
| Dropbox | DROPBOX | Browse and upload files from Dropbox. |
| Evernote | EVERNOTE | Browse and upload files from Evernote. |
| Gmail | GMAIL | Browse and upload attachments from Gmail. |
| Google Drive | GOOGLE_DRIVE | Browse and upload files from Google Drive. |
| One Drive | SKYDRIVE | Browse and upload files from Microsoft OneDrive. |
How It Works
The Filestack configuration is stored as a pipe-delimited string in the format ApiKey|ApiSecret|Sources in the platform's configuration system (config key: FilestackApi). When a customer opens the Print Editor, the system reads this configuration and initializes the Filestack JavaScript client with the API key, security policy (if an API Secret is set), and enabled sources.
When the API Secret is provided, the system generates time-limited security policies and cryptographic signatures server-side. These are passed to the Filestack client to ensure uploads are authorized without exposing the secret to the browser.
Associations
Print Editor
| Area | Effect |
|---|---|
| Image Sidebar | When Filestack is configured, a Filestack upload option appears in the editor's image sidebar. Customers click it to open the Filestack file picker, which shows the enabled sources. Selected images are uploaded through Filestack and added to the customer's image library for use in their design. |
| Legacy Editor (AngularJS) | The legacy Storefront editor also supports Filestack. It loads the Filestack JavaScript API on the editor page and initializes it with the configured API key, sources, and security policy. The picker allows multiple image selection with JPEG and PNG mime type filtering. |
| New Editor (Angular) | The new Print Editor initializes the Filestack client from configuration data passed at startup. The picker accepts image files, supports up to 20 files at once, and includes additional hardcoded sources (webcam, Google Photos, OneDrive for Business, Unsplash) beyond the admin-configured sources. |
Print Store
| Area | Effect |
|---|---|
| Image Processing | When images are uploaded through Filestack, the platform uses the Filestack API server-side (via FilestackHelper) to retrieve and process the uploaded files. The API key and secret are used to generate authorized download URLs with time-limited security policies. |
Related Pages
- Dropbox — standalone Dropbox upload for the storefront file upload page
- Google — Google integrations including Drive file uploads
- Deposit Photos — paid stock image library available in the Print Editor
- Pixabay — free stock image search available in the Print Editor