File Selector
Examples
Practical code examples showing how to configure the File Selector with different options. Use these snippets as a starting point for your own integration—whether you want to limit file types, preselect folders, enable cropping, or customize the UI.
Example using accesstoken authentication method
Please note that access tokens have to be refreshed. Please refer to the authentication documentation.
<!doctype html>
<html lang="sv">
<head>
<meta charset="utf-8">
<title>Mediaflow fileselector</title>
<link href="https://mfstatic.com/css/fileselector.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="selectorHolder" style="position:relative;width:1000px;height:500px;overflow:hidden;border:1px solid black;margin:10px;"></div>
<script src="https://mfstatic.com/js/fileselector.min.js"></script>
<script>
var myFileSelector = new FileSelector('selectorHolder', { /* enter DOM element or id */
auth: 'accesstoken',
accesstoken: 'gm5k7p7aS0iwIDPw2gcKAUnnLWkO2Dp...',
locale: 'sv_SE', /* UI-language, sv_SE or en_US */
limitFileType: 'jpg,jpeg,tif,tiff,png', /* if you want to restrict which files you can view (comma separated list with file type or file extension */
noCropButton: false, /* if the user should be able to crop the image */
allowSelectFormat: true, /* if the user should be able to select the crop format */
setAltText: false, /* if the alt text can be specified */
customAltText: 'egen...', /* ange en egen alt-text */
downloadFormat: 'fixed', /* 'fixed' (then you specify via downloadFormats which formats you can choose), 'mediaflow' (the download formats you have specified in Mediaflow), 'original' (only the original file) */
downloadFormats: [{id:0, name:'Poster', width:1280, height:720}], /* if you have selected 'fixed', you specify here which cropping format you can choose from */
permanentURL: false, /* if you want to get a permanent URL, otherwise you get a time-limited one */
success: function(o) { /* callback when a file is selected */
console.log('success');
console.log(o);
alert('File selected, the file can be downloaded from ' + o.url);
},
events: function(eventName, eventData) { /* callback for different events that occur */
console.log('Event', eventName);
console.log(eventData);
}
});
</script>
</body>
</html>Basic example
This example uses the default authentication method. This exposes client_id, client_secret and refresh_token in the DOM. For production use, please use the above mentioned "accesstoken" method instead.
<!doctype html>
<html lang="sv">
<head>
<meta charset="utf-8">
<title>Mediaflow fileselector</title>
<link href="https://mfstatic.com/css/fileselector.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="selectorHolder" style="position:relative;width:1000px;height:500px;overflow:hidden;border:1px solid black;margin:10px;"></div>
<script src="https://mfstatic.com/js/fileselector.min.js"></script>
<script>
var myFileSelector = new FileSelector('selectorHolder', { /* enter DOM element or id */
auth: 'default',
client_id: '6e268b43',
client_secret: 'Ak9xCya0uC1JwNHdmIPV1SDq6HwQ8B...',
refresh_token: 'gm5k7p7aS0iwIDPw2gcKAUnnLWkO2Dp...',
success: function(o) { /* callback when a file is selected */
console.log(o);
alert('File selected, the file can be downloaded from ' + o.url);
}
});
</script>
</body>
</html>