Integrating directly to the API

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

Authentication

To be able to communicate with the api you first need to authenticate using OAuth you do this by sending a request to:

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

To do this you first need a client_id, client_secret and a refresh_token supplied by us. You will get a response with an access token like this:

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

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

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