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)
https://five.epicollect.net/api/export/media/ec5-api-test?type=photo&format=project_thumb&name=logo.jpg
Here is the response of the following GET endpoint, to retrieve an answer original image: (Open in browser)
https://five.epicollect.net/api/export/media/ec5-api-test?type=photo&format=entry_original&name=768bb179-fd2c-87b1-ec20-86a9acfdc87a_1493303895.jpg
You can also get the image as a blob, useful when the project is private: (jsFiddle)
var mediaEndpoint = 'https://five.epicollect.net/api/export/media/ec5-api-test?';
​
 function _getEntries() {
   window.setTimeout(function() {
     $.ajax({
       url: 'https://five.epicollect.net/api/export/entries/ec5-api-test',
       type: 'GET',
       contentType: 'application/vnd.api+json',
       success: function(response) {
         var entries = response.data.entries;
         var images = [];
         var filename;
​
         $(response.data.entries).each(function(index, entry) {
           filename = entry.photo;
​
           _getMedia(mediaEndpoint + 'type=photo&format=entry_original&name=' + entry.photo)
         });
       },
       error: function(xhr, status, error) {
         console.log(xhr.responseText);
       }
     });
   }, 1000);
 }
​
 function _getMedia(fileUrl) {
​
   var myImage = document.querySelector('img');
​
   //uncomment and add the token to the headers if the project is private
   //var myHeaders = new Headers();
   //myHeaders.append("Authorization", 'Bearer ' + token);
   var myInit = {
     method: 'GET',
    // headers: myHeaders, //uncomment when project is private
     mode: 'cors',
     cache: 'default'
   };
​
   fetch(fileUrl, myInit).then(function(response) {
     return response.blob();
   }).then(function(myBlob) {
     var objectURL = URL.createObjectURL(myBlob);
     myImage.src = objectURL;
   });
 }
​
 _getEntries();
You can get the media files and dowload them to your server.
Here is an example using PHP and Guzzle (add your project credentials accordingly):
use GuzzleHttp\Exception\RequestException;
use GuzzleHttp\Client;
​
$tokenClient = new Client();
$tokenURL = $this->serverURL.'/api/oauth/token';
​
 //get token first
 try {
     $tokenResponse = $tokenClient->request('POST', $tokenURL, [
         'headers' => [
         'Content-Type' => 'application/vnd.api+json'
         ],
         'body' => json_encode([
             'grant_type' => 'client_credentials',
             'client_id' => $this->clientId,
             'client_secret' => $this->clientSecret
         ])
     ]);
​
     $body = $tokenResponse->getBody();
     $obj = json_decode($body);
     $token = $obj->access_token;
 } catch (RequestException $e) {
     //handle errors
     echo $e->getMessage();
     exit();
 }
​
 //get media files now
 $mediaURL = $this->serverURL.'/api/export/entries/'.$this->projectSlug;
​
 $mediaClient = new Client([
     'headers' => [
         'Authorization' => 'Bearer '.$token //this will last for 2 hours!
     ]
 ]);
​
 try {
     //Get all entries for main form
     $response = $mediaClient-> request('GET', $mediaURL);
     $entries = json_decode($response->getBody())->data-> entries;
​
     //loop all entries to find the file names
     foreach($entries as $entry) {
​
        //get the media file (need to look at the project structure)
         $filename = $entry->photo;
​
         //build the full resolution image url
         $params='?type=photo&format=entry_original&name=';
         $photoURL = $this->serverURL.$this->mediaEndpoint.$this->projectSlug.$params.$filename;
​
         //get media file and save to proper location
         //IMPORTANT: you server needs to have write access to the folder you are saving the files to
         $mediaClient->request('GET', $photoURL, ['sink' => {your_server_storage_path}.'/'.$filename]);
​
     }
 } catch (RequestException $e) {
     //handle errors
     echo $e-> getMessage();
     exit();
 }
Examples - Previous
Getting Branch Entries
Next - Examples
PyEpicollect
Last modified 3mo ago
Copy link