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.
Basic example
<!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: 'token',
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>Example with more options
<!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: 'token', /* 'token' (authentication with the refresh token) */
client_id: '6e268b43',
client_secret: 'Ak9xCya0uC1JwNHdmIPV1SDq6HwQ8B',
refresh_token: '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>