Інтеграція Uploadcare для завантаження файлів на сайт

Інтеграція Uploadcare для завантаження файлів

Uploadcare — CDN з завантаженням файлів як сервіс. Файл завантажується прямо з браузера на сервери Uploadcare, минаючи ваш сервер. Бекенд отримує тільки UUID файлу — посилання на оригінал та всі похідні (ресайзи, конвертації, обрізки).

Основні можливості: завантаження з файлової системи, drag-and-drop, URL, Google Drive, Dropbox, камери. Вбудований редактор зображень. Обробка зображень через URL-параметри без додаткового коду.

Встановлення

npm install @uploadcare/react-uploader
# або vanilla JS віджет
npm install @uploadcare/file-uploader

Public key з дашборда Uploadcare — у змінні окружен ня:

VITE_UPLOADCARE_PUBLIC_KEY=demo

React-інтеграція

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 // байти
  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/*'}
    />
  )
}

Завантаження через API без віджета

Для кастомного UI — прямою завантаження через 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)
  })
}

Обробка зображень через URL

Uploadcare CDN URL підтримує потужні трансформації без додаткових запитів:

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/