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

Dropup உடன் தொடங்குங்கள்

Dropup என்பது இலகுவான, தலைப்பில்லா React கோப்பு பதிவேற்ற நூலகமாகும், இது உங்கள் UI மீது முழு கட்டுப்பாட்டை வழங்கும் அதே வேளையில் அனைத்து சிக்கலான பதிவேற்ற தர்க்கத்தையும் கையாளுகிறது.

ஏன் Dropup?​

  • 🪶 இலகுவானது - முக்கிய தொகுப்பு சுருக்கப்பட்ட நிலையில் ~10KB மட்டுமே
  • 🎨 தலைப்பில்லாது - ஹூக்ஸ் அடிப்படையிலான 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;       // பதிவேற்றம் தோல்வியுற்றால் பிழை பொருள்
  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, // கோப்புகள் சேர்க்கப்படும்போது தானாக பதிவேற்றவும்
});

அடுத்த படிகள்​