React 無樣式檔案上傳

10KB

輕量級

核心套件壓縮後小於 10KB。可進行樹搖優化以達到最佳大小。

TypeScript

以 TypeScript 撰寫，具有完整的型別定義。

零相依性

無執行時相依性。僅需要 React 作為對等相依性。

功能特色

🎨

無樣式設計

無內建 UI 元件。您可以完全控制外觀和感覺。打造您想要的上傳體驗。

📂

拖放功能

直覺的拖放檔案選擇，在拖曳時提供有效和無效檔案類型的視覺回饋。

📊

上傳進度

即時追蹤個別檔案進度和整體上傳進度。打造美觀的進度指示器。

✅

檔案驗證

內建檔案類型、大小和尺寸驗證。可新增自訂驗證規則以滿足您的特定需求。

☁️

雲端儲存

使用預簽名 URL 直接上傳至 S3、Google Cloud Storage、Azure Blob 等。無需伺服器代理。

🔄

分塊上傳

將大型檔案分割成塊以實現可靠的上傳。支援使用 tus 協定的可恢復上傳。

🖼️

圖片處理

在上傳前壓縮、調整大小和裁切圖片。自動修正 EXIF 方向問題。

📱

React Native

透過原生適配器在 React Native 中運作。Web 和行動應用程式使用相同的 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>
  );
}