Integration with JavaScript File Selector

Most of our integrations use our fileselector, it’s a quick and easy way to browse the folders and files from Mediaflow and has a built in cropper so you can easily crop the images to the correct size or pick a download preset and where it should be applied in the image.

Before you begin you need a client_id, client_secret and refresh_token to be able to authenticate. The keys are supplied by us on request.

To begin with you need to include the fileselector javascript and css files. This can be linked from our server or just download it and use a local version. It can however be better to link to our server version since this will make sure you always have the latest version with bug fixes etc.

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

When the files are linked you can instantiate a new fileselector by doing the the following:

var myFileSelector = new FileSelector('element-container-id', {
  auth: 'token', /* 'token' (autentisering med refreshtoken) */
  client_id: '{INSERT CLIENT ID}', 
  client_secret: '{INSERT CLIENT SECRET}',
  refresh_token: '{INSERT REFRESH TOKEN}',
  locale: 'sv_SE', /* UI-language, sv_SE, en_US, no_NB or fi_FI */
  success: function(data) {
  }
});

This will give you a basic fileselector where you can browse folders and pick a file. When the file is selected you will get the information about the image or video in the success callback. To see more available options in the fileselector, see this article https://support.mediaflow.com/en/javascript-integration-kit.

Video

If you have picked a video this will give you an embed code to the video which uses our player. This can either be a javascript embed code or an iframe. Depending on the settings in the fileselector or the selection by the user. You can save this embed code to be able to show it on a page.

Image

If you have picked an image you will get a download url for the image. Use this to download the image and place it on your own server, you should also save the id of the file since it can be used to communicate updates back to our api. You can also get meta data like alt-texts and photographer.

Report usage

When you have saved all the information you can report back to our api which page the image or video is used on. This information is then available in Mediaflow so you can see everywhere the file is used. You can also report back when a file is not used any more. See more on how to do this in the “Report usage” section.

Report usage

Authentication (skip this step if you make an api integration)

To send the usage we first need to send a authentication call to get an access token. You can use the same client_id, client_secret and refresh_token used in the Filepicker with this GET request:

https://api.mediaflow.com/1/oauth2/token?grant_typ e=refresh_token&client_id={client_id}&client_secret={client_s ecret}&refresh_token={refresh_token}

You will get an access token in the response like this:

{
	"access_token": "...",
	"token_type": "Bearer",
	"expires_in": 7200
}

More information on how to use the api is available here: https://support.mediaflow.com/en/hur-arbetar-jag-med-mediaflows-api

Send usage

With the access_token that we now got we can send requests to the api with the access_token as a Authorization header.

Authorization: Bearer igfragagsnckagnkgadciangdsnjg”

To this endpoint with the data described below:

POST https://api.mediaflow.com/1/files/multiple/usages

Usage Object

Field	Data type	Description
id	int array	Array of File ID’s
contact	string	Person responsible
date	string	Publication date
amount	string	Amount
description	string	information about the usage
project	string	Name of the project it’s used in
types	string array	Type of publication
removed	string	Indicates if the usage should be removed or not.
web	object	This is an object with details about the page the file is used on. More details are specified below.

Web object

Field	Data type	Description
page	string	Url to the page
pageName	string	Name of the page

JSON example:

{
     "id":[1000],
     "types":["web"],
     "date": "2023-09-23",
     "contact ": "Name Namnsson",
     "amount": "1",
     "project": "Umbraco",
     "description":"",
     "web": {
          "page": "<https://test.com>",
          "pageName": "Page name"
     },
     "removed": "false"
}