இடம்பெயர்வு வழிகாட்டி

பிற பிரபலமான பதிவேற்ற நூலகங்களிலிருந்து Dropup க்கு எவ்வாறு இடம்பெயர்வது.

react-dropzone இலிருந்து

react-dropzone ஒரு பிரபலமான இழுத்து-விடு நூலகமாகும். Dropup உள்ளமைக்கப்பட்ட பதிவேற்ற ஆதரவுடன் ஒத்த செயல்பாட்டை வழங்குகிறது.

முன்பு (react-dropzone)

import { useDropzone } from 'react-dropzone';

function OldUploader() {
  const [files, setFiles] = useState([]);

  const { getRootProps, getInputProps, isDragActive } = useDropzone({
    accept: { 'image/*': [] },
    maxSize: 10485760,
    onDrop: (acceptedFiles) => {
      setFiles(acceptedFiles.map(file => ({
        ...file,
        preview: URL.createObjectURL(file),
      })));
    },
  });

  const handleUpload = async () => {
    for (const file of files) {
      const formData = new FormData();
      formData.append('file', file);
      await fetch('/api/upload', {
        method: 'POST',
        body: formData,
      });
    }
  };

  return (
    <div {...getRootProps()}>
      <input {...getInputProps()} />
      {isDragActive ? <p>இங்கே விடுங்கள்</p> : <p>கோப்புகளை இங்கே இழுக்கவும்</p>}
    </div>
  );
}

பிறகு (Dropup)

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

function NewUploader() {
  const { files, actions, state, getDropProps, getInputProps } = useDropup({
    accept: 'image/*',
    maxSize: 10 * 1024 * 1024,
    upload: { url: '/api/upload' },  // உள்ளமைக்கப்பட்ட பதிவேற்றம்!
  });

  return (
    <div {...getDropProps()}>
      <input {...getInputProps()} />
      {state.isDragging ? <p>இங்கே விடுங்கள்</p> : <p>கோப்புகளை இங்கே இழுக்கவும்</p>}

      {files.map(file => (
        <div key={file.id}>
          {file.preview && <img src={file.preview} />}
          <span>{file.progress}%</span>
        </div>
      ))}

      <button onClick={() => actions.upload()}>பதிவேற்று</button>
    </div>
  );
}

முக்கிய வேறுபாடுகள்

react-dropzone	Dropup
getRootProps()	getDropProps()
isDragActive	state.isDragging
accept: { 'image/*': [] }	accept: 'image/*'
பதிவேற்ற ஆதரவு இல்லை	முன்னேற்றத்துடன் உள்ளமைக்கப்பட்ட பதிவேற்றம்
கைமுறை முன்னோட்ட சுத்தம்	தானியங்கி சுத்தம்

react-uploady இலிருந்து

react-uploady பல கூறுகளுடன் கூடிய அம்ச-நிறைந்த பதிவேற்ற நூலகமாகும்.

முன்பு (react-uploady)

import Uploady, { useItemProgressListener, useUploady } from '@rpldy/uploady';
import UploadDropZone from '@rpldy/upload-drop-zone';

function OldApp() {
  return (
    <Uploady destination={{ url: '/api/upload' }}>
      <UploadDropZone onDragOverClassName="drag-over">
        <div>கோப்புகளை இங்கே விடுங்கள்</div>
      </UploadDropZone>
      <UploadProgress />
    </Uploady>
  );
}

function UploadProgress() {
  useItemProgressListener((item) => {
    console.log(`${item.file.name}: ${item.completed}%`);
  });

  const { processPending } = useUploady();

  return <button onClick={processPending}>பதிவேற்று</button>;
}

பிறகு (Dropup)

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

function NewApp() {
  const { files, actions, getDropProps, getInputProps } = useDropup({
    upload: { url: '/api/upload' },
    onUploadProgress: (file, progress) => {
      console.log(`${file.name}: ${progress}%`);
    },
  });

  return (
    <div {...getDropProps()}>
      <input {...getInputProps()} />
      <div>கோப்புகளை இங்கே விடுங்கள்</div>

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

      <button onClick={() => actions.upload()}>பதிவேற்று</button>
    </div>
  );
}

முக்கிய வேறுபாடுகள்

react-uploady	Dropup
Provider + கூறுகள்	ஒற்றை ஹூக்
useItemProgressListener	onUploadProgress கால்பேக்
processPending()	actions.upload()
பல தொகுப்புகள்	அனைத்தும் ஒன்றில்

react-dropzone-uploader இலிருந்து

react-dropzone-uploader இழுத்து-விடுவை பதிவேற்ற செயல்பாட்டுடன் இணைக்கிறது.

முன்பு (react-dropzone-uploader)

import Dropzone from 'react-dropzone-uploader';
import 'react-dropzone-uploader/dist/styles.css';

function OldUploader() {
  const getUploadParams = () => ({ url: '/api/upload' });

  const handleChangeStatus = ({ meta, file }, status) => {
    console.log(status, meta, file);
  };

  return (
    <Dropzone
      getUploadParams={getUploadParams}
      onChangeStatus={handleChangeStatus}
      accept="image/*"
      maxSizeBytes={10485760}
    />
  );
}

பிறகு (Dropup)

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

function NewUploader() {
  const { files, getDropProps, getInputProps } = useDropup({
    accept: 'image/*',
    maxSize: 10 * 1024 * 1024,
    upload: { url: '/api/upload' },
    autoUpload: true,

    onUploadStart: (file) => console.log('பதிவேறுகிறது', file),
    onUploadComplete: (file) => console.log('முடிந்தது', file),
    onUploadError: (file, err) => console.log('பிழை', file, err),
  });

  return (
    <div {...getDropProps()}>
      <input {...getInputProps()} />
      {/* உங்கள் தனிப்பயன் UI */}
    </div>
  );
}

முக்கிய வேறுபாடுகள்

react-dropzone-uploader	Dropup
உள்ளமைக்கப்பட்ட UI உள்ள கூறு	தலைப்பில்லா (உங்கள் சொந்த UI ஐக் கொண்டுவாருங்கள்)
getUploadParams	upload விருப்பம்
onChangeStatus	குறிப்பிட்ட கால்பேக்குகள்
CSS இறக்குமதி தேவை	பாணிகள் இல்லை

Uppy இலிருந்து

Uppy முழு-அம்ச பதிவேற்ற கருவித்தொகுப்பாகும்.

முன்பு (Uppy)

import Uppy from '@uppy/core';
import Dashboard from '@uppy/dashboard';
import XHRUpload from '@uppy/xhr-upload';
import '@uppy/core/dist/style.css';
import '@uppy/dashboard/dist/style.css';

const uppy = new Uppy()
  .use(Dashboard, { inline: true, target: '#uppy' })
  .use(XHRUpload, { endpoint: '/api/upload' });

uppy.on('upload-success', (file, response) => {
  console.log('வெற்றி:', file, response);
});

function OldUploader() {
  return <div id="uppy" />;
}

பிறகு (Dropup)

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

function NewUploader() {
  const { files, actions, state, getDropProps, getInputProps } = useDropup({
    upload: { url: '/api/upload' },
    onUploadComplete: (file, response) => {
      console.log('வெற்றி:', file, response);
    },
  });

  return (
    <div>
      <div {...getDropProps()}>
        <input {...getInputProps()} />
        கோப்புகளை இங்கே விடுங்கள்
      </div>

      {files.map(file => (
        <div key={file.id}>
          {file.preview && <img src={file.preview} />}
          <span>{file.name}</span>
          <span>{file.progress}%</span>
        </div>
      ))}

      <button onClick={() => actions.upload()}>பதிவேற்று</button>
    </div>
  );
}

முக்கிய வேறுபாடுகள்

Uppy	Dropup
முழு UI உள்ளடக்கம்	தலைப்பில்லா
செருகுநிரல் அமைப்பு	அனைத்தும் ஒன்றில்
பெரிய தொகுப்பு	< 10KB
கட்டளை API	React ஹூக்ஸ்

பொதுவான இடம்பெயர்வு படிகள்

1. Dropup ஐ நிறுவவும்

npm uninstall react-dropzone react-uploady @rpldy/uploady  # பழையதை நீக்கு
npm install @samithahansaka/dropup

2. இறக்குமதிகளைப் புதுப்பிக்கவும்

// முன்பு
import { useDropzone } from 'react-dropzone';

// பிறகு
import { useDropup } from '@samithahansaka/dropup';

3. ஹூக் பயன்பாட்டைப் புதுப்பிக்கவும்

// முன்பு
const { getRootProps, getInputProps, isDragActive } = useDropzone({...});

// பிறகு
const { getDropProps, getInputProps, state } = useDropup({...});
// isDragActive க்குப் பதிலாக state.isDragging ஐப் பயன்படுத்தவும்

4. பதிவேற்ற கட்டமைப்பைச் சேர்க்கவும்

// Dropup பதிவேற்ற செயல்பாட்டை உள்ளடக்கியது
useDropup({
  upload: { url: '/api/upload' },
});

5. நிகழ்வு கையாளிகளைப் புதுப்பிக்கவும்

// முன்பு (react-dropzone)
onDrop: (files) => {...}

// பிறகு (Dropup)
onFilesAdded: (files) => {...}
onUploadComplete: (file) => {...}

6. வார்ப்புருவைப் புதுப்பிக்கவும்

// முன்பு
<div {...getRootProps()}>
  <input {...getInputProps()} />
</div>

// பிறகு
<div {...getDropProps()}>
  <input {...getInputProps()} />
</div>

அம்ச ஒப்பீடு

அம்சம்	react-dropzone	react-uploady	Uppy	Dropup
இழுத்து விடு	✓	✓	✓	✓
பதிவேற்றம்	✗	✓	✓	✓
முன்னேற்றம்	✗	✓	✓	✓
துண்டு	✗	✓	✓	✓
tus	✗	✓	✓	✓
கிளவுட் (S3)	✗	✓	✓	✓
React Native	✗	✗	✗	✓
தொகுப்பு அளவு	~10KB	~30KB	~100KB+	<10KB
TypeScript	✓	✓	✓	✓
தலைப்பில்லா	✓	பகுதியளவு	✗	✓