Javascript integration kit

With our javascript based integration kit you can easily create an integration to access your files and folders in Mediaflow.

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 needed 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.