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

Dropup ක්‍රියා කරන ආකාරය

Dropup headless UI සංකල්පය වටා ගොඩනගා ඇත - එය සියලුම සංකීර්ණ file upload logic හසුරුවන අතරම දෘශ්‍ය ඉදිරිපත් කිරීම පිළිබඳ ඔබට සම්පූර්ණ පාලනයක් ලබා දෙයි.

ගෘහ නිර්මාණ ශිල්පය​

┌─────────────────────────────────────────────────────────────┐
│                     ඔබගේ React Component                     │
├─────────────────────────────────────────────────────────────┤
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────────────┐  │
│  │ Drop Zone   │  │ File List   │  │ Upload Button       │  │
│  │ (ඔබගේ UI)   │  │ (ඔබගේ UI)   │  │ (ඔබගේ UI)           │  │
│  └──────┬──────┘  └──────┬──────┘  └──────────┬──────────┘  │
│         │                │                     │             │
│         ▼                ▼                     ▼             │
│  ┌─────────────────────────────────────────────────────────┐│
│  │                    useDropup Hook                        ││
│  │  ┌───────────┐ ┌───────────┐ ┌───────────┐ ┌─────────┐  ││
│  │  │Validation │ │  State    │ │  Upload   │ │ Platform│  ││
│  │  │  Engine   │ │ Manager   │ │  Engine   │ │ Adapter │  ││
│  │  └───────────┘ └───────────┘ └───────────┘ └─────────┘  ││
│  └─────────────────────────────────────────────────────────┘│
└─────────────────────────────────────────────────────────────┘

ප්‍රධාන සංරචක​

1. State Manager​

Dropup විශ්වසනීය state management සඳහා React හි useReducer භාවිතා කරයි:

  • සියලුම ගොනු සහ ඒවායේ තත්ත්වයන් නිරීක්ෂණය කරයි
  • Drag state කළමනාකරණය කරයි
  • Upload progress හසුරුවයි
  • Computed values ලබා දෙයි

2. Validation Engine​

ගොනු එකතු කිරීමට පෙර, ඒවා validation හරහා ගමන් කරයි:

const { files } = useDropup({
  accept: 'image/*',           // ගොනු වර්ග validation
  maxSize: 5 * 1024 * 1024,    // උපරිම ගොනු ප්‍රමාණය
  minSize: 1024,               // අවම ගොනු ප්‍රමාණය
  maxFiles: 10,                // උපරිම ගොනු ගණන
  maxWidth: 4096,              // උපරිම image width
  maxHeight: 4096,             // උපරිම image height
  customRules: [               // Custom validation
    (file) => file.name.length < 100 || 'ගොනු නාමය දිග වැඩියි'
  ],
});

3. Upload Engine​

Upload engine පහත සඳහන් දේ හසුරුවයි:

  • සරල uploads (ගොනුවකට එක් request එකක්)
  • Chunked uploads (විශාල ගොනු බෙදීම)
  • Exponential backoff සමඟ retry logic
  • Concurrent upload management
  • Progress tracking

4. Platform Adapter​

Dropup platforms හරහා ක්‍රියා කරයි:

  • Web - Native browser APIs භාවිතා කරයි
  • React Native - Native file handling භාවිතා කරයි
  • SSR - Server-side rendering සඳහා ආරක්ෂිතයි

Data Flow​

User Action → Validation → State Update → Upload → Callbacks
     │              │            │           │          │
     ▼              ▼            ▼           ▼          ▼
  Select/     Accept/Reject   files[]    XHR/Fetch   onComplete
  Drop files                  Updated    Progress    onError

නිර්මාණ මූලධර්ම​

1. Headless First​

Built-in UI components නැත - ඔබට අවශ්‍ය දේ හරියටම ගොඩනඟන්න:

// ඔබ සම්පූර්ණ UI පාලනය කරයි
<div {...getDropProps()}>
  <YourCustomDropZone />
  <input {...getInputProps()} />
</div>

2. Type Safety​

සවිස්තරාත්මක types සමඟ සම්පූර්ණ TypeScript support:

import type { DropupFile, UseDropupOptions } from '@samithahansaka/dropup';

const options: UseDropupOptions = {
  accept: 'image/*',
  onUploadComplete: (file: DropupFile) => {
    console.log(file.uploadedUrl);
  },
};

3. Tree Shakeable​

අවශ්‍ය දේ පමණක් import කරන්න:

// Core පමණි (~10KB)
import { useDropup } from '@samithahansaka/dropup';

// අවශ්‍ය විට cloud support එකතු කරන්න
import { createS3Uploader } from '@samithahansaka/dropup/cloud/s3';

// අවශ්‍ය විට image processing එකතු කරන්න
import { compressImage } from '@samithahansaka/dropup/image';

4. Progressive Enhancement​

සරලව ආරම්භ කරන්න, අවශ්‍ය පරිදි features එකතු කරන්න:

// මූලික භාවිතය
const { files } = useDropup();

// Validation එකතු කරන්න
const { files } = useDropup({ maxSize: 10_000_000 });

// Auto-upload එකතු කරන්න
const { files } = useDropup({
  maxSize: 10_000_000,
  upload: { url: '/api/upload' },
  autoUpload: true,
});

// Cloud storage එකතු කරන්න
const { files } = useDropup({
  upload: createS3Uploader({ getPresignedUrl }),
});