Integrating directly with Mediaflow API

It is possible to integrate directly to our API, this is only necessary if you have a special case where the file selector does not work for you.

Please note that you first need an authentication token to make requests (see Authentication)

Listing folders

To list folders you can send a request to:

GET https://api.mediaflow.com/1/foldertree?fields=all

This will list all the folders that the integration is allowed to see. The response will look like below:

[
	{
        "id": 1234,
        "name": "Images",
        "type": 0,
        "depth": 0,
        "archived": false,
        "parent": null,
        "hasChildren": true,
        "separator": false
    },
    {
        "id": 1235,
        "name": "Images of buildings",
        "type": 0,
        "depth": 1,
        "archived": false,
        "parent": 1234,
        "hasChildren": false,
        "separator": false
    }
]

Here you can see if the folder has a parent and which dept it has in the tree which can be used to render a tree with different levels.

Listing files

The files can be listed from a folder on the endpoint:

GET https://api.mediaflow.com/1/folder/{{id}}/files?fields=id,name,filename,filesize, type,smallPreview,thumbPreview,mark,uploaded,uploadedby,gdprstatus,gdprtype,mediaid,alttext&type=any&processed=true

This will give you an array of files from the folder like this:

[
	{
        "id": 1234,
        "name": "My image",
        "filename": "My image.jpg",
        "type": {
            "id": 101,
            "type": "image",
            "description": "JPEG-bild",
            "extension": "jpg"
        },
        "filesize": 200980,
        "mark": 0,
        "uploadedBy": 1,
        "uploaded": "2021-07-10T10:42:41.000+01:00",
        "mediaId": null,
        "alttext": "My image Alt Text",
        "smallPreview": "<https://my-image-preview>",
        "thumbPreview": "<https://my-image-preview>",
        "gdprStatus": "OK",
        "gdprType": "NO_PERSON"
    },
    {
        "id": 1235,
        "name": "My image 2",
        "filename": "My image2.jpg",
        "type": {
            "id": 101,
            "type": "image",
            "description": "JPEG-bild",
            "extension": "jpg"
        },
        "filesize": 158294,
        "mark": 0,
        "uploadedBy": 2,
        "uploaded": "2021-07-10T10:42:39.000+01:00",
        "mediaId": null,
        "alttext": "My image 2",
        "smallPreview": "<https://my-image-preview>",
        "thumbPreview": "<https://my-image-preview>",
        "gdprStatus": "OK",
        "gdprType": "EXTERN_CONTRACT"
    }
]

Search files

You can search the files by a text query on the endpoint:

GET https://api.mediaflow.com/1/search/file?query=xxxx&fields=id,name,filename,filesize, type,smallPreview,thumbPreview,mark,uploaded,uploadedby,gdprstatus,gdprtype,mediaid,alttext

This will give you an array of files like this:

[
	{
        "id": 1234,
        "name": "My image",
        "filename": "My image.jpg",
        "type": {
            "id": 101,
            "type": "image",
            "description": "JPEG-bild",
            "extension": "jpg"
        },
        "filesize": 200980,
        "mark": 0,
        "uploadedBy": 1,
        "uploaded": "2021-07-10T10:42:41.000+01:00",
        "mediaId": null,
        "alttext": "My image Alt Text",
        "smallPreview": "<https://my-image-preview>",
        "thumbPreview": "<https://my-image-preview>",
        "gdprStatus": "OK",
        "gdprType": "NO_PERSON"
    },
		{
        "id": 12346,
        "name": "test",
        "filename": "test.mp4",
        "type": {
            "id": 311,
            "type": "video",
            "description": "QucikTime-film",
            "extension": "mp4"
        },
        "filesize": 58105856,
        "mark": 0,
        "uploadedBy": 23917,
        "uploaded": "2023-06-30T15:11:35.000+01:00",
        "mediaId": "15DYF999PU",
        "alttext": "",
        "smallPreview": "<https://my-image-preview>",
        "thumbPreview": "<https://my-image-preview>",
        "gdprStatus": "OK",
        "gdprType": "NO_PERSON"
    },
]

Get video embed code

You can create either a embed code as an iframe or a Javascript based embed. This can be created from mediaId we get on a video file.

Responsive iframe

<div style="position:relative;overflow:hidden;width:100%;padding-top:56.25%;">
	<iframe title="{INSERT TITLE HERE}" style="position:absolute;top:0;left:0;bottom:0;right:0;width:100%;height:100%;" 
		src="<https://play.mediaflowpro.com/ovp/11/>{INSERT MEDIA ID HERE}" 
		frameborder="0" 
		allowfullscreen="true" 
		allow="autoplay;encrypted-media;picture-in-picture">
	</iframe>
</div>

Javascript embed

<div id="{INSERT GENERATED ID}"></div>
<script>
	if(!document.querySelector('link[href="<https://mfstatic.com/css/mediaflowplayer.min.css>"]')){
		const {INSERT GENERATED ID} = document.createElement('link');
		{INSERT GENERATED ID}.setAttribute('rel','stylesheet');
		{INSERT GENERATED ID}.setAttribute('type','text/css');
		{INSERT GENERATED ID}.setAttribute('href','<https://mfstatic.com/css/mediaflowplayer.min.css>');
		document.getElementsByTagName('head')[0].appendChild({INSERT GENERATED ID});
	}
	
	if(typeof(MFPlayer)=='undefined') {
		const {INSERT GENERATED ID} = document.createElement('script');
		{INSERT GENERATED ID}.setAttribute('crossorigin','anonymous');
		document.body.appendChild({INSERT GENERATED ID});
			
		{INSERT GENERATED ID}.onload = function() {
			new MFPlayer('{INSERT GENERATED ID}','{INSERT MEDIA ID}', {
				"defaultLanguage":"sv",
				"displayLanguage":"sv"
			}); 
		}
		{INSERT GENERATED ID}.src = '<https://mfstatic.com/js/mediaflowplayer.min.js>';
	} else {
		new MFPlayer('{INSERT GENERATED ID}','{INSERT MEDIA ID}', {
			"defaultLanguage":"sv",
			"displayLanguage":"sv"
		}); 
	}
</script>

Downloading an image

To download an image you first need to make a request to:

GET https://api.mediaflow.com/1/file/{{id}}/download/0

This will give you a response with information about the download and a temporary downloadUrl where you can download the image to store locally.

[
    {
        "id": 0,
        "format": "original",
        "watermark": false,
        "isPreview": false,
        "filetype": "jpg",
        "expiresIn": 300,
        "downloadURL": "YOUR DOWNLOAD LINK",
        "downloadWarning": false
    }
]

The 0 in the url means that you want to download the original image. But you can specify the id for a specific format from Mediaflow. You can use the format endpoint to get a list of all available formats:

https://api.mediaflow.com/1/format

If you use -1 instead of an id this means you want a custom format. This can be used with a cropper to specify how you want to crop the image. So you also need to send a few query parameters for this to work.

w = Width of the format you want to output
h = Height of the format you want to output
sh = Height of the surface you are scaling against
sw = Width of the surface you are scaling against
x1 = X coordinate on the left edge
x2 = X coordinate in the right edge
y1 = Y coordinate at the top
y2 = Y coordinate at the bottom
stretch = is set to 1 if the image is to be stretched to the specified format

If you add all these parameters to a download link, it might look something like this:

https://files.mediaflow.com/dn/XXXXXXXX/custom?t=000000000&u=0000&cc=00&ch=xxxxxxxxxxxxx&sid=0&x1=104&y1=46&x2=596&y2=415&sw=700&sh=461&w=640&h=480&stretch=1