Javascript-baserat integrations-kit

Med vårt javascript-baserade integrationskit kan du enkelt skapa en integration för att komma åt filer och mappar i Mediaflow.

Gå tillbaka till "Hur arbetar jag med Mediaflows API?" artikeln.

OBS! Denna funktion är fortfarande under utveckling, så vissa delar av användargränssnittet kan komma att förändras. Inget i javascript-gränssnittet kommer tas bort eller ändras. Troligtvis kommer vissa parametrar läggas till.

Kontakta supporten för att komma åt de kundspecifika nycklar som behövs för kopplingen.

Notera att aktuellt avtal påverkar huruvida arbete med API tillåts eller inte.

Integrationen är främst avsedd för att komma åt och eventuellt ladda ner filer. För att ladda upp filer till Mediaflow får man bygga en egen API-koppling.

För att alltid ha den senaste versionen är det bästa att länka direkt mot våra javascript och css-filer:

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

Gränssnittet läggs in i en HTML-element som anges av er. Den läggs in direkt i dokumentet, dvs ingen iframe används, så ni kan modifiera css:en efter era behov.

Callback

Ni skickar in en callback-funktion som anropas när användaren har valt (och ev beskurit) en bild. I anropet till callback-funktionen skickas följande objekt:

{
filename: "testbild1.jpg",
filetype: "jpg",
width: 1280,
height: 720,
name: "testbild1",
photographer: "Kalle Andersson",
url: "https://dn16.mediaflow.se/dn/4MBBQH130L/custom?t=249877331&u=15271&cc=859&ch=1W0mrCUKZo7rQYD7RIKzct"
}

Fältet url innehåller en nerladdningsurl till den filen som är vald. Normalt sett är den länken endast giltigt i fem minuter. Om man anger permanentURL: true i config-objektet så får man en permanent länk.

Autentisering

I config-objektet anger man hur autentiseringen ska ske. Om man anger auth: "mediaflowlogin", så används samma autentisering som i Mediaflow, dvs man måste vara inloggas i Mediaflow för att kunna komma åt integrationen. Det andra alternativet är auth: "token", då måste man även ange client_id, client_secret och refresh_token som ni erhåller från oss.

Exempel

Det enklaste exemplet är:

<!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', { /* ange DOM-element eller id */
auth: 'mediaflowlogin',
success: function(o) { /* callback när man är färdig */
console.log(o);
alert('Fil vald, filen kan hämtas från ' + o.url);
}
});
</script>
</body>
</html>

Ett lite längre exempel med fler inställningar:

<!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', { /* ange DOM-element eller id */
auth: 'token', /* 'token' (autentisering med refreshtoken), 'mediaflowlogin' (inloggad användare i Mediaflow) */
client_id: '6e268b43',
client_secret: 'Ak9xCya0uC1JwNHdmIPV1SDq6HwQ8B',
refresh_token: 'gm5k7p7aS0iwIDPw2gcKAUnnLWkO2Dp',
locale: 'sv_SE', /* UI-språk, fn sv_SE eller en_US */
limitFileType: 'jpg,jpeg,tif,tiff,png', /* om man vill begränsa vilka filer man kan visa (kommaseparerad lista med filtyp eller filändelse */
allowCrop: true, /* om användaren ska beskära bilden */
allowSelectFormat: true, /* om användaren ska kunna välja beskärformat */
setAltText: false, /* om alt-texten ska anges utifrån beskrivningsfältet */
downloadFormat: 'fixed', /* 'fixed' (då anger man via downloadFormats vilka fomat man kan välja), 'mediaflow' (de nerladdningsformat man har angett i Mediaflow), 'original' (endast originalfilen) */
downloadFormats: [{id:0, name:'Poster', width:1280, height:720, format:'jpg', dpi:72}], /* om man valt 'fixed' så anger man här vilka beskärningsformat man kan välja på */
permanentURL: false, /* om man vill få en permanent URL, annars får man en tidbegränsad */
success: function(o) { /* callback när man är färdig */
console.log('success');
console.log(o);
alert('Fil vald, filen kan hämtas från ' + o.url);
},
events: function(eventName, eventData) { /* callback för olika event som inträffar */
console.log('Event', eventName);
console.log(eventData);
}
});
</script>
</body>
</html>