फाइल हैंडलिंग

Dropup फाइलों को चुनने के क्षण से लेकर उनके अपलोड होने तक एक सहज अनुभव प्रदान करता है।

फाइल चयन के तरीके

ड्रैग एंड ड्रॉप

किसी भी एलिमेंट पर ड्रैग-एंड-ड्रॉप सक्षम करने के लिए getDropProps() का उपयोग करें:

function DropZone() {
  const { getDropProps, getInputProps, state } = useDropup();

  return (
    <div
      {...getDropProps()}
      style={{
        border: state.isDragging ? '2px dashed blue' : '2px dashed gray',
        backgroundColor: state.isDragging ? '#f0f8ff' : 'transparent',
      }}
    >
      <input {...getInputProps()} />
      <p>फाइलें यहां ड्रॉप करें</p>
    </div>
  );
}

क्लिक करके चुनें

ड्रॉप जोन डिफ़ॉल्ट रूप से क्लिक करने योग्य भी है:

<div {...getDropProps()}>
  <input {...getInputProps()} />
  <p>फाइलें क्लिक करें या यहां ड्रैग करें</p>
</div>

प्रोग्रामेटिक चयन

प्रोग्रामेटिकली फाइल डायलॉग खोलें:

const { openFileDialog } = useDropup();

<button onClick={openFileDialog}>
  फाइलें चुनें
</button>

प्रोग्रामेटिक फाइल जोड़ना

सीधे फाइलें जोड़ें (पेस्ट इवेंट्स या इंटीग्रेशन के लिए उपयोगी):

const { actions } = useDropup();

// क्लिपबोर्ड से
document.addEventListener('paste', (e) => {
  const files = e.clipboardData?.files;
  if (files?.length) {
    actions.addFiles(files);
  }
});

फाइल ऑब्जेक्ट संरचना

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

interface DropupFile {
  // पहचान
  id: string;              // अद्वितीय पहचानकर्ता (स्वतः जनरेट)
  file: File;              // मूल ब्राउज़र File ऑब्जेक्ट

  // मेटाडेटा
  name: string;            // फाइल का नाम
  size: number;            // बाइट्स में आकार
  type: string;            // MIME प्रकार (जैसे, "image/png")

  // प्रीव्यू (छवियों के लिए)
  preview?: string;        // प्रीव्यू के लिए Object URL

  // अपलोड स्टेट
  status: FileStatus;      // 'idle' | 'uploading' | 'complete' | 'error' | 'paused'
  progress: number;        // 0-100

  // परिणाम
  uploadedUrl?: string;    // सफल अपलोड के बाद URL
  response?: unknown;      // सर्वर प्रतिक्रिया
  error?: DropupError;     // विफल होने पर त्रुटि विवरण

  // कस्टम डेटा
  meta?: Record<string, unknown>;
}

फाइल स्थिति जीवनचक्र

idle → uploading → complete
                 ↘ error → (पुनः प्रयास) → uploading
                 ↘ paused → (पुनः शुरू) → uploading

स्थिति मान

स्थिति	विवरण
idle	फाइल जोड़ी गई लेकिन अभी अपलोड नहीं हो रही
uploading	वर्तमान में अपलोड हो रही है
complete	अपलोड सफल
error	अपलोड विफल
paused	अपलोड रुका हुआ (पुनः शुरू करने योग्य अपलोड के लिए)

फाइलों के साथ काम करना

फाइलों तक पहुंचना

const { files } = useDropup();

// सभी फाइलें
console.log(files);

// स्थिति के अनुसार फ़िल्टर करें
const uploading = files.filter(f => f.status === 'uploading');
const completed = files.filter(f => f.status === 'complete');
const failed = files.filter(f => f.status === 'error');

फाइलें हटाना

const { files, actions } = useDropup();

// एकल फाइल हटाएं
actions.remove(files[0].id);

// सभी फाइलें हटाएं
actions.reset();

फाइल मेटाडेटा अपडेट करना

const { actions } = useDropup();

// कस्टम मेटाडेटा जोड़ें
actions.updateFileMeta(fileId, {
  customField: 'value',
  category: 'documents',
});

फाइल प्रीव्यू

छवि फाइलों के लिए, Dropup प्रीव्यू URLs जनरेट कर सकता है:

const { files } = useDropup({
  generatePreviews: true, // डिफ़ॉल्ट: true
});

// अपने UI में प्रीव्यू का उपयोग करें
{files.map(file => (
  file.preview && (
    <img
      src={file.preview}
      alt={file.name}
      style={{ maxWidth: 100, maxHeight: 100 }}
    />
  )
))}

मेमोरी प्रबंधन

प्रीव्यू URLs Object URLs हैं जो मेमोरी का उपभोग करते हैं। जब फाइलें हटाई जाती हैं या कंपोनेंट अनमाउंट होता है तो Dropup स्वचालित रूप से उन्हें रिवोक करता है।

फाइल आकार फॉर्मेटिंग

फाइल आकार प्रदर्शित करने के लिए हेल्पर:

function formatFileSize(bytes: number): string {
  if (bytes === 0) return '0 Bytes';
  const k = 1024;
  const sizes = ['Bytes', 'KB', 'MB', 'GB'];
  const i = Math.floor(Math.log(bytes) / Math.log(k));
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
}

// उपयोग
{files.map(file => (
  <span>{formatFileSize(file.size)}</span>
))}

बड़ी फाइलों को हैंडल करना

बड़ी फाइलों के लिए, खंडित अपलोड पर विचार करें:

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

const { files } = useDropup({
  upload: createChunkedUploader({
    url: '/api/upload',
    chunkSize: 5 * 1024 * 1024, // 5MB खंड
  }),
});

अधिक विवरण के लिए खंडित अपलोड देखें।