import { createClient } from '@elmapicms/js-sdk';
 
const client = createClient(
  'https://your-domain.com/api',
  'YOUR_API_TOKEN',
  'YOUR_PROJECT_UUID'
);
 
// List assets with filtering
const assets = await client.getAssets({
  paginate: 20,
  type: 'image',
  search: 'hero'
});

axios.get('https://your-domain.com/api/files', {
    params: {
        paginate: 20,
        type: 'image',
        search: 'hero'
    },
    headers: {
        'Accept': 'application/json',
        'Authorization': 'Bearer YOUR_API_TOKEN', // Required - must have 'read' ability
        'project-id': 'YOUR_PROJECT_UUID'
    }
});

use Illuminate\Support\Facades\Http;
 
$response = Http::withToken('YOUR_API_TOKEN')->withHeaders([
    'Accept' => 'application/json',
    'project-id' => 'YOUR_PROJECT_UUID'
])->get("https://your-domain.com/api/files", [
    'paginate' => 20,
    'type' => 'image',
    'search' => 'hero'
]);

import React, { useState, useEffect } from 'react';
 
function AssetList() {
  const [assets, setAssets] = useState([]);
 
  useEffect(() => {
    const fetchAssets = async () => {
      try {
        const params = new URLSearchParams({ paginate: 20, type: 'image' });
        const response = await fetch(`https://your-domain.com/api/files?${params}`, {
          method: 'GET',
          headers: {
            'Accept': 'application/json',
            'Authorization': 'Bearer YOUR_API_TOKEN', // Required - must have 'read' ability
            'project-id': 'YOUR_PROJECT_UUID'
          }
        });
 
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
 
        const data = await response.json();
        setAssets(data.data);
      } catch (error) {
        console.error('Error fetching assets:', error);
      }
    };
    fetchAssets();
  }, []);
 
  return (
    <ul>
      {assets.map(asset => (
        <li key={asset.uuid}>
          <img src={asset.thumbnail_url} alt={asset.filename} />
          {asset.filename}
        </li>
      ))}
    </ul>
  );
}

<template>
  <ul>
    <li v-for="asset in assets" :key="asset.uuid">
      <img :src="asset.thumbnail_url" :alt="asset.filename" />
      {{ asset.filename }}
    </li>
  </ul>
</template>
 
<script setup>
import { ref, onMounted } from 'vue';
 
const assets = ref([]);
 
onMounted(async () => {
  try {
    const params = new URLSearchParams({ paginate: 20, type: 'image' });
    const response = await fetch(`https://your-domain.com/api/files?${params}`, {
      method: 'GET',
      headers: {
        'Accept': 'application/json',
        'Authorization': 'Bearer YOUR_API_TOKEN', // Required - must have 'read' ability
        'project-id': 'YOUR_PROJECT_UUID'
      }
    });
 
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
 
    const data = await response.json();
    assets.value = data.data;
  } catch (error) {
    console.error('Error fetching assets:', error);
  }
});
</script>

curl -G "https://your-domain.com/api/files" \
     -d "paginate=20" \
     -d "type=image" \
     -d "search=hero" \
     -H "Accept: application/json" \
     -H "Authorization: Bearer YOUR_API_TOKEN" \
     -H "project-id: YOUR_PROJECT_UUID"