API Documentation

import React, { useState } from 'react';

function SquishUploader() {
  const [saving, setSaving] = useState(false);
  const [result, setResult] = useState(null);

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

    const formData = new FormData();
    formData.append('image', file);
    formData.append('quality', '80');
    formData.append('format', 'webp');

    setSaving(true);
    try {
      const response = await fetch('https://api.squish.dev/api/v1/compress/single', {
        method: 'POST',
        headers: {
          'X-API-Key': 'sq_live_your_key_here',
        },
        body: formData,
      });

      const data = await response.json();
      setResult(data);
    } finally {
      setSaving(false);
    }
  };

  return (
    <div>
      <input type="file" accept="image/*" onChange={handleChange} />
      {saving && <p>Compressing...</p>}
      {result && (
        <div>
          <p>Savings: {result.savings}</p>
          {/* If you requested base64 output */}
          {result.image && (
            <img
              src={`data:image/webp;base64,${result.image}`}
              alt="Compressed"
            />
          )}
          {/* If you requested URL output (output=url) */}
          {result.url && (
            <img
              src={result.url}
              alt="Compressed from CDN"
            />
          )}
        </div>
      )}
    </div>
  );
}

export default SquishUploader;

import express from 'express';
import multer from 'multer';
import axios from 'axios';
import FormData from 'form-data';

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

app.post('/upload', upload.single('image'), async (req, res) => {
  if (!req.file) {
    return res.status(400).json({ error: 'No image provided' });
  }

  const form = new FormData();
  form.append('image', req.file.buffer, req.file.originalname);
  form.append('quality', '80');
  form.append('format', 'webp');
  form.append('output', 'url'); // get CDN URL instead of base64

  try {
    const response = await axios.post(
      'https://api.squish.dev/api/v1/compress/single',
      form,
      {
        headers: {
          'X-API-Key': process.env.SQUISH_API_KEY!,
          ...form.getHeaders(),
        },
      }
    );

    const data = response.data;

    // Store data.url (CDN URL) in your database, associate with user, etc.
    // await saveImageForUser(req.user.id, data.url);

    return res.json({
      success: true,
      cdnUrl: data.url,
      downloadUrl: data.downloadUrl,
      savings: data.savings,
    });
  } catch (err) {
    console.error(err);
    return res.status(500).json({ error: 'Failed to compress image' });
  }
});

app.listen(3000, () => {
  console.log('Server running on http://localhost:3000');
});