Getting Media
We set up a project called EC5 API Test. The project is public so anyone can perform a GET request to fetch its entries.
Here is the response of the following GET endpoint, to retrieve a project logo image: (Open in browser)
1
https://five.epicollect.net/api/export/media/ec5-api-test?type=photo&format=project_thumb&name=logo.jpg
Copied!
Here is the response of the following GET endpoint, to retrieve an answer original image: (Open in browser)
1
https://five.epicollect.net/api/export/media/ec5-api-test?type=photo&format=entry_original&name=768bb179-fd2c-87b1-ec20-86a9acfdc87a_1493303895.jpg
Copied!
1
var mediaEndpoint = 'https://five.epicollect.net/api/export/media/ec5-api-test?';
2
3
function _getEntries() {
4
window.setTimeout(function() {
5
$.ajax({
6
url: 'https://five.epicollect.net/api/export/entries/ec5-api-test',
7
type: 'GET',
8
contentType: 'application/vnd.api+json',
9
success: function(response) {
10
var entries = response.data.entries;
11
var images = [];
12
var filename;
13
14
$(response.data.entries).each(function(index, entry) {
15
filename = entry.photo;
16
17
_getMedia(mediaEndpoint + 'type=photo&format=entry_original&name=' + entry.photo)
18
});
19
},
20
error: function(xhr, status, error) {
21
console.log(xhr.responseText);
22
}
23
});
24
}, 1000);
25
}
26
27
function _getMedia(fileUrl) {
28
29
var myImage = document.querySelector('img');
30
31
//uncomment and add the token to the headers if the project is private
32
//var myHeaders = new Headers();
33
//myHeaders.append("Authorization", 'Bearer ' + token);
34
var myInit = {
35
method: 'GET',
36
// headers: myHeaders, //uncomment when project is private
37
mode: 'cors',
38
cache: 'default'
39
};
40
41
fetch(fileUrl, myInit).then(function(response) {
42
return response.blob();
43
}).then(function(myBlob) {
44
var objectURL = URL.createObjectURL(myBlob);
45
myImage.src = objectURL;
46
});
47
}
48
49
_getEntries();
Copied!
You can get the media files and dowload them to your server.
1
use GuzzleHttp\Exception\RequestException;
2
use GuzzleHttp\Client;
3
4
$tokenClient = new Client();
5
$tokenURL = $this->serverURL.'/api/oauth/token';
6
7
//get token first
8
try {
9
$tokenResponse = $tokenClient->request('POST', $tokenURL, [
10
'headers' => [
11
'Content-Type' => 'application/vnd.api+json'
12
],
13
'body' => json_encode([
14
'grant_type' => 'client_credentials',
15
'client_id' => $this->clientId,
16
'client_secret' => $this->clientSecret
17
])
18
]);
19
20
$body = $tokenResponse->getBody();
21
$obj = json_decode($body);
22
$token = $obj->access_token;
23
} catch (RequestException $e) {
24
//handle errors
25
echo $e->getMessage();
26
exit();
27
}
28
29
//get media files now
30
$mediaURL = $this->serverURL.'/api/export/entries/'.$this->projectSlug;
31
32
$mediaClient = new Client([
33
'headers' => [
34
'Authorization' => 'Bearer '.$token //this will last for 2 hours!
35
]
36
]);
37
38
try {
39
//Get all entries for main form
40
$response = $mediaClient-> request('GET', $mediaURL);
41
$entries = json_decode($response->getBody())->data-> entries;
42
43
//loop all entries to find the file names
44
foreach($entries as $entry) {
45
46
//get the media file (need to look at the project structure)
47
$filename = $entry->photo;
48
49
//build the full resolution image url
50
$params='?type=photo&format=entry_original&name=';
51
$photoURL = $this->serverURL.$this->mediaEndpoint.$this->projectSlug.$params.$filename;
52
53
//get media file and save to proper location
54
//IMPORTANT: you server needs to have write access to the folder you are saving the files to
55
$mediaClient->request('GET', $photoURL, ['sink' => {your_server_storage_path}.'/'.$filename]);
56
57
}
58
} catch (RequestException $e) {
59
//handle errors
60
echo $e-> getMessage();
61
exit();
62
}
Copied!
Last modified 2yr ago
Copy link