Build a File Upload Feature in 10 Minutes with EasySend API

Adding file upload to your web application usually means setting up storage infrastructure, managing uploads and building download pages. With the EasySend API, you can add a complete file sharing feature in 10 minutes with zero backend changes.

What You Will Build

A simple HTML form where users select a file, upload it to EasySend via the API and get a shareable link. No server-side code needed (the API call goes directly from the browser).

Step 1: HTML Form (2 minutes)

<form id="upload-form">
  <input type="file" id="file-input" multiple>
  <button type="submit">Upload and Share</button>
  <div id="result"></div>
</form>

Step 2: JavaScript Upload (5 minutes)

document.getElementById('upload-form').addEventListener('submit', async (e) => {
  e.preventDefault();
  const files = document.getElementById('file-input').files;
  if (!files.length) return;

  const formData = new FormData();
  for (const file of files) {
    formData.append('files[]', file);
  }

  const result = document.getElementById('result');
  result.textContent = 'Uploading...';

  try {
    const response = await fetch('https://easysend.co/api/v1/upload', {
      method: 'POST',
      body: formData
    });

    if (!response.ok) throw new Error('Upload failed');

    const data = await response.json();
    const shareUrl = 'https://easysend.co' + data.share_url;

    result.innerHTML = 'Share link: <a href="' + shareUrl + '">'
      + shareUrl + '</a>';
  } catch (err) {
    result.textContent = 'Error: ' + err.message;
  }
});

That is it. No API key, no OAuth, no server configuration. The upload goes directly from the user's browser to the EasySend API.

Step 3: Add Progress Tracking (3 minutes)

For large files, add an upload progress bar using XMLHttpRequest:

function uploadWithProgress(files, onProgress) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    const formData = new FormData();
    for (const file of files) formData.append('files[]', file);

    xhr.upload.onprogress = (e) => {
      if (e.lengthComputable) onProgress(Math.round(e.loaded / e.total * 100));
    };
    xhr.onload = () => resolve(JSON.parse(xhr.responseText));
    xhr.onerror = () => reject(new Error('Upload failed'));

    xhr.open('POST', 'https://easysend.co/api/v1/upload');
    xhr.send(formData);
  });
}

Error Handling

The API returns standard HTTP status codes:

• 200 - upload successful, response contains share_url and upload_token
• 400 - no files provided or invalid request
• 413 - file exceeds 1GB size limit (free tier)
• 429 - rate limited, check Retry-After header
• 500 - server error, retry with exponential backoff

Managing Uploads

The API response includes an upload_token. Save this if you want to manage the upload later:

// Add files to existing bundle
fetch('https://easysend.co/api/v1/upload/' + uploadToken, {
  method: 'POST',
  body: newFormData
});

// Delete a file
fetch('https://easysend.co/api/v1/file/' + fileId, {
  method: 'DELETE',
  headers: { 'Authorization': 'Bearer ' + uploadToken }
});

Going Further

• Add a drag-and-drop zone with the React component tutorial
• Use the embeddable widget for a one-script-tag solution
• Add encryption by passing encrypted=1 in the form data
• Full API reference at /developer-api