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

Dropup के साथ शुरू करना

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

Dropup क्यों?​

  • 🪶 हल्का - कोर केवल ~10KB gzipped है
  • 🎨 हेडलेस - हुक्स-आधारित API के साथ आपके UI पर पूर्ण नियंत्रण
  • 📁 ड्रैग और ड्रॉप - बिल्ट-इन ड्रैग-एंड-ड्रॉप सपोर्ट
  • 📊 प्रगति ट्रैकिंग - प्रत्येक फाइल के लिए रीयल-टाइम अपलोड प्रगति
  • 🔄 खंडित अपलोड - विश्वसनीय अपलोड के लिए बड़ी फाइलों को विभाजित करें
  • ☁️ क्लाउड रेडी - S3, GCS और Azure के लिए पहले से बने हेल्पर्स
  • 🖼️ छवि प्रसंस्करण - बिल्ट-इन संपीड़न और प्रीव्यू जनरेशन
  • 📱 क्रॉस-प्लेटफॉर्म - React DOM और React Native के साथ काम करता है
  • 🔒 TypeScript - पूर्ण TypeScript सपोर्ट

इंस्टॉलेशन​

अपने पसंदीदा पैकेज मैनेजर का उपयोग करके Dropup इंस्टॉल करें:

npm install @samithahansaka/dropup

पीयर निर्भरताएं​

Dropup को React 16.8 या उच्चतर की आवश्यकता है (हुक्स सपोर्ट के लिए):

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>
      {/* ड्रॉप जोन */}
      <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>

      {/* अपलोड बटन */}
      {files.length > 0 && (
        <button onClick={() => actions.upload()}>
          सभी अपलोड करें
        </button>
      )}
    </div>
  );
}

मुख्य अवधारणाएं​

1. useDropup हुक​

useDropup हुक मुख्य प्रवेश बिंदु है। यह आपके फाइल अपलोड UI बनाने के लिए आवश्यक सब कुछ लौटाता है:

const {
  files,           // स्थिति, प्रगति आदि के साथ फाइलों की सरणी
  state,           // समग्र स्थिति (isDragging, isUploading, progress)
  actions,         // अपलोड, हटाने, रद्द करने, रीसेट करने के तरीके
  getDropProps,    // आपके ड्रॉप जोन एलिमेंट के लिए Props
  getInputProps,   // छिपे हुए फाइल इनपुट के लिए Props
} = useDropup(options);

2. फाइल ऑब्जेक्ट्स​

files सरणी में प्रत्येक फाइल में शामिल है:

{
  id: string;          // अद्वितीय पहचानकर्ता
  file: File;          // मूल File ऑब्जेक्ट
  name: string;        // फाइल का नाम
  size: number;        // बाइट्स में फाइल का आकार
  type: string;        // MIME प्रकार
  preview?: string;    // प्रीव्यू URL (छवियों के लिए)
  status: 'idle' | 'uploading' | 'complete' | 'error';
  progress: number;    // अपलोड प्रगति (0-100)
  error?: Error;       // अपलोड विफल होने पर Error ऑब्जेक्ट
  uploadedUrl?: string; // सफल अपलोड के बाद URL
}

3. क्रियाएं​

actions ऑब्जेक्ट अपलोड को नियंत्रित करने के तरीके प्रदान करता है:

actions.upload(fileIds?)    // अपलोड शुरू करें (सभी या विशिष्ट फाइलें)
actions.cancel(fileId?)     // अपलोड रद्द करें
actions.remove(fileId)      // सूची से फाइल हटाएं
actions.reset()             // सभी फाइलें साफ करें
actions.retry(fileIds?)     // विफल अपलोड पुनः प्रयास करें

अपलोड कॉन्फ़िगर करना​

वास्तविक अपलोड सक्षम करने के लिए, एक अपलोड कॉन्फ़िगरेशन प्रदान करें:

const { files } = useDropup({
  upload: {
    url: '/api/upload',
    method: 'POST',
    headers: {
      'Authorization': 'Bearer token',
    },
  },
  autoUpload: true, // फाइलें जोड़ने पर स्वचालित रूप से अपलोड करें
});

अगले कदम​