Uploadcare File Upload Integration
Uploadcare is a CDN with file upload as a service. Files upload directly from browser to Uploadcare servers, bypassing your server. Backend receives only file UUID — link to original and all derivatives (resizes, conversions, crops).
Main features: upload from file system, drag-and-drop, URL, Google Drive, Dropbox, camera. Built-in image editor. Image processing via URL parameters without extra code.
Installation
npm install @uploadcare/react-uploader
# or vanilla JS widget
npm install @uploadcare/file-uploader
Public key from Uploadcare dashboard — to environment variables:
VITE_UPLOADCARE_PUBLIC_KEY=demo
React integration
import { FileUploaderRegular } from '@uploadcare/react-uploader'
import '@uploadcare/react-uploader/core.css'
interface UploadedFile {
uuid: string
cdnUrl: string
name: string
size: number
mimeType: string
}
interface UploaderProps {
onUpload: (file: UploadedFile) => void
accept?: string
maxFileSize?: number // bytes
multiple?: boolean
}
function FileUploader({ onUpload, accept, maxFileSize, multiple = false }: UploaderProps) {
return (
<FileUploaderRegular
pubkey={import.meta.env.VITE_UPLOADCARE_PUBLIC_KEY}
multiple={multiple}
accept={accept}
maxLocalFileSizeBytes={maxFileSize}
onFileUploadSuccess={(file) => {
onUpload({
uuid: file.uuid,
cdnUrl: file.cdnUrl,
name: file.name ?? '',
size: file.size ?? 0,
mimeType: file.mimeType ?? '',
})
}}
onFileUploadFailed={(file) => {
console.error('Upload failed:', file.errors)
}}
imgOnly={accept === 'image/*'}
/>
)
}
Upload via API without widget
For custom UI — direct upload via REST API:
interface UploadResult {
uuid: string
cdnUrl: string
}
async function uploadFile(
file: File,
publicKey: string,
onProgress?: (progress: number) => void
): Promise<UploadResult> {
const formData = new FormData()
formData.append('UPLOADCARE_PUB_KEY', publicKey)
formData.append('UPLOADCARE_STORE', '1')
formData.append('file', file)
const xhr = new XMLHttpRequest()
return new Promise((resolve, reject) => {
xhr.upload.addEventListener('progress', (e) => {
if (e.lengthComputable && onProgress) {
onProgress(Math.round((e.loaded / e.total) * 100))
}
})
xhr.addEventListener('load', () => {
if (xhr.status === 200) {
const data = JSON.parse(xhr.responseText)
resolve({
uuid: data.file,
cdnUrl: `https://ucarecdn.com/${data.file}/-/format/auto/-/quality/smart/`
})
} else {
reject(new Error('Upload failed'))
}
})
xhr.addEventListener('error', () => reject(new Error('Network error')))
xhr.open('POST', 'https://upload.uploadcare.com/base/')
xhr.send(formData)
})
}
Image processing via URL
Uploadcare CDN URL supports powerful transformations without extra requests:
https://ucarecdn.com/{UUID}/-/resize/800x600/-/quality/smart/-/format/webp/
https://ucarecdn.com/{UUID}/-/scale_crop/300x300/center/-/quality/85/
https://ucarecdn.com/{UUID}/-/effect/grayscale/