UploadThing File Upload Service

Note: This is a client-side demo. For production use, implement the server-side solution below.
Client-side limitation: UploadThing requires server-side implementation for URL uploads. The uploadFilesFromUrl method must be called from your backend server.

🚀 Proper Server-Side Implementation

To upload files from URLs, you need to implement this on your Node.js/Next.js server:

Create API endpoint: /api/upload-from-url

1. Install UploadThing Server Package

npm install uploadthing

2. Create API Route (Next.js App Router)

// app/api/upload-from-url/route.ts
import { UTApi } from "uploadthing/server";
import { NextRequest, NextResponse } from "next/server";

const utapi = new UTApi({
  apiKey: "sk_live_50e45e97721e8ae073e8f6d1c593f4a55849f801069e5295cb0ade22b786c387"
});

export async function POST(request: NextRequest) {
  try {
    const { fileUrl } = await request.json();

    if (!fileUrl) {
      return NextResponse.json(
        { error: "File URL is required" }, 
        { status: 400 }
      );
    }

    // Upload file from URL using UTApi
    const result = await utapi.uploadFilesFromUrl(fileUrl);

    if (result.data) {
      return NextResponse.json({
        success: true,
        url: result.data.url,
        key: result.data.key,
        name: result.data.name,
        size: result.data.size
      });
    } else {
      return NextResponse.json(
        { error: result.error?.message || "Upload failed" }, 
        { status: 500 }
      );
    }
  } catch (error) {
    console.error("Upload error:", error);
    return NextResponse.json(
      { error: "Internal server error" }, 
      { status: 500 }
    );
  }
}

3. Update Client-Side Code

// Upload function for your frontend
async function uploadFromUrl(fileUrl) {
  try {
    const response = await fetch('/api/upload-from-url', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ fileUrl })
    });

    const result = await response.json();

    if (result.success) {
      console.log('Upload successful:', result.url);
      return result.url;
    } else {
      throw new Error(result.error);
    }
  } catch (error) {
    console.error('Upload failed:', error);
    throw error;
  }
}

4. Alternative: Pages Router

// pages/api/upload-from-url.ts
import { UTApi } from "uploadthing/server";
import type { NextApiRequest, NextApiResponse } from "next";

const utapi = new UTApi({
  apiKey: "sk_live_50e45e97721e8ae073e8f6d1c593f4a55849f801069e5295cb0ade22b786c387"
});

export default async function handler(
  req: NextApiRequest, 
  res: NextApiResponse
) {
  if (req.method !== 'POST') {
    return res.status(405).json({ error: 'Method not allowed' });
  }

  try {
    const { fileUrl } = req.body;

    if (!fileUrl) {
      return res.status(400).json({ error: 'File URL is required' });
    }

    const result = await utapi.uploadFilesFromUrl(fileUrl);

    if (result.data) {
      res.status(200).json({
        success: true,
        url: result.data.url,
        key: result.data.key,
        name: result.data.name,
        size: result.data.size
      });
    } else {
      res.status(500).json({ 
        error: result.error?.message || 'Upload failed' 
      });
    }
  } catch (error) {
    console.error('Upload error:', error);
    res.status(500).json({ error: 'Internal server error' });
  }
}

5. Express.js Implementation

// server.js or upload route
const express = require('express');
const { UTApi } = require('uploadthing/server');

const utapi = new UTApi({
  apiKey: "sk_live_50e45e97721e8ae073e8f6d1c593f4a55849f801069e5295cb0ade22b786c387"
});

app.post('/api/upload-from-url', async (req, res) => {
  try {
    const { fileUrl } = req.body;

    if (!fileUrl) {
      return res.status(400).json({ error: 'File URL is required' });
    }

    const result = await utapi.uploadFilesFromUrl(fileUrl);

    if (result.data) {
      res.json({
        success: true,
        url: result.data.url,
        key: result.data.key,
        name: result.data.name,
        size: result.data.size
      });
    } else {
      res.status(500).json({ 
        error: result.error?.message || 'Upload failed' 
      });
    }
  } catch (error) {
    console.error('Upload error:', error);
    res.status(500).json({ error: 'Internal server error' });
  }
});