ප්‍රධාන අන්තර්ගතයට පනින්න

Dropup සමඟ ආරම්භ කරමු

Dropup යනු සියලුම සංකීර්ණ upload logic හසුරුවන අතරම ඔබගේ UI පිළිබඳ සම්පූර්ණ පාලනයක් ලබා දෙන සැහැල්ලු, headless React ගොනු upload library එකකි.

Dropup ඇයි?​

  • 🪶 සැහැල්ලු - Core එක ~10KB gzipped පමණි
  • 🎨 Headless - Hooks-based API සමඟ ඔබගේ UI පිළිබඳ සම්පූර්ණ පාලනය
  • 📁 Drag & Drop - Built-in drag-and-drop සහාය
  • 📊 Progress Tracking - සෑම ගොනුවක් සඳහා real-time upload progress
  • 🔄 Chunked Uploads - විශ්වාසදායක uploads සඳහා විශාල ගොනු බෙදීම
  • ☁️ Cloud Ready - S3, GCS, සහ Azure සඳහා pre-built helpers
  • 🖼️ Image Processing - Built-in compression සහ preview generation
  • 📱 Cross-Platform - React DOM සහ React Native සමඟ ක්‍රියා කරයි
  • 🔒 TypeScript - සම්පූර්ණ TypeScript සහාය

ස්ථාපනය​

ඔබ කැමති package manager භාවිතයෙන් Dropup ස්ථාපනය කරන්න:

npm install @samithahansaka/dropup

Peer Dependencies​

Dropup සඳහා React 16.8 හෝ ඊට වැඩි අවශ්‍යයි (hooks සහාය සඳහා):

npm install react

ඉක්මන් ආරම්භය​

ඔබව ආරම්භ කිරීමට සරල උදාහරණයක්:

import { useDropup } from '@samithahansaka/dropup';

function FileUploader() {
  const {
    files,
    state,
    actions,
    getDropProps,
    getInputProps
  } = useDropup({
    accept: 'image/*',
    maxSize: 10 * 1024 * 1024, // 10MB
    multiple: true,
  });

  return (
    <div>
      {/* Drop zone */}
      <div
        {...getDropProps()}
        style={{
          border: state.isDragging ? '2px dashed blue' : '2px dashed gray',
          padding: 40,
          textAlign: 'center',
          cursor: 'pointer',
        }}
      >
        <input {...getInputProps()} />
        <p>ගොනු මෙතැනට ඇද දමන්න, හෝ තේරීමට ක්ලික් කරන්න</p>
      </div>

      {/* ගොනු ලැයිස්තුව */}
      <ul>
        {files.map((file) => (
          <li key={file.id}>
            {file.name} - {file.status}
            {file.status === 'uploading' && ` (${file.progress}%)`}
            <button onClick={() => actions.remove(file.id)}>ඉවත් කරන්න</button>
          </li>
        ))}
      </ul>

      {/* Upload බොත්තම */}
      {files.length > 0 && (
        <button onClick={() => actions.upload()}>
          සියල්ල උඩුගත කරන්න
        </button>
      )}
    </div>
  );
}

මූලික සංකල්ප​

1. useDropup Hook​

useDropup hook යනු ප්‍රධාන ඇතුළු වීමේ ස්ථානයයි. එය ඔබගේ file upload UI ගොඩනැගීමට අවශ්‍ය සියල්ල ආපසු ලබා දෙයි:

const {
  files,           // Status, progress ආදිය සමඟ ගොනු array එක
  state,           // සමස්ත state (isDragging, isUploading, progress)
  actions,         // Upload, remove, cancel, reset කිරීමට methods
  getDropProps,    // ඔබගේ drop zone element සඳහා props
  getInputProps,   // සැඟවුණු file input සඳහා props
} = useDropup(options);

2. File Objects​

files array එකේ සෑම ගොනුවකම අඩංගු වන්නේ:

{
  id: string;          // අනන්‍ය හඳුනාගැනීම
  file: File;          // මුල් File object
  name: string;        // ගොනු නාමය
  size: number;        // Bytes වලින් ගොනු ප්‍රමාණය
  type: string;        // MIME type
  preview?: string;    // Preview URL (images සඳහා)
  status: 'idle' | 'uploading' | 'complete' | 'error';
  progress: number;    // Upload progress (0-100)
  error?: Error;       // Upload අසාර්ථක වුවහොත් Error object
  uploadedUrl?: string; // සාර්ථක upload එකෙන් පසු URL
}

3. Actions​

actions object uploads පාලනය කිරීමට methods ලබා දෙයි:

actions.upload(fileIds?)    // Upload ආරම්භ කරන්න (සියල්ල හෝ නිශ්චිත ගොනු)
actions.cancel(fileId?)     // Upload(s) අවලංගු කරන්න
actions.remove(fileId)      // ලැයිස්තුවෙන් ගොනුවක් ඉවත් කරන්න
actions.reset()             // සියලුම ගොනු හිස් කරන්න
actions.retry(fileIds?)     // අසාර්ථක uploads නැවත උත්සාහ කරන්න

Uploads Configure කිරීම​

සත්‍ය uploads සක්‍රීය කිරීමට, upload configuration එකක් ලබා දෙන්න:

const { files } = useDropup({
  upload: {
    url: '/api/upload',
    method: 'POST',
    headers: {
      'Authorization': 'Bearer token',
    },
  },
  autoUpload: true, // ගොනු එකතු කළ විට ස්වයංක්‍රීයව upload කරන්න
});

ඊළඟ පියවර​