React client for Uploadista
React hooks and components for the Uploadista unified client. Provides a complete solution for file uploads and flow execution with WebSocket support, progress tracking, and comprehensive state management.
``bash`
pnpm add @uploadista/react @uploadista/client @uploadista/core
- Upload Management: Single and multi-file upload with progress tracking
- Flow Execution: Execute processing flows with real-time WebSocket updates
- Drag & Drop: Built-in drag-and-drop support with file validation
- State Management: Comprehensive state management for uploads and flows
- Performance Metrics: Track upload performance, speed, and network conditions
- TypeScript: Full TypeScript support with type inference
Wrap your app with the UploadProvider to provide upload client configuration:
`tsx
import { UploadProvider } from '@uploadista/react';
function App() {
return (
storageId="my-storage"
chunkSize={1024 * 1024} // 1MB chunks
storeFingerprintForResuming={true}
onEvent={(event) => {
console.log('Upload event:', event);
}}
>
);
}
`
`tsx
import { useUploadContext, useUpload } from '@uploadista/react';
function SingleFileUploader() {
const uploadClient = useUploadContext();
const upload = useUpload(uploadClient, {
onSuccess: (result) => console.log('Upload complete:', result),
onError: (error) => console.error('Upload failed:', error),
onProgress: (progress) => console.log('Progress:', progress + '%'),
});
const handleFileSelect = (e: React.ChangeEvent
const file = e.target.files?.[0];
if (file) upload.upload(file);
};
return (
$3
tsx
import { useUploadContext, useMultiUpload } from '@uploadista/react';function MultiFileUploader() {
const uploadClient = useUploadContext();
const multiUpload = useMultiUpload(uploadClient, {
maxConcurrent: 3,
onComplete: (results) => {
console.log(
${results.successful.length}/${results.total} successful);
},
}); const handleFilesSelect = (e: React.ChangeEvent) => {
if (e.target.files) {
multiUpload.addFiles(Array.from(e.target.files));
multiUpload.startAll();
}
};
return (
Progress: {multiUpload.state.progress}%
{multiUpload.state.uploading} uploading,
{multiUpload.state.successful} successful,
{multiUpload.state.failed} failed
{multiUpload.items.map((item) => (
{item.file.name}: {item.state.status} ({item.state.progress}%)
))}
);
}
`$3
tsx
import { useUploadContext, useDragDrop, useMultiUpload } from '@uploadista/react';function DragDropUploader() {
const uploadClient = useUploadContext();
const multiUpload = useMultiUpload(uploadClient);
const dragDrop = useDragDrop({
accept: ['image/*', '.pdf'],
maxFiles: 5,
maxFileSize: 10 1024 1024, // 10MB
onFilesReceived: (files) => {
multiUpload.addFiles(files);
multiUpload.startAll();
},
onValidationError: (errors) => {
console.error('Validation errors:', errors);
},
});
return (
style={{
border: dragDrop.state.isDragging ? '2px dashed #007bff' : '2px dashed #ccc',
padding: '2rem',
textAlign: 'center',
}}
onClick={dragDrop.openFilePicker}
>
{dragDrop.state.isDragging ? (
Drop files here...
) : (
Drag files here or click to select
)} {dragDrop.state.errors.length > 0 && (
{dragDrop.state.errors.map((error, i) => (
{error}
))}
)}
$3
tsx
import { SimpleUploadZone } from '@uploadista/react';function SimpleUploader() {
return (
accept={['image/*']}
maxFileSize={5 1024 1024}
onUploadStart={(files) => console.log('Starting uploads:', files.length)}
onValidationError={(errors) => console.error('Validation errors:', errors)}
multiUploadOptions={{
maxConcurrent: 3,
onComplete: (results) => console.log('All uploads complete:', results),
}}
/>
);
}
`$3
tsx
import { useFlowClient, useFlow } from '@uploadista/react';function FlowExecutor() {
const flowClient = useFlowClient({
baseUrl: 'https://api.example.com',
storageId: 'my-storage',
chunkSize: 1024 * 1024,
storeFingerprintForResuming: true,
onEvent: (event) => console.log('Flow event:', event),
});
const flow = useFlow(flowClient, {
flowId: 'image-processing',
storageId: 'my-storage',
autoConnectWebSocket: true,
onSuccess: (result) => console.log('Flow completed:', result),
onError: (error) => console.error('Flow failed:', error),
});
const handleExecute = () => {
flow.executeFlow({
image: 'photo.jpg',
quality: 80,
});
};
return (
{flow.state.status === 'running' &&
Processing...}
{flow.state.status === 'success' && Success!}
{flow.state.error && Error: {flow.state.error.message}}
);
}
`$3
tsx
import { useUploadMetrics } from '@uploadista/react';function UploadMetricsDisplay() {
const metrics = useUploadMetrics({
speedCalculationInterval: 1000,
onMetricsUpdate: (metrics) => {
console.log(
Speed: ${metrics.currentSpeed / 1024} KB/s);
},
}); // Track file uploads
React.useEffect(() => {
// When starting an upload
metrics.startFileUpload('file-1', 'photo.jpg', 1024 * 1024);
// When progress updates
metrics.updateFileProgress('file-1', 512 * 1024);
// When upload completes
metrics.completeFileUpload('file-1');
}, []);
return (
Overall Progress: {metrics.metrics.progress}%
Speed: {(metrics.metrics.currentSpeed / 1024).toFixed(1)} KB/s
Files: {metrics.metrics.completedFiles}/{metrics.metrics.totalFiles} {metrics.fileMetrics.map((file) => (
{file.filename}: {file.progress}%
))}
);
}
`API Reference
$3
#### Upload Hooks
-
- Create a unified upload/flow client
- useUpload(client, options) - Manage single file upload
- useMultiUpload(client, options) - Manage multiple file uploads
- useUploadMetrics(options) - Track upload performance metrics#### Flow Hooks
-
useUploadFlow(client, options) - Execute and manage flows#### UI Hooks
-
useDragDrop(options) - Drag and drop functionality
- useUploadContext() - Access upload client from context$3
#### Providers
-
- Context provider for upload client#### Upload Components
-
- Headless upload zone with render props
- - Pre-styled upload zone
- - Headless upload list with render props
- - Pre-styled upload list item$3
-
formatFileSize(bytes) - Format bytes to human-readable size
- formatSpeed(bytesPerSecond) - Format speed to human-readable format
- formatDuration(milliseconds) - Format duration to human-readable format
- validateFileType(file, accept) - Validate file against accepted types
- isImageFile(file) - Check if file is an image
- isVideoFile(file) - Check if file is a video
- isAudioFile(file) - Check if file is audio
- isDocumentFile(file) - Check if file is a document
- createFilePreview(file) - Create preview URL for file
- revokeFilePreview(url)` - Clean up preview URLMIT