Integrations-kit för Mediaflows filväljare (Javascript-baserat)

Med vårt javascript-baserade integrationskit kan du enkelt integrera Mediaflows "File-selector" komponent. Den är en färdigt gränssnitt som du kan implementera för användarna att söka, bläddra i mappar, välja filer och beskära dem.

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 som görs 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 inloggad i Mediaflow för att kunna komma åt integrationen (det kommer inte upp en inloggningsruta, utan inloggning måste ske separat i Mediaflow). 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: 'token',
client_id: '6e268b43',
client_secret: 'Ak9xCya0uC1JwNHdmIPV1SDq6HwQ8B',
refresh_token: 'gm5k7p7aS0iwIDPw2gcKAUnnLWkO2Dp',
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) */
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 */
noCropButton: false, /* om användaren ska beskära bilden */
allowSelectFormat: true, /* om användaren ska kunna välja beskärformat */
setAltText: false, /* om alt-texten ska kunna anges */
customAltText: 'egen...', /* ange en egen alt-text */
downloadFormat: 'fixed', /* 'fixed' (då anger man via downloadFormats vilka format man kan välja), 'mediaflow' (de nerladdningsformat man har angett i Mediaflow), 'original' (endast originalfilen) */
downloadFormats: [{id:0, name:'Poster', width:1280, height:720}], /* 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>

Parametrar i config-objektet

auth string Inloggningsmetod, Möjliga värden:
token - inloggning via en token som anges av client_id, client_secret och refresh_token
client_id string Används om auth = token
client_secret string Används om auth = token
refresh_token string Används om auth = token
locale string Språk, sv_SE (default) eller en_US
limitFileType string Kommaseparerad lista över tillåtna filändelser. Alla filer som inte matchar detta filtreras bort.
noCropButton bool Om bildfiler ska beskäras manuellt. Om den sätts till true så beskärs inte bildfiler utan orignalfilen hämtas. Default är false.
allowSelectFormat bool Om användaren ska få välja beskärformat från en lista. Annars måste man ange ett beskärformat med downloadFormats. Default är true.
setAltText bool Om alt-textfältet ska finnas med. Default är true.
forceAltText bool Om alt-textfältet är tvingande att fylla i. Default är false.
autosetAltText bool Om fältet alt-text ska fyllas i automatiskt utifrån vad som finns i Mediaflow (för närvarande från fältet Beskrivning i Mediaflow). Default är true.
customAltText string Här kan man ange en egen alt-text som är ifyllt som default
showDoneButton bool Om det ska visas en OK-knapp i gränssnittet. Om den sätts till false krävs det att det finns en annan knapp utanför gränssnittet som anropar metoden
clickDone().
hideUnsafeGDPR bool Filtrera bort filer som inte är godkända enligt GDPR. Påverkar inte filer som inte har någon GDPR-information satt. Default är false.
hideUnassignedGDPR bool Filtrera även bort filer som inte har någon GDPR-information satt. Default är false.
selectedFolder int Här kan man ange ett mapp-id som öppnas när vid start.
selectedFile int Här kan man ange en fil-id som markeras i mappen som man har angivet med selectedFolder.
downloadFormat string Hur beskärformat ska hanteras. Möjliga värden:
fixed - använd endast de som anges i downloadFormats
mediaflow - använd de beskärformat som finns angivna i Mediaflow
both - använd de beskärformat som finns angivna i Mediaflow och lägg till de som finns med i downloadFormats. 
original - använd alltid originalformatet
stream - gäller för mediafiler. Spara en stream-URL istället för en URL till en nedladdningsbar fil.
downloadFormats object array Lista över angivna nedladdningsformat (sparas alltid som JPEG. Varje format specificeras med:
name - namn på formatet i listan
width - bredd i pixlar
height - höjd i pixlar
permanentURL bool Om nedladdningsurlen ska vara tillfällig eller permanent. Default är false. 
success function En callback-funktion som anropas när användaren är färdig och gränssnittet förväntas tas bort. Den anropas med en parameter som är ett object med information om den valda filen.
events function En callback-funktion som anropas vid olika användarhändelser, exempelvis när en mapp visas, när en fil markeras osv. Funktionen ska ta emot två parametrar, ett händelsenamn som sträng samt ett händelseobjekt vars innehåll beror på vilken händelse som skett.

Metoder

clickDone() Motsvarar att klicka på "Infoga filen" i gränssnittet. Om showDoneButton sätts till false måste denna anropas manuellt.
showFolder(folderId, fileId)
Öppna en utvald mapp. Om fileId != null så markeras filen med det id:t om den finns i den mappen.