EC5 Media API Demo

Testing EC5 API

by ParanoidAndroid77

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<img id="img">

JavaScript

const authEndpoint = 'https://five.epicollect.net/api/oauth/token';
const entriesEndpoint = 'https://five.epicollect.net/api/export/entries/ec5-media-api-demo';
const mediaEndpoint = 'https://five.epicollect.net/api/export/media/ec5-media-api-demo';

async function getToken() {
  const response = await fetch(authEndpoint, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    },
    body: new URLSearchParams({
      grant_type: 'client_credentials',
      client_id: '4945',
      client_secret: 'djCKm1JGxDJ2zwjr10I4WNkpl7QpvsAbGwimMnXr'
    })
  });
  const data = await response.json();
  return data.access_token;
}

async function getEntries() {
  try {
    const token = await getToken();
    const response = await fetch(entriesEndpoint, {
      headers: {
        'Authorization': `Bearer ${token}`,
        'Content-Type': 'application/vnd.api+json'
      }
    });
    const data = await response.json();
    processEntries(data.data.entries, token);
  } catch (error) {
    console.error('Error fetching entries:', error);
  }
}

function processEntries(entries, token) {
  entries.forEach(entry => {
    const filename = entry.photo;
    getMedia(`${mediaEndpoint}?type=photo&format=entry_original&name=${filename}`, token);
  });
}

async function getMedia(fileUrl, token) {
  try {
    const response = await fetch(fileUrl, {
      headers: {
        'Authorization': `Bearer ${token}`
      },
      mode: 'cors'
    });
    const blob = await response.blob();
    const objectURL = URL.createObjectURL(blob);
    const image = new Image();
    image.src = objectURL;
    document.body.appendChild(image);
  } catch (error) {
    console.error('Error fetching media:', error);
  }
}

getEntries();