Guía de migración

Cómo migrar a Dropup desde otras bibliotecas de carga populares.

Desde react-dropzone

react-dropzone es una biblioteca popular de arrastrar y soltar. Dropup proporciona funcionalidad similar con soporte de carga integrado.

Antes (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>Suelta aquí</p> : <p>Arrastra archivos aquí</p>}
    </div>
  );
}

Después (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' },  // ¡Carga integrada!
  });

  return (
    <div {...getDropProps()}>
      <input {...getInputProps()} />
      {state.isDragging ? <p>Suelta aquí</p> : <p>Arrastra archivos aquí</p>}

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

      <button onClick={() => actions.upload()}>Cargar</button>
    </div>
  );
}

Diferencias clave

react-dropzone	Dropup
getRootProps()	getDropProps()
isDragActive	state.isDragging
accept: { 'image/*': [] }	accept: 'image/*'
Sin soporte de carga	Carga integrada con progreso
Limpieza manual de vistas previas	Limpieza automática

Desde react-uploady

react-uploady es una biblioteca de carga rica en funciones con múltiples componentes.

Antes (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>Suelta archivos aquí</div>
      </UploadDropZone>
      <UploadProgress />
    </Uploady>
  );
}

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

  const { processPending } = useUploady();

  return <button onClick={processPending}>Cargar</button>;
}

Después (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>Suelta archivos aquí</div>

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

      <button onClick={() => actions.upload()}>Cargar</button>
    </div>
  );
}

Diferencias clave

react-uploady	Dropup
Provider + Componentes	Un solo hook
useItemProgressListener	Callback onUploadProgress
processPending()	actions.upload()
Múltiples paquetes	Todo en uno

Desde react-dropzone-uploader

react-dropzone-uploader combina zona de soltar con funcionalidad de carga.

Antes (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}
    />
  );
}

Después (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('cargando', file),
    onUploadComplete: (file) => console.log('listo', file),
    onUploadError: (file, err) => console.log('error', file, err),
  });

  return (
    <div {...getDropProps()}>
      <input {...getInputProps()} />
      {/* Tu UI personalizada */}
    </div>
  );
}

Diferencias clave

react-dropzone-uploader	Dropup
Componente con UI integrada	Sin cabeza (trae tu propia UI)
getUploadParams	Opción upload
onChangeStatus	Callbacks específicos
Requiere importar CSS	Sin estilos

Desde Uppy

Uppy es un kit de herramientas de carga completo.

Antes (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('Éxito:', file, response);
});

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

Después (Dropup)

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

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

  return (
    <div>
      <div {...getDropProps()}>
        <input {...getInputProps()} />
        Suelta archivos aquí
      </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()}>Cargar</button>
    </div>
  );
}

Diferencias clave

Uppy	Dropup
UI completa incluida	Sin cabeza
Sistema de plugins	Todo en uno
Bundle grande	< 10KB
API imperativa	React hooks

Pasos comunes de migración

1. Instalar Dropup

npm uninstall react-dropzone react-uploady @rpldy/uploady  # Eliminar antiguo
npm install @samithahansaka/dropup

2. Actualizar imports

// Antes
import { useDropzone } from 'react-dropzone';

// Después
import { useDropup } from '@samithahansaka/dropup';

3. Actualizar uso del hook

// Antes
const { getRootProps, getInputProps, isDragActive } = useDropzone({...});

// Después
const { getDropProps, getInputProps, state } = useDropup({...});
// Usa state.isDragging en lugar de isDragActive

4. Agregar configuración de carga

// Dropup incluye funcionalidad de carga
useDropup({
  upload: { url: '/api/upload' },
});

5. Actualizar manejadores de eventos

// Antes (react-dropzone)
onDrop: (files) => {...}

// Después (Dropup)
onFilesAdded: (files) => {...}
onUploadComplete: (file) => {...}

6. Actualizar plantilla

// Antes
<div {...getRootProps()}>
  <input {...getInputProps()} />
</div>

// Después
<div {...getDropProps()}>
  <input {...getInputProps()} />
</div>

Comparación de características

Característica	react-dropzone	react-uploady	Uppy	Dropup
Arrastrar y soltar	✓	✓	✓	✓
Carga	✗	✓	✓	✓
Progreso	✗	✓	✓	✓
Fragmentado	✗	✓	✓	✓
tus	✗	✓	✓	✓
Nube (S3)	✗	✓	✓	✓
React Native	✗	✗	✗	✓
Tamaño del bundle	~10KB	~30KB	~100KB+	<10KB
TypeScript	✓	✓	✓	✓
Sin cabeza	✓	Parcial	✗	✓