AssetPicker
A free, easy to use, cross plattform ready asset or file picker.
Pick an asset to see the result
Features
- Easy integration
- Just include the tiny picker script (~10kb) from anywhere (f.i. a CDN) and it will care for the rest - until the pick button is clicked no additional sources will be loaded. Also it doesn't require or exclude any third party libraries to work but works in plain javascript.
- Easy usage
- Its modern interface is based on common file selector interfaces like the Windows native
- Cross plattform support
- AssetPicker is designed to work with assets from any source - be it cloud storages like Amazon S3, Google Drive or Dropbox or assets from a custom web application server
- In opposite to other file managers or pickers, AssetPicker is suitable for hierarchical as well as associative file storages and you can use one or many of them.
- Search
- AssetPicker can search recursively loaded hierarchical structures or utilize remote search endpoints. The results will be in one place.
- Authentication
- Its platform adapters utilize a built in login system to authenticate with remote storages - no need to care about that.
- Proxy support
- AssetPicker is directly working with the remote storages and thus requires them to support CORS. Anyway some systems don't do that and so the requests need to proxied - AssetPicker ships with a simple PHP-Proxy, easy to setup
- Customization
- The picker script loads the file browser into an iframe inside a modal - the template and styles of that can be changed by according options. The file browser can be customized by building it on your own.
Principles
The AssetPicker consists of two bundles: The picker and the app. The picker is a lightweight script which is to be included into the application which you want to use the picker. It prepares the stage for the app, for which it creates a customizable modal with an iframe and registers itself for the picker button based on the configured selector. When one of these buttons is clicked, it will load the app into the iframe and establish the communication with it (for which cross window messaging is used which enables you to load the script from any other domain without security problems).
The app provides the actual user interface and functionality. It has a default configuration which will be merged with the configuration passed to the picker. The key part of this configuration are the storages, which will be mounted as top level entries on the navigation bar (and on the start screen when you use multiple storages). Each of the storages can have a separate configuration and use other adapters.
The adapters abstract the access to remote storages. They can or have to be configured along with the storage configuration by which you can pass f.i. details like user ids, tokens etc. There are some shipped by default but you can also add your own adapters.
Adapters
GitHub
The GitHub adapter utilizes the GitHub API to provide files and folders in a GitHub repository to AssetPicker. For this to work, an GitHub API token