Quick Start

Get up and running with Dropper in under 5 minutes. This guide will walk you through setting up Dropper in a React application.

Prerequisites

  • Node.js 16+ installed
  • A Dropper account (sign up at dropper.dev)
  • Your publishable API key

Step 1: Install Dropper

Install the React package:

npm install @dropper/react

Step 2: Get Your API Key

  1. Log in to your Dropper Dashboard
  2. Create a new app or select an existing one
  3. Copy your publishable key (starts with pk_dropper_)

Step 3: Add the Provider

Wrap your app with the DropperProvider:

// app/layout.tsx or app/providers.tsx
import { DropperProvider } from '@dropper/react'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <DropperProvider publishableKey={process.env.NEXT_PUBLIC_DROPPER_KEY!}>
          {children}
        </DropperProvider>
      </body>
    </html>
  )
}

Step 4: Create Your First Upload

Create a simple file upload component:

// components/FileUploader.tsx
'use client'

import { useDropper } from '@dropper/react'
import { useState } from 'react'

export function FileUploader() {
  const { client } = useDropper()
  const [uploading, setUploading] = useState(false)
  const [uploadedUrl, setUploadedUrl] = useState<string>()

  const handleUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0]
    if (!file) return

    setUploading(true)
    try {
      const result = await client.uploadFile(file)
      setUploadedUrl(result.url)
      console.log('File uploaded:', result)
    } catch (error) {
      console.error('Upload failed:', error)
    } finally {
      setUploading(false)
    }
  }

  return (
    <div>
      <input
        type="file"
        onChange={handleUpload}
        disabled={uploading}
      />
      {uploading && <p>Uploading...</p>}
      {uploadedUrl && (
        <div>
          <p>Upload successful!</p>
          <a href={uploadedUrl} target="_blank" rel="noopener noreferrer">
            View file
          </a>
        </div>
      )}
    </div>
  )
}

Step 5: Use the Component

Add the uploader to your page:

// app/page.tsx
import { FileUploader } from '@/components/FileUploader'

export default function Home() {
  return (
    <main>
      <h1>Upload a File</h1>
      <FileUploader />
    </main>
  )
}

Step 6: Test It Out

  1. Start your development server:

    npm run dev

  2. Open your browser to http://localhost:3000

  3. Select a file and watch it upload!

Next Steps

Now that you have a basic upload working, explore more features:

Add Progress Tracking

const [progress, setProgress] = useState(0)

const result = await client.uploadFile(file, {
  onProgress: (p) => setProgress(p),
})

Add File Validation

import { validateFiles } from '@dropper/react'

const errors = validateFiles([file], {
  accept: 'image/*',
  maxSize: 5 * 1024 * 1024, // 5MB
})

if (errors.length > 0) {
  alert(errors[0].message)
  return
}

Upload Multiple Files

import { UploadQueue } from '@dropper/core'

const queue = new UploadQueue(client)
await queue.addFiles(files, {
  maxConcurrent: 3,
  onProgress: (item) => console.log(`${item.file.name}: ${item.progress}%`),
})

Learn More

Need Help?