Integration kit for Mediaflows File Selector

With our JavaScript-based integration kit, you can easily integrate Mediaflow's 'File-selector' component. It's a ready to use interface you can implement for the users to search, browse folders, select files, and crop them.

NOTE! This feature is still under development, so some parts of the user interface may change. Nothing in the javascript interface will be removed or changed. Most likely, some parameters will be added.

Contact our support to access the customer-specific keys neede

NOTE! This feature is still under development, so some parts of the user interface may change. Nothing in the javascript interface will be removed or changed. Most likely, some parameters will be added. d for the connection.

Note that the current agreement affects whether work with the API is allowed or not.


The integration is primarily intended for accessing and downloading files. To upload files to Mediaflow, you have to build your own API connection.

To make sure you always have the latest version, it is recommended to link directly to our javascript and css files:

https://mfstatic.com/js/fileselector.min.js
https://mfstatic.com/css/fileselector.css

The interface is embedded in an HTML element specified by you. It is inserted directly into the document, ie no iframe is used, so you can modify the css according to your needs.

Callback

In the config you register a callback function that is called when the user has selected (and possibly cropped) an image. In the call made to the callback function, the following items are sent:

{
filename: "testbild1.jpg",
filetype: "jpg",
width: 1280,
height: 720,
name: "testbild1",
photographer: "Kalle Andersson",
url: "https://dn16.mediaflow.se/dn/4MBBQH130L/custom?t=249877331&u=15271&cc=859&ch=1W0mrCUKZo7rQYD7RIKzct"
}

The url field contains a download url of the selected file. Normally this link is only valid for five minutes. If you enter permanentURL: true in the config object, you get a permanent link.

Authentication

In the config object you can specify how the authentication is made. If you enter auth: "mediaflowlogin", then the same authentication is used as in Mediaflow, ie you must be logged in to Mediaflow to be able to access the integration (there will not be a login box, but login must be done separately in Mediaflow). The other option is auth: "token", then you must also enter client_id, client_secret and refresh_token that you receive from us.

Example

The simplest example is:

<!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>

A slightly longer example with more settings:

<!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>

Parameters in the config object

auth string Login method, Possible values: token - login via a token specified by client_id, client_secret and refresh_token
client_id string Used if auth = token
client_secret string Used if auth = token
refresh_token string Used if auth = token
locale string Language, sv_SE (default) or en_US
limitFileType string Comma-separated list of allowed file extensions. All files that do not match this are filtered out.
noCropButton bool If image files are to be cropped manually. If set to true, image files are not cropped but the original file is downloaded. Default is false.
allowSelectFormat bool If the user is allowed to select the crop format from a list. Otherwise you must specify a crop format with downloadFormats. Default is true.
setAltText bool If the alt text field should be included. Default is true.
forceAltText bool If the alt text field is obligatory to fill in. Default is false.
autosetAltText bool If the alt-text field is to be filled in automatically based on what is in Mediaflow (currently from the Description field in Mediaflow). Default is true.
customAltText string Here you can enter your own alt text that is filled in by default
showDoneButton bool If an OK button is to be displayed in the interface. If set to false, it is required that there is another button outside the interface that calls the method
clickDone().
hideUnsafeGDPR bool Filter out files that are not approved according to GDPR. Does not affect files that do not have any GDPR information set. Default is false.
hideUnassignedGDPR bool Also filter out files that do not have any GDPR information set. Default is false.
selectedFolder int Here you can enter a folder ID that opens at startup.
selectedFile int Here you can enter a file ID that is selected in the folder that you have specified with selectedFolder.
downloadFormat string How to handle crop formats. Possible values:
fixed - use only those specified in downloadFormats
mediaflow - use the crop formats specified in Mediaflow
both - use the crop formats specified in Mediaflow and add those included in downloadFormats.
original - always use the original format
stream - applies to media files. Save a stream URL instead of a downloadable URL.
downloadFormats object array List of specified download formats (always saved as JPEG. Each format is specified with:
name - name of the format in the list
width - width in pixels
height - height in pixels
permanentURL bool Whether the download url should be temporary or permanent. Default is false.
success function A callback function that is called when the user is finished and the interface is expected to be deleted. It is called with a parameter that is an object with information about the selected file.
events function A callback function that is called at various user events, for example when a folder is displayed, when a file is selected, and so on. The function should receive two parameters, an event name as string and an event object whose content depends on which event occurred.

Functions

clickDone() Equivalent to clicking "Insert File" in the interface. If showDoneButton is set to false, it must be called manually.
showFolder(folderId, fileId)
Open a selected folder. If fileId! = Null, the file will be marked with that id if it is in that folder.