File Selector Integration Kit

The integration kit simplifies your work as it consists of an "image picker" that handles the image selection step for you. The image picker enables the user to browse folders, search for files, review metadata for files, select files, and crop images, or alternatively embed video files.

When to use

The integration kit is mainly used when implementing a standard API Integration because the majority of the functionality of a standard integration involves mounting files. Read more about how a standard integration works here.

Usage Area File Selector is often used as part of a standard integration but also in other integration projects. Read more about standard integrations here.

API required in your agreement Contact support to access the customer-specific keys needed for the connection. Your current agreement affects whether work with the API is allowed or not.

Example of an Image picker

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:

{
    "id": 5754390,
    "url": "https://assets.mediaflowpro.com/a/7594112424b0de528c4be0155f24b269/aaron-burden-AtDUYurMJIU-unsplash.jpg",
    "name": "aaron-burden-AtDUYurMJIU-unsplash",
    "filename": "aaron-burden-AtDUYurMJIU-unsplash.jpg",
    "basetype": "image",
    "filetype": "jpg",
    "width": "800",
    "height": "1067",
    "photographer": "",
    "altText": ""
}

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.

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

Functions

PreviousIntegrating directly to the APINextGetting Started

Last updated