Легковесная
Основной пакет весит менее 10KB в сжатом виде. Поддерживает tree-shaking для оптимального размера.
TypeScript
Написана на TypeScript с полными определениями типов.
Без зависимостей
Нет runtime зависимостей. Требуется только React в качестве peer dependency.
Возможности
Headless дизайн
Никаких встроенных UI компонентов. Полный контроль над внешним видом. Создавайте именно тот интерфейс загрузки, который вам нужен.
Drag & Drop
Интуитивный выбор файлов перетаскиванием с визуальной индикацией валидных и невалидных типов файлов при перетаскивании.
Прогресс загрузки
Отслеживание прогресса в реальном времени для отдельных файлов и общего прогресса загрузки. Создавайте красивые индикаторы прогресса.
Валидация файлов
Встроенная валидация типов файлов, размера и размеров изображений. Добавляйте пользовательские правила валидации для ваших нужд.
Облачное хранилище
Загружайте напрямую в S3, Google Cloud Storage, Azure Blob и другие с использованием presigned URLs. Серверный прокси не требуется.
Чанковая загрузка
Разбивайте большие файлы на части для надежной загрузки. Поддержка возобновляемой загрузки с протоколом tus.
Обработка изображений
Сжимайте, изменяйте размер и обрезайте изображения перед загрузкой. Автоматически исправляет проблемы с EXIF ориентацией.
React Native
Работает в React Native с нативным адаптером. Одинаковый API для веб и мобильных приложений.
SSR совместимость
Бесшовная работа с Next.js, Remix и другими SSR фреймворками. Никаких проблем с гидратацией.
Быстрый старт
1. Установка
npm install @samithahansaka/dropup
2. Использование
import { useDropup } from '@samithahansaka/dropup';
function Uploader() {
const { files, actions, getDropProps, getInputProps } = useDropup({
accept: 'image/*',
upload: { url: '/api/upload' },
});
return (
<div {...getDropProps()}>
<input {...getInputProps()} />
<p>Drop files here</p>
{files.map(file => (
<div key={file.id}>
{file.name} - {file.progress}%
</div>
))}
<button onClick={() => actions.upload()}>Upload</button>
</div>
);
}