मुख्य सामग्री पर जाएं

Dropup कैसे काम करता है

Dropup हेडलेस UI की अवधारणा पर बना है - यह सभी जटिल फाइल अपलोड लॉजिक को संभालता है जबकि आपको विजुअल प्रेजेंटेशन पर पूर्ण नियंत्रण देता है।

आर्किटेक्चर​

┌─────────────────────────────────────────────────────────────┐
│                     आपका React कंपोनेंट                      │
├─────────────────────────────────────────────────────────────┤
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────────────┐  │
│  │ ड्रॉप जोन   │  │ फाइल सूची   │  │ अपलोड बटन          │  │
│  │ (आपका UI)   │  │ (आपका UI)   │  │ (आपका UI)          │  │
│  └──────┬──────┘  └──────┬──────┘  └──────────┬──────────┘  │
│         │                │                     │             │
│         ▼                ▼                     ▼             │
│  ┌─────────────────────────────────────────────────────────┐│
│  │                    useDropup हुक                         ││
│  │  ┌───────────┐ ┌───────────┐ ┌───────────┐ ┌─────────┐  ││
│  │  │ सत्यापन   │ │  स्टेट    │ │  अपलोड   │ │ प्लेटफॉर्म││
│  │  │  इंजन    │ │ मैनेजर   │ │  इंजन    │ │ एडाप्टर  │  ││
│  │  └───────────┘ └───────────┘ └───────────┘ └─────────┘  ││
│  └─────────────────────────────────────────────────────────┘│
└─────────────────────────────────────────────────────────────┘

मुख्य घटक​

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 सभी प्लेटफॉर्म पर काम करता है:

  • वेब - नेटिव ब्राउज़र APIs का उपयोग करता है
  • React Native - नेटिव फाइल हैंडलिंग का उपयोग करता है
  • SSR - सर्वर-साइड रेंडरिंग के लिए सुरक्षित

डेटा प्रवाह​

उपयोगकर्ता क्रिया → सत्यापन → स्टेट अपडेट → अपलोड → कॉलबैक
     │              │            │           │          │
     ▼              ▼            ▼           ▼          ▼
  फाइल      स्वीकार/अस्वीकार   files[]    XHR/Fetch   onComplete
  चुनें/ड्रॉप                   अपडेट     प्रगति      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 }),
});