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

अक्सर पूछे जाने वाले प्रश्न

Dropup के बारे में सामान्य प्रश्न और उत्तर।

सामान्य​

Dropup क्या है?​

Dropup फाइल अपलोड के लिए एक हल्का, हेडलेस React लाइब्रेरी है। यह ड्रैग-एंड-ड्रॉप कार्यक्षमता, फाइल सत्यापन, अपलोड प्रगति ट्रैकिंग और क्लाउड स्टोरेज के लिए समर्थन प्रदान करता है - यह सब 10KB gzipped से कम पैकेज में।

"हेडलेस" का क्या मतलब है?​

हेडलेस का मतलब है कि Dropup में कोई UI कंपोनेंट शामिल नहीं है। यह लॉजिक और स्टेट मैनेजमेंट प्रदान करता है, जबकि आप जैसा चाहें वैसा UI बनाते हैं। इससे आपको लुक और फील पर पूर्ण नियंत्रण मिलता है।

बंडल साइज कितना है?​

  • कोर (@samithahansaka/dropup): < 10KB gzipped
  • क्लाउड सपोर्ट के साथ: प्रति प्रोवाइडर +2KB
  • इमेज प्रोसेसिंग के साथ: +5KB
  • tus प्रोटोकॉल के साथ: +3KB (tus-js-client पीयर आवश्यक)

क्या यह TypeScript को सपोर्ट करता है?​

हां! Dropup TypeScript में लिखा गया है और इसमें व्यापक टाइप परिभाषाएं शामिल हैं। कोई @types पैकेज की आवश्यकता नहीं।

कौन सा React संस्करण आवश्यक है?​

React 16.8+ (हुक्स सपोर्ट आवश्यक)।

उपयोग​

मैं फाइलें कैसे अपलोड करूं?​

const { files, actions } = useDropup({
  upload: { url: '/api/upload' },
});

// सभी फाइलें अपलोड करें
actions.upload();

// विशिष्ट फाइलें अपलोड करें
actions.upload(['file-id-1', 'file-id-2']);

मैं सत्यापन त्रुटियों को कैसे हैंडल करूं?​

useDropup({
  accept: 'image/*',
  maxSize: 5 * 1024 * 1024,

  onValidationError: (errors) => {
    errors.forEach(({ file, errors }) => {
      console.log(`${file.name}: ${errors.join(', ')}`);
    });
  },
});

क्या मैं कस्टम अपलोड लॉजिक का उपयोग कर सकता हूं?​

हां! कॉन्फिग ऑब्जेक्ट के बजाय एक फंक्शन पास करें:

useDropup({
  upload: async (file, options) => {
    const { signal, onProgress } = options;

    // आपका कस्टम अपलोड लॉजिक
    const response = await customUpload(file.file, {
      signal,
      onProgress,
    });

    return { url: response.url };
  },
});

मैं प्रोग्रामेटिकली फाइलें कैसे जोड़ूं?​

const { actions } = useDropup();

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

क्या मेरे पास एकाधिक ड्रॉप जोन हो सकते हैं?​

हां! प्रत्येक useDropup कॉल एक स्वतंत्र इंस्टेंस बनाता है:

const images = useDropup({ accept: 'image/*' });
const documents = useDropup({ accept: '.pdf' });

// अलग-अलग उपयोग करें
<div {...images.getDropProps()}>...</div>
<div {...documents.getDropProps()}>...</div>

अपलोड​

मैं अपलोड प्रगति कैसे दिखाऊं?​

const { files } = useDropup({ upload: { url: '/api/upload' } });

{files.map(file => (
  <div key={file.id}>
    {file.name}: {file.progress}%
  </div>
))}

मैं अपलोड कैसे रद्द करूं?​

const { actions } = useDropup();

// विशिष्ट फाइल रद्द करें
actions.cancel('file-id');

// सभी अपलोड रद्द करें
actions.cancel();

मैं विफल अपलोड को पुनः प्रयास कैसे करूं?​

const { actions } = useDropup();

// विशिष्ट फाइलों को पुनः प्रयास करें
actions.retry(['file-id']);

// सभी विफल को पुनः प्रयास करें
actions.retry();

क्या यह खंडित अपलोड का समर्थन करता है?​

हां! createChunkedUploader का उपयोग करें:

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

useDropup({
  upload: createChunkedUploader({
    url: '/api/upload/chunk',
    chunkSize: 5 * 1024 * 1024, // 5MB
  }),
});

क्या मैं सीधे S3 में अपलोड कर सकता हूं?​

हां! क्लाउड अपलोडर का उपयोग करें:

import { createS3Uploader } from '@samithahansaka/dropup/cloud/s3';

useDropup({
  upload: createS3Uploader({
    getPresignedUrl: async (file) => {
      const res = await fetch('/api/s3/presign', {
        method: 'POST',
        body: JSON.stringify({ filename: file.name }),
      });
      return res.json();
    },
  }),
});

सत्यापन​

मैं फाइल प्रकारों को कैसे प्रतिबंधित करूं?​

// MIME प्रकार द्वारा
useDropup({ accept: 'image/*' });

// एक्सटेंशन द्वारा
useDropup({ accept: '.pdf, .doc' });

// एकाधिक
useDropup({ accept: ['image/*', 'application/pdf'] });

मैं आकार सीमाएं कैसे सेट करूं?​

useDropup({
  maxSize: 10 * 1024 * 1024, // अधिकतम 10MB
  minSize: 1024,             // न्यूनतम 1KB
});

मैं फाइलों की संख्या कैसे सीमित करूं?​

useDropup({
  maxFiles: 5,
});

क्या मैं कस्टम सत्यापन जोड़ सकता हूं?​

हां! customRules का उपयोग करें:

useDropup({
  customRules: [
    (file) => {
      if (file.name.includes('draft')) {
        return 'ड्राफ्ट फाइलों की अनुमति नहीं है';
      }
      return true;
    },
  ],
});

प्रीव्यू​

मैं इमेज प्रीव्यू कैसे दिखाऊं?​

प्रीव्यू डिफ़ॉल्ट रूप से सक्षम हैं:

const { files } = useDropup();

{files.map(file => (
  file.preview && <img src={file.preview} alt="" />
))}

क्या मुझे प्रीव्यू URLs को क्लीन अप करने की आवश्यकता है?​

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

क्या मैं प्रीव्यू को अक्षम कर सकता हूं?​

useDropup({ generatePreviews: false });

समस्या निवारण​

फाइलें अपलोड नहीं हो रही हैं​

  1. जांचें कि upload कॉन्फ़िगर है:

    useDropup({ upload: { url: '/api/upload' } });

  2. सुनिश्चित करें कि आप actions.upload() कॉल करते हैं (जब तक autoUpload: true न हो)

  3. नेटवर्क त्रुटियों के लिए ब्राउज़र कंसोल देखें

प्रीव्यू URLs काम नहीं कर रहे​

  1. सुनिश्चित करें कि फाइल एक इमेज है
  2. जांचें कि generatePreviews false नहीं है
  3. सत्यापित करें कि फाइल ऑब्जेक्ट में एक वैध preview प्रॉपर्टी है

ड्रैग एंड ड्रॉप काम नहीं कर रहा​

  1. सुनिश्चित करें कि आप getDropProps() को एक कंटेनर एलिमेंट पर स्प्रेड करते हैं
  2. छिपा हुआ इनपुट शामिल करें: <input {...getInputProps()} />
  3. जांचें कि disabled true नहीं है

TypeScript त्रुटियां​

  1. नवीनतम Dropup संस्करण में अपडेट करें
  2. सुनिश्चित करें कि tsconfig.json में उचित moduleResolution है
  3. जांचें कि @samithahansaka/dropup dependencies में है, न कि devDependencies में

मेमोरी लीक​

  1. सुनिश्चित करें कि useDropup का उपयोग करने वाले कंपोनेंट ठीक से अनमाउंट होते हैं
  2. आवश्यक होने पर अनमाउंटिंग से पहले actions.reset() कॉल करें
  3. बिना क्लीनअप के बाहरी स्टेट में फाइलों को स्टोर न करें

संगतता​

क्या यह Next.js के साथ काम करता है?​

हां! 'use client' निर्देश का उपयोग करें:

'use client';
import { useDropup } from '@samithahansaka/dropup';

क्या यह React Native के साथ काम करता है?​

हां! नेटिव एडाप्टर का उपयोग करें:

import { NativeAdapter } from '@samithahansaka/dropup/native';

useDropup({ adapter: NativeAdapter });

क्या यह SSR का समर्थन करता है?​

हां! Dropup SSR-सुरक्षित है। यह ब्राउज़र APIs का उपयोग केवल तब करता है जब वे उपलब्ध हों।

ब्राउज़र सपोर्ट?​

सभी आधुनिक ब्राउज़र:

  • Chrome 60+
  • Firefox 55+
  • Safari 12+
  • Edge 79+

योगदान​

मैं कैसे योगदान कर सकता हूं?​

  1. रिपॉजिटरी को फोर्क करें
  2. एक फीचर ब्रांच बनाएं
  3. पुल रिक्वेस्ट सबमिट करें

विवरण के लिए CONTRIBUTING.md देखें।

मैं बग की रिपोर्ट कैसे करूं?​

github.com/samithahansaka/dropup/issues पर एक इश्यू खोलें।

क्या कोई रोडमैप है?​

नियोजित सुविधाओं के लिए GitHub इश्यूज और डिस्कशन देखें।