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 need 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": ""
}

Example of callback for a video:

{
        "id": 3548110,
        "name": "20830-312432035_medium",
        "filename": "20830-312432035_medium.mp4",
        "mediaId": "22FBZ8WXPO",
        "filesize": 2147110,
        "length": 6,
        "checksum": "-6385020922147110",
        "width": 1280,
        "height": 720,
        "type": {
            "id": 311,
            "type": "video",
            "description": "QuickTime-film",
            "extension": "mp4"
        },
        "dpi": 72,
        "rating": 0,
        "nrDownloads": 0,
        "mark": 0,
        "owner": 67633,
        "uploaded": "2025-02-05T12:12:09Z",
        "addedToFolder": "2010-01-01",
        "photographer": "",
        "description": "",
        "instructions": "",
        "versioncomment": "",
        "iccprofile": null,
        "geodata": null,
        "processed": true,
        "hasVersions": false,
        "hasHistory": true,
        "locked": false,
        "lock": null,
        "focus": {
            "x": 0.5,
            "y": 0.5
        },
        "colorSpace": "UNKNOWN",
        "bitDepth": 0,
        "alpha": false,
        "photoDate": null,
        "colorValue": 3,
        "alttext": "",
        "uploadedByUser": {
            "id": 67633,
            "name": "Adam Evertsson",
            "profile": ""
        },
        "poster": "https://assets.mediaflowpro.com/a/89259f9b67010acebdae2a5a0373a280/poster.jpg",
        "additionalInfo": "",
        "keywords": [],
        "videoProcessed": true,
        "usageCount": 1,
        "icon": null,
        "hasPreview": true,
        "previews": [
            {
                "name": "thumb",
                "size": "100px",
                "url": "https://im11.inviewer.se/thumb/22/22FBZ8WXPO.jpg",
                "width": 100,
                "height": 56
            },
            {
                "name": "small",
                "size": "196px",
                "url": "https://im11.inviewer.se/info/22/22FBZ8WXPO.jpg",
                "width": 196,
                "height": 110
            },
            {
                "name": "medium",
                "size": "700px",
                "url": "https://im11.inviewer.se/skiss/22/22FBZ8WXPO.jpg",
                "width": 700,
                "height": 394
            }
        ],
        "smallPreview": "https://im11.inviewer.se/info/22/22FBZ8WXPO.jpg",
        "mediumPreview": "https://im11.inviewer.se/skiss/22/22FBZ8WXPO.jpg",
        "thumbPreview": "https://im11.inviewer.se/thumb/22/22FBZ8WXPO.jpg",
        "customFields": null,
        "rights": null,
        "nrComments": 0
    }

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

Name	Type	Description
aiAltTextDisabled	bool	Set to true to explicitly disable AI alt text option.
aiAltTextLanguageCode	string	The field can be used if you want to lock the alt text to a specific language. This language could, for example, come from the page you are editing in your content management system (CMS). If the field is not used, a dropdown list with languages to choose the alt text from will be displayed.
aiSearchDisabled	bool	Set to true to explicitly disable AI search option.
allowIframeVideo	bool	Allow embedding of video using an iframe. The default is true.
allowJSVideo	bool	Allow embedding of video using JavaScript. The default is true.
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.
auth	string	Login method, Possible values: token - login via a token specified by client_id, client_secret and refresh_token
autosetAltText	bool	If the alt-text field is to be filled in automatically based on what is in Mediaflow. Default is true.
autosetDescription	bool	Determines whether the image description should populate the field. The default is false.
client_id	string	Used if auth = token
client_secret	string	Used if auth = token
customAltText	string	Here you can enter your own alt text that is filled in by default
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
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.
excludePrivateFolders	bool	Set to true to not include private folders (such as "My files") in folder tree.
forceAltText	bool	If the alt text field is obligatory to fill in. Default is false.
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.
ignorePermissionChecks	bool	Set to true to ignore permission warnings and disabling of download etc.
limitFileType	string	Comma-separated list of allowed file extensions. All files that do not match this are filtered out.
locale	string	Language, sv_SE (default) or en_US
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.
permanentURL	bool	Whether the download url should be temporary or permanent. Default is false.
refresh_token	string	Used if auth = token
selectedFile	int	Here you can enter a file ID that is selected in the folder that you have specified with selectedFolder.
selectedFolder	int	Here you can enter a folder ID that opens at startup.
setAltText	bool	If the alt text field should be included. Default is true.
setDescription	bool	Determines whether the field for image description should be displayed. The default is false.
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().
showDoneButtonWorkingFlow	bool	Displays a message when clicking “Use this file” (the second button). A message shows the status while data is being fetched, and a confirmation message is displayed when the request is completed. This is mainly used when the File Selector is utilized in an extension where you need to manually close the window, such as in Sitevision. The 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.
useNavigationLink	bool	Enable adding an URL to the output data. If used - an input field is added to the "last step" when selecting an image. Default is false.
defaults	object	See section below.

default

Possibility to set default settings for crop functionality when File Selector is initialised. This is an alternative to using Download Presets in the Mediaflow app.

Example

..., default: {width: 100, height: 100, format: -1, imageDownloadFileType: "webp"}, ...

Name	Type	Description
width	int	Width in pixels. Must be used together with height and format.
height	int	Height in pixels. Must be used together with width and format.
format	int	Preselected default format -1: Free crop -2: User format -3: Do not crop Must be used together with width and height.
imageDownloadFileType	string	Allowed formats: "jpg", "png", "webp".

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.