10KB
경량
압축된 코어 패키지는 10KB 미만입니다. 최적의 크기를 위해 트리 쉐이킹 가능합니다.
TS
TypeScript
포괄적인 타입 정의를 갖춘 TypeScript로 작성되었습니다.
0
의존성 없음
런타임 의존성이 없습니다. 피어 의존성으로 React만 필요합니다.
기능
🎨
헤드리스 디자인
내장된 UI 컴포넌트가 없습니다. 모양과 느낌을 완전히 제어할 수 있습니다. 원하는 대로 업로드 경험을 구축하세요.
📂
드래그 앤 드롭
드래그 중 유효한 파일 유형과 무효한 파일 유형에 대한 시각적 피드백을 제공하는 직관적인 드래그 앤 드롭 파일 선택입니다.
📊
업로드 진행률
개별 파일 및 전체 업로드 진행률을 실시간으로 추적합니다. 멋진 진행률 표시기를 구축하세요.
✅
파일 유효성 검사
파일 유형, 크기 및 치수에 대한 내장 유효성 검사입니다. 특정 요구 사항에 맞는 사용자 정의 유효성 검사 규칙을 추가하세요.
☁️
클라우드 스토리지
사전 서명된 URL을 사용하여 S3, Google Cloud Storage, Azure Blob 등에 직접 업로드합니다. 서버 프록시가 필요 없습니다.
🔄
청크 업로드
대용량 파일을 청크로 분할하여 안정적으로 업로드합니다. 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>
);
}