import { createClient } from '@elmapicms/js-sdk';
 
const client = createClient(
  'https://your-domain.com/api',
  'YOUR_API_TOKEN',
  'YOUR_PROJECT_UUID'
);
 
// Upload a file
const fileInput = document.querySelector('input[type="file"]');
const uploadedAsset = await client.uploadAsset(fileInput.files[0]);
 
// Upload with metadata
const uploadedAssetWithMetadata = await client.uploadAsset(fileInput.files[0], {
  alt: 'Image description',
  category: 'blog'
});

const fileInput = document.querySelector('input[type="file"]');
const formData = new FormData();
formData.append('file', fileInput.files[0]);
 
axios.post('https://your-domain.com/api/files', formData, {
    headers: {
        'Content-Type': 'multipart/form-data',
        'Authorization': 'Bearer YOUR_API_TOKEN', // Required - must have 'create' ability
        'project-id': 'YOUR_PROJECT_UUID'
    }
});

use Illuminate\Support\Facades\Http;
use Illuminate\Http\Client\Response;
 
$response = Http::withToken('YOUR_API_TOKEN')
    ->withHeaders([
        'project-id' => 'YOUR_PROJECT_UUID'
    ])
    ->attach('file', file_get_contents('path/to/your/file.jpg'), 'file.jpg')
    ->post('https://your-domain.com/api/files');

import React, { useState } from 'react';
 
function AssetUploader() {
  const [selectedFile, setSelectedFile] = useState(null);
 
  const handleFileChange = (event) => {
    setSelectedFile(event.target.files[0]);
  };
 
  const handleUpload = async () => {
    if (!selectedFile) return;
 
    const formData = new FormData();
    formData.append('file', selectedFile);
 
    try {
      const response = await fetch('https://your-domain.com/api/files', {
        method: 'POST',
        headers: {
          'Authorization': 'Bearer YOUR_API_TOKEN', // Required - must have 'create' ability
          'project-id': 'YOUR_PROJECT_UUID'
        },
        body: formData
      });
 
      if (!response.ok) {
        const errorData = await response.json();
        throw new Error(errorData.message || 'Upload failed');
      }
 
      const data = await response.json();
      console.log('Upload successful:', data);
    } catch (error) {
      console.error('Upload failed:', error);
    }
  };
 
  return (
    <div>
      <input type="file" onChange={handleFileChange} />
      <button onClick={handleUpload}>Upload</button>
    </div>
  );
}

<template>
  <div>
    <input type="file" @change="onFileSelected" />
    <button @click="uploadAsset">Upload</button>
  </div>
</template>
 
<script setup>
import { ref } from 'vue';
 
const selectedFile = ref(null);
 
const onFileSelected = (event) => {
  selectedFile.value = event.target.files[0];
};
 
const uploadAsset = async () => {
  if (!selectedFile.value) return;
 
  const formData = new FormData();
  formData.append('file', selectedFile.value);
 
  try {
    const response = await fetch('https://your-domain.com/api/files', {
      method: 'POST',
      headers: {
        'Authorization': 'Bearer YOUR_API_TOKEN', // Required - must have 'create' ability
        'project-id': 'YOUR_PROJECT_UUID'
      },
      body: formData
    });
 
    if (!response.ok) {
      const errorData = await response.json();
      throw new Error(errorData.message || 'Upload failed');
    }
 
    const data = await response.json();
    console.log('Upload successful:', data);
  } catch (error) {
    console.error('Upload failed:', error);
  }
};
</script>

curl -X POST "https://your-domain.com/api/files" \
     -H "Content-Type: multipart/form-data" \
     -H "Authorization: Bearer YOUR_API_TOKEN" \
     -H "project-id: YOUR_PROJECT_UUID" \
     -F "file=@/path/to/your/image.jpg"