Getting Started

Most Mediaflow integrations use our File Selector—a fast and user-friendly way to browse folders and files directly from your Mediaflow library. It includes a built-in image cropper for adjusting images to the correct size, as well as support for selecting download presets and applying them to specific areas of the image.

Before you begin, you’ll need a client_id, client_secret, and refresh_token for authentication. These credentials are provided by Mediaflow upon request.

When to use the File Selector

The File Selector is primarily used for standard API integrations, where most functionality revolves around selecting and mounting files, such as mounting an image on a page in your website's CMS. It’s designed for accessing and downloading media from Mediaflow, and can also be used to retrieve embed codes for videos in Mediaflow.

If you need to upload files, you’ll need to build a custom integration using the Mediaflow API.

Before building a custom integration, check our Knowledge Base to see if a ready-made integration already exists for your platform.

Include the File Selector Library

To get started, include the File Selector’s JavaScript and CSS files in your project. You can either link to them directly from our server or host them locally. We strongly recommend linking to the hosted version to ensure you always have the latest updates and bug fixes.

<!-- CSS -->
<link rel="stylesheet" href="https://mfstatic.com/css/fileselector.css" />

<!-- JavaScript -->
<script src="https://mfstatic.com/js/fileselector.min.js"></script>

Initialize the File Selector

Once the JavaScript and CSS files are included, you can initialize the File Selector by creating a new instance using the FileSelector constructor.

var myFileSelector = new FileSelector('element-container-id', {
  auth: 'token', /* 'token' (authentication with a refresh token) */
  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 render a basic File Selector inside the specified container element, allowing users to browse folders and select a file. When a file is chosen, the success callback function will return metadata about the selected image or video.

To see more available options in the File Selector, see Options.

Handling File Selector Output

When a user selects a file—whether it’s an image or a video—the File Selector returns useful data that you can use to embed content, store metadata, or report usage. This section explains how to handle that output depending on the file type and how to report back to Mediaflow.

Images

When an image is selected, you’ll get a download URL to fetch the file and store it on your own server.

Be sure to also store the file ID, as it’s useful for updating or tracking the image later via the Mediaflow API.

You may also receive image metadata like alt-text and photographer name for accessibility and attribution purposes.

Example output

{
    "id": 5754390,
    "url": "https://assets.mediaflow.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.

By default, the URL is only valid for five minutes.

If you include permanentURL: true when initializing the File Selector, you can get a permanent link instead.

Videos

When a video is selected, the File Selector provides an embed code using the Mediaflow player. This code can be either a JavaScript embed or an iframe, based on configuration or the user’s choice.

You can store this embed code and use it to display the video on your website or app.

Example output

{
    "id": 00000000,
    "folderId": 000000,
    "description": "A video description.",
    "poster": "https://assets.mediaflow.com/a/2x7f7324a02e687f74c93ff740731837/poster.jpg",
    "mediaId": "25XAWDZ5ZW",
    "filename": "A video.mp4",
    "basetype": "video",
    "filetype": "mp4",
    "embedMethod": "javascript",
    "embedCode": "<div id=\"mfv43wh2x\"></div><script>if(!document.querySelector('link[href=\"https://mfstatic.com/css/mediaflowplayer.min.css\"]')){const mfl43wh2x=document.createElement('link');mfl43wh2x.setAttribute('rel','stylesheet');mfl43wh2x.setAttribute('type','text/css');mfl43wh2x.setAttribute('href','https://mfstatic.com/css/mediaflowplayer.min.css');document.getElementsByTagName('head')[0].appendChild(mfl43wh2x);}if(typeof(MFPlayer)=='undefined'){const mfs43wh2x=document.createElement('script');mfs43wh2x.setAttribute('crossorigin','anonymous');document.body.appendChild(mfs43wh2x);mfs43wh2x.onload=function(){new MFPlayer('#mfv43wh2x','25XAWDZ5ZW', {\"autoPlay\":false});};mfs43wh2x.src='https://mfstatic.com/js/mediaflowplayer.min.js';}else{new MFPlayer('mfv43wh2x','25XAWDZ5ZW', {\"autoPlay\":false});}</script>",
    "autoPlay": false,
    "startTime": 0
}

Reporting Usage

You can report how and where selected files are used—directly back to Mediaflow for better asset tracking and visibility.

See more in the Reporting Usage guide.