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

அடிக்கடி கேட்கப்படும் கேள்விகள்

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="" />
))}

முன்னோட்ட URL களை சுத்தம் செய்ய வேண்டுமா?​

இல்லை! கோப்புகள் நீக்கப்படும்போது அல்லது கூறு அன்மவுண்ட் ஆகும்போது Dropup தானாகவே Object URL களை ரிவோக் செய்கிறது.

முன்னோட்டங்களை முடக்க முடியுமா?​

useDropup({ generatePreviews: false });

சிக்கல் தீர்வு​

கோப்புகள் பதிவேறவில்லை​

  1. upload கட்டமைக்கப்பட்டுள்ளதா சரிபார்க்கவும்:

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

  2. actions.upload() ஐ அழைக்கிறீர்களா என்று உறுதிசெய்யவும் (autoUpload: true இல்லாவிட்டால்)

  3. நெட்வொர்க் பிழைகளுக்கு உலாவி கன்சோலைச் சரிபார்க்கவும்

முன்னோட்ட URL கள் வேலை செய்யவில்லை​

  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-பாதுகாப்பானது. உலாவி API கள் கிடைக்கும்போது மட்டுமே அவற்றைப் பயன்படுத்துகிறது.

உலாவி ஆதரவு?​

அனைத்து நவீன உலாவிகள்:

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

பங்களிப்பு​

எவ்வாறு பங்களிக்கலாம்?​

  1. களஞ்சியத்தை ஃபோர்க் செய்யவும்
  2. ஒரு அம்ச கிளையை உருவாக்கவும்
  3. ஒரு புல் கோரிக்கையை சமர்ப்பிக்கவும்

விவரங்களுக்கு CONTRIBUTING.md ஐப் பாருங்கள்.

பிழைகளை எவ்வாறு புகாரளிப்பது?​

github.com/samithahansaka/dropup/issues இல் ஒரு சிக்கலைத் திறக்கவும்.

ஒரு சாலை வரைபடம் உள்ளதா?​

திட்டமிடப்பட்ட அம்சங்களுக்கு GitHub சிக்கல்கள் மற்றும் விவாதங்களைச் சரிபார்க்கவும்.