முக்கிய உள்ளடக்கத்திற்குச் செல்

Dropup எவ்வாறு செயல்படுகிறது

Dropup தலையில்லா UI என்ற கருத்தை மையமாகக் கொண்டு கட்டமைக்கப்பட்டுள்ளது - இது அனைத்து சிக்கலான கோப்பு பதிவேற்ற தர்க்கத்தையும் கையாளுகிறது, அதே நேரத்தில் காட்சி விளக்கக்காட்சி மீது உங்களுக்கு முழுமையான கட்டுப்பாட்டை வழங்குகிறது.

கட்டமைப்பு​

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

முக்கிய கூறுகள்​

1. நிலை மேலாளர்​

Dropup கணிக்கக்கூடிய நிலை மேலாண்மைக்கு React இன் useReducer ஐப் பயன்படுத்துகிறது:

  • அனைத்து கோப்புகளையும் அவற்றின் நிலைகளையும் கண்காணிக்கிறது
  • இழுத்தல் நிலையை நிர்வகிக்கிறது
  • பதிவேற்ற முன்னேற்றத்தைக் கையாளுகிறது
  • கணக்கிடப்பட்ட மதிப்புகளை வழங்குகிறது

2. சரிபார்ப்பு இயந்திரம்​

கோப்புகள் சேர்க்கப்படுவதற்கு முன், அவை சரிபார்ப்பு வழியாகச் செல்கின்றன:

const { files } = useDropup({
  accept: 'image/*',           // கோப்பு வகை சரிபார்ப்பு
  maxSize: 5 * 1024 * 1024,    // அதிகபட்ச கோப்பு அளவு
  minSize: 1024,               // குறைந்தபட்ச கோப்பு அளவு
  maxFiles: 10,                // அதிகபட்ச கோப்புகளின் எண்ணிக்கை
  maxWidth: 4096,              // அதிகபட்ச பட அகலம்
  maxHeight: 4096,             // அதிகபட்ச பட உயரம்
  customRules: [               // தனிப்பயன் சரிபார்ப்பு
    (file) => file.name.length < 100 || 'கோப்பு பெயர் மிக நீளமானது'
  ],
});

3. பதிவேற்ற இயந்திரம்​

பதிவேற்ற இயந்திரம் கையாளுகிறது:

  • எளிய பதிவேற்றங்கள் (ஒரு கோப்புக்கு ஒரு கோரிக்கை)
  • துண்டு பதிவேற்றங்கள் (பெரிய கோப்புகளைப் பிரிக்கவும்)
  • அதிவேக பின்வாங்கலுடன் மீண்டும் முயற்சி தர்க்கம்
  • ஒரே நேரத்தில் பதிவேற்ற மேலாண்மை
  • முன்னேற்றம் கண்காணிப்பு

4. தளம் அடாப்டர்​

Dropup தளங்களில் செயல்படுகிறது:

  • வலை - நேட்டிவ் உலாவி API களைப் பயன்படுத்துகிறது
  • React Native - நேட்டிவ் கோப்பு கையாளுதலைப் பயன்படுத்துகிறது
  • SSR - சர்வர்-சைட் ரெண்டரிங்கிற்கு பாதுகாப்பானது

தரவு ஓட்டம்​

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

வடிவமைப்பு கொள்கைகள்​

1. தலையில்லா முதலில்​

உள்ளமைக்கப்பட்ட UI கூறுகள் இல்லை - உங்களுக்குத் தேவையானதை நீங்கள் கட்டமைக்கிறீர்கள்:

// நீங்கள் முழு UI ஐயும் கட்டுப்படுத்துகிறீர்கள்
<div {...getDropProps()}>
  <YourCustomDropZone />
  <input {...getInputProps()} />
</div>

2. வகை பாதுகாப்பு​

விரிவான வகைகளுடன் முழு TypeScript ஆதரவு:

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

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

3. மர அசைவு​

உங்களுக்குத் தேவையானதை மட்டும் இறக்குமதி செய்யுங்கள்:

// கோர் மட்டும் (~10KB)
import { useDropup } from '@samithahansaka/dropup';

// தேவைப்படும்போது கிளவுட் ஆதரவைச் சேர்க்கவும்
import { createS3Uploader } from '@samithahansaka/dropup/cloud/s3';

// தேவைப்படும்போது பட செயலாக்கத்தைச் சேர்க்கவும்
import { compressImage } from '@samithahansaka/dropup/image';

4. படிப்படியான மேம்பாடு​

எளிமையாகத் தொடங்கவும், தேவைக்கேற்ப அம்சங்களைச் சேர்க்கவும்:

// அடிப்படை பயன்பாடு
const { files } = useDropup();

// சரிபார்ப்பைச் சேர்க்கவும்
const { files } = useDropup({ maxSize: 10_000_000 });

// தானியங்கி பதிவேற்றத்தைச் சேர்க்கவும்
const { files } = useDropup({
  maxSize: 10_000_000,
  upload: { url: '/api/upload' },
  autoUpload: true,
});

// கிளவுட் சேமிப்பகத்தைச் சேர்க்கவும்
const { files } = useDropup({
  upload: createS3Uploader({ getPresignedUrl }),
});