Pick an asset to see the result

Features

Easy integration

Just include the tiny picker script (~15kb) 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. It doesn't need any server backend, so you can easily integrate it into any web application (for Symfony Applications there's also a tiny bundle available).

Easy usage

Its modern interface is based on common file selector interfaces like the Windows native - see the demo above.

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.

Currently adapters for Google Drive, GitHub and EnterMediaDB are available - feel free to ask for the implementation of missing adapters by opening an issue on github

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 be proxied - AssetPicker allows to use the included simple PHP-Proxy or any other proxy or another proxy for all or only particular storages.

Customization

The picker and the file browser can be configured extensively. It's easy to add your own storage adapters and if you need to customize the file browser you can do that using npm.

Usage

Actually it's just including the script from a CDN, instanciating the picker with some storages and have buttons with rel="assetpicker" attribute. However there are a lot more options which you can find in the manual

<script src="https://cdn.rawgit.com/netresearch/assetpicker/1.0.0/dist/js/picker.js"></script>
<script>
    new AssetPicker({
        storages: {
            github: {
                adapter: 'github',
                username: 'netresearch',
                repository: 'assetpicker'
            }
        }
    });
</script>
<button rel="assetpicker" data-limit="10" data-exts="js,json" data-name="inputname">Select a JS file</button>