Code Examples

Basic Upload

const formData = new FormData();
formData.append('image', fileInput.files[0]);

fetch('https://api.tonta.io/upload', {
  method: 'POST',
  headers: {
    'Authorization': 'Bearer YOUR_API_KEY'
  },
  body: formData
})
.then(response => response.json())
.then(data => {
  console.log('Upload successful:', data.url);
})
.catch(error => {
  console.error('Upload failed:', error);
});

import requests

url = "https://api.tonta.io/upload"
headers = {"Authorization": "Bearer YOUR_API_KEY"}

with open("image.jpg", "rb") as f:
    files = {"image": f}
    response = requests.post(url, headers=headers, files=files)
    
if response.status_code == 200:
    data = response.json()
    print(f"Upload successful: {data['url']}")
else:
    print(f"Upload failed: {response.text}")

curl -X POST "https://api.tonta.io/upload" \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -F "image=@/path/to/your/image.jpg"

React Component

import React, { useState } from 'react';

function ImageUpload() {
  const [uploading, setUploading] = useState(false);
  const [imageUrl, setImageUrl] = useState('');

  const handleUpload = async (event) => {
    const file = event.target.files[0];
    if (!file) return;

    setUploading(true);
    const formData = new FormData();
    formData.append('image', file);

    try {
      const response = await fetch('https://api.tonta.io/upload', {
        method: 'POST',
        headers: {
          'Authorization': 'Bearer YOUR_API_KEY'
        },
        body: formData
      });

      const data = await response.json();
      setImageUrl(data.url);
    } catch (error) {
      console.error('Upload failed:', error);
    } finally {
      setUploading(false);
    }
  };

  return (
    <div>
      <input type="file" onChange={handleUpload} accept="image/*" />
      {uploading && <p>Uploading...</p>}
      {imageUrl && <img src={imageUrl} alt="Uploaded" style={{maxWidth: '300px'}} />}
    </div>
  );
}

export default ImageUpload;

Node.js Express

const express = require('express');
const multer = require('multer');
const FormData = require('form-data');
const fetch = require('node-fetch');

const app = express();
const upload = multer({ storage: multer.memoryStorage() });

app.post('/upload', upload.single('image'), async (req, res) => {
  try {
    const formData = new FormData();
    formData.append('image', req.file.buffer, {
      filename: req.file.originalname,
      contentType: req.file.mimetype
    });

    const response = await fetch('https://api.tonta.io/upload', {
      method: 'POST',
      headers: {
        'Authorization': 'Bearer YOUR_API_KEY',
        ...formData.getHeaders()
      },
      body: formData
    });

    const data = await response.json();
    res.json({ success: true, url: data.url });
  } catch (error) {
    res.status(500).json({ success: false, error: error.message });
  }
});

app.listen(3000, () => {
  console.log('Server running on port 3000');
});

PHP Integration

<?php
$api_key = "YOUR_API_KEY";
$upload_url = "https://api.tonta.io/upload";

if ($_FILES['image']['error'] === UPLOAD_ERR_OK) {
    $curl = curl_init();
    
    curl_setopt_array($curl, [
        CURLOPT_URL => $upload_url,
        CURLOPT_POST => true,
        CURLOPT_HTTPHEADER => [
            "Authorization: Bearer $api_key"
        ],
        CURLOPT_POSTFIELDS => [
            'image' => new CURLFile($_FILES['image']['tmp_name'], 
                                    $_FILES['image']['type'], 
                                    $_FILES['image']['name'])
        ],
        CURLOPT_RETURNTRANSFER => true
    ]);
    
    $response = curl_exec($curl);
    $data = json_decode($response, true);
    
    if ($data['success']) {
        echo "Upload successful: " . $data['url'];
    } else {
        echo "Upload failed: " . $data['error'];
    }
    
    curl_close($curl);
}
?>

More Examples

Find more examples, SDKs, and integrations in our documentation.