What's Included
File Uploads
Direct uploads with progress tracking
CDN Delivery
Global edge caching for fast delivery
Image Optimization
Automatic resizing and format conversion
Signed URLs
Time-limited secure access links
File Management
List, delete, and organize files
Download URLs
Force download with custom filenames
Quick Start
Upload files with the pre-built component:
import { FileUpload, useStorage } from '@sylphx/sdk/react'
function UploadPage() {
return (
<FileUpload
accept="image/*"
maxSize={5 * 1024 * 1024} // 5MB
onUpload={(files) => {
console.log('Uploaded:', files[0].url)
}}
/>
)
}
// Or use the hook directly
function CustomUpload() {
const { upload, isUploading, progress } = useStorage()
const handleFile = async (file: File) => {
const url = await upload(file, { path: 'avatars/' })
console.log('URL:', url)
}
return (
<div>
<input
type="file"
onChange={(e) => e.target.files?.[0] && handleFile(e.target.files[0])}
disabled={isUploading}
/>
{isUploading && <span>Uploading: {progress}%</span>}
</div>
)
}Direct Upload
Files upload directly to storage without going through your server, reducing latency and bandwidth costs.
Pre-built Components
| Property | Type | Description |
|---|---|---|
<FileUpload /> | Component | Drag-and-drop upload zone |
<ImageUpload /> | Component | Image-specific with preview |
<AvatarUpload /> | Component | Circular avatar upload |
<FileList /> | Component | Display uploaded files |
<ImageGallery /> | Component | Grid of uploaded images |
import {
FileUpload,
ImageUpload,
AvatarUpload,
FileList,
} from '@sylphx/sdk/react'
// General file upload
<FileUpload
accept="*"
maxFiles={5}
onUpload={(files) => console.log(files)}
/>
// Image upload with preview
<ImageUpload
accept="image/jpeg,image/png"
maxSize={10 * 1024 * 1024}
onUpload={(image) => console.log(image.url)}
/>
// Avatar with cropping
<AvatarUpload
current={user.avatar}
onUpload={(url) => updateProfile({ avatar: url })}
/>
// List uploaded files
<FileList path="documents/" onDelete={(file) => deleteFile(file.key)} />React Hooks
import { useStorage, useFileUpload } from '@sylphx/sdk/react'
// Full-featured storage hook with progress tracking
function FileManager() {
const {
upload,
uploadAvatar,
deleteFile,
getUrl,
isUploading,
progress,
bytesUploaded,
bytesTotal,
uploadError,
} = useStorage()
const handleUpload = async (file: File) => {
const url = await upload(file, { path: 'documents/' })
console.log('Uploaded:', url)
}
return (
<div>
<input type="file" onChange={(e) => handleUpload(e.target.files[0])} />
{isUploading && <progress value={progress} max={100} />}
</div>
)
}
// Simplified hook with validation
function ValidatedUpload() {
const { upload, isUploading, progress, error, url } = useFileUpload({
accept: ['image/*'],
maxSize: 5 * 1024 * 1024, // 5MB
onSuccess: (url) => console.log('Success:', url),
onError: (err) => console.error('Error:', err),
})
return <input type="file" onChange={(e) => upload(e.target.files[0])} />
}| Property | Type | Description |
|---|---|---|
useStorage() | Hook | Upload, delete, and manage files with progress tracking |
useFileUpload() | Hook | Simplified upload with file type and size validation |
Server-Side Usage
Access storage in API routes:
app/api/files/route.ts
import { storage } from '@sylphx/sdk/server'
export async function POST(req: Request) {
const formData = await req.formData()
const file = formData.get('file') as File
// Upload file
const result = await storage.upload(file, {
path: 'uploads/',
public: true,
})
return Response.json({ url: result.url })
}
export async function DELETE(req: Request) {
const { key } = await req.json()
// Delete file
await storage.delete(key)
return Response.json({ success: true })
}