Yes you can. I've written a wrapper utility for working with the SharePoint AssetURLSelector (or Asset Picker) that wraps the whole thing up in a nice Promise based API.
Here's the essence of what you need to do:
- Load the Asset Picker onto your page.
- Create a configuration object for the picker.
- Launch with the configuration.
- Process return data in a callback.
To load the Asset Picker you need to load it using the Script-on-Demand mechanism
<script>
RegisterSod('assetpickers.js', '/_layouts/15/assetpickers.js');
EnsureScriptFunc('assetpickers.js', null, function(){
//Your code that uses the asset picker here
});
</script>
Once it's loaded you construct a configuration object with a callback and give it to a LinkAsset
instance. This is what you would do inside the EnsureScriptFunc
function above.
var config = new AssetPickerConfig('');
config.ReturnCallback = function(url, text, config, newAsset){
//This function is called once the user selects an asset.
//If the user cancels the dialog this function is NOT called.
};
var linkAsset = new LinkAsset([server-relative url for site here]);
linkAsset.LaunchModalAssetPicker(config);
That's about it. The server-relative url is used as the base of the link asset dialog so modifying this can change the context when the dialog is opened.
Edit:
You can exchange new LinkAsset
for new ImageAsset
in-place if you want to load images instead. You should also specify the AssetType parameter if you do this. This will place dialog in the PublishingImages folder and show image thumbnails.
var config = new AssetPickerConfig('');
config.ReturnCallback = function(url, text, config, newAsset){
//This function is called once the user selects an asset.
//If the user cancels the dialog this function is NOT called.
};
config.AssetType = 'Image';
var assetLauncher = new ImageAsset([server-relative url for site here]);
assetLauncher.LaunchModalAssetPicker(config);