React SDK API Reference

Complete API reference for the easyCDN React SDK, including all components, props, and TypeScript types.

Dropzone

The main file upload component with drag-and-drop functionality. Handles file validation, upload progress, retry logic, and provides callbacks for upload events.

Signature

tsx

import { Dropzone } from '@easycdn/react'

<Dropzone
  publicKey="your-public-key"
  onUploadComplete={(uploadResult, file) => {
    // Handle completion
  }}
/>

Example: Basic usage

tsx

import { Dropzone } from '@easycdn/react'

export default function App() {
  return (
    <Dropzone
      publicKey="your-public-key"
      onUploadComplete={({ tempId, previewUrl, expiresAt }) => {
        console.log('Upload complete:', { tempId, previewUrl, expiresAt })
        // Send tempId to your backend to persist the file
      }}
    />
  )
}

Example: With file type restrictions

tsx

<Dropzone
  publicKey="your-public-key"
  acceptedFileTypes={['image/jpeg', 'image/png', 'image/webp']}
  maxSize={1000 * 1000 * 5} // 5MB
  maxFiles={3}
  onUploadComplete={({ tempId }) => {
    // show preview in your app & persist
  }}
/>

Example: With preview and custom styling

tsx

<Dropzone
  publicKey="your-public-key"
  showPreview={true}
  compact={false}
  theme="dark"
  className="my-custom-class"
  clearAfter={10000}
  onUploadComplete={({ tempId, previewUrl }) => {
    // show preview in your app & persist
  }}
  onAllUploadsComplete={() => {
    console.log('All uploads finished!')
  }}
/>

Example: With backend persistence

tsx

import { Dropzone } from '@easycdn/react'

export default function App() {
  async function handleUploadComplete({ tempId }: UploadResult) {
    // Call your backend to persist the temporary file
    const response = await fetch('/api/persist-file', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ tempId })
    })

    const { asset } = await response.json()
    console.log('Persisted asset URL:', asset.url)
  }

  return (
    <Dropzone
      publicKey="your-public-key"
      onUploadComplete={handleUploadComplete}
    />
  )
}

Parameters

publicKey:stringrequired - Your easyCDN public API key

onUploadComplete:(uploadResult: UploadResult, file?: File) => void - Called when a single file upload completes successfully

acceptedFileTypes:string[] - Array of accepted MIME types or extensions. Default: undefined

maxSize:number - Maximum file size in bytes. Default: 1000 * 1000 * 1000 * 15 (15GB)

maxFiles:number - Maximum number of files allowed. Default: 10

showPreview:boolean - Show image previews in file list. Default: false

theme:'light' | 'dark' | 'auto' - Force light/dark theme or respect parent. Default: 'auto'

compact:boolean - Use compact file list layout. Default: false

clearAfter:number - Auto-clear completed uploads after milliseconds. Default: 5000

maxRetries:number - Maximum retry attempts for failed uploads. Default: 3

className:string - Additional CSS classes. Default: undefined

onAllUploadsComplete:() => void - Called when all queued uploads have finished (success or error)

baseUrl:string - Custom API endpoint URL. Usually not needed.

projectId:stringoptional - Optional project ID for multi-project setups. Usually not needed.

Auth & Basic Usage