Zum Hauptinhalt springen

Häufig gestellte Fragen

Häufige Fragen und Antworten zu Dropup.

Allgemein​

Was ist Dropup?​

Dropup ist eine leichtgewichtige, headless React-Bibliothek für Datei-Uploads. Sie bietet Drag-and-Drop-Funktionalität, Dateivalidierung, Upload-Fortschrittsverfolgung und Unterstützung für Cloud-Speicher - alles in einem Paket unter 10KB gzipped.

Warum "headless"?​

Headless bedeutet, dass Dropup keine UI-Komponenten enthält. Es stellt die Logik und Zustandsverwaltung bereit, während Sie die Benutzeroberfläche nach Ihren Wünschen gestalten. Das gibt Ihnen die volle Kontrolle über das Erscheinungsbild.

Wie groß ist das Bundle?​

  • Core (@samithahansaka/dropup): <10KB gzipped
  • Mit Cloud-Unterstützung: +2KB pro Anbieter
  • Mit Bildverarbeitung: +5KB
  • Mit tus-Protokoll: +3KB (erfordert tus-js-client Peer-Abhängigkeit)

Unterstützt es TypeScript?​

Ja! Dropup ist in TypeScript geschrieben und enthält umfassende Typdefinitionen. Kein @types-Paket erforderlich.

Welche React-Version ist erforderlich?​

React 16.8+ (erfordert Hooks-Unterstützung).

Verwendung​

Wie lade ich Dateien hoch?​

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

// Alle Dateien hochladen
actions.upload();

// Bestimmte Dateien hochladen
actions.upload(['file-id-1', 'file-id-2']);

Wie behandle ich Validierungsfehler?​

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

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

Kann ich benutzerdefinierte Upload-Logik verwenden?​

Ja! Übergeben Sie eine Funktion anstelle eines Konfigurationsobjekts:

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

    // Ihre benutzerdefinierte Upload-Logik
    const response = await customUpload(file.file, {
      signal,
      onProgress,
    });

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

Wie füge ich Dateien programmatisch hinzu?​

const { actions } = useDropup();

// Aus der Zwischenablage
document.addEventListener('paste', (e) => {
  const files = e.clipboardData?.files;
  if (files) {
    actions.addFiles(files);
  }
});

Kann ich mehrere Ablagezonen haben?​

Ja! Jeder useDropup-Aufruf erstellt eine unabhängige Instanz:

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

// Separat verwenden
<div {...images.getDropProps()}>...</div>
<div {...documents.getDropProps()}>...</div>

Uploads​

Wie zeige ich den Upload-Fortschritt an?​

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

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

Wie breche ich einen Upload ab?​

const { actions } = useDropup();

// Bestimmte Datei abbrechen
actions.cancel('file-id');

// Alle Uploads abbrechen
actions.cancel();

Wie wiederhole ich fehlgeschlagene Uploads?​

const { actions } = useDropup();

// Bestimmte Dateien wiederholen
actions.retry(['file-id']);

// Alle fehlgeschlagenen wiederholen
actions.retry();

Unterstützt es Chunked Uploads?​

Ja! Verwenden Sie createChunkedUploader:

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

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

Kann ich direkt zu S3 hochladen?​

Ja! Verwenden Sie den Cloud-Uploader:

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

Validierung​

Wie beschränke ich Dateitypen?​

// Nach MIME-Typ
useDropup({ accept: 'image/*' });

// Nach Erweiterung
useDropup({ accept: '.pdf, .doc' });

// Mehrere
useDropup({ accept: ['image/*', 'application/pdf'] });

Wie setze ich Größenbeschränkungen?​

useDropup({
  maxSize: 10 * 1024 * 1024, // 10MB max
  minSize: 1024,             // 1KB min
});

Wie begrenze ich die Anzahl der Dateien?​

useDropup({
  maxFiles: 5,
});

Kann ich benutzerdefinierte Validierung hinzufügen?​

Ja! Verwenden Sie customRules:

useDropup({
  customRules: [
    (file) => {
      if (file.name.includes('draft')) {
        return 'Entwurfsdateien sind nicht erlaubt';
      }
      return true;
    },
  ],
});

Vorschauen​

Wie zeige ich Bildvorschauen an?​

Vorschauen sind standardmäßig aktiviert:

const { files } = useDropup();

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

Muss ich Vorschau-URLs bereinigen?​

Nein! Dropup widerruft Object URLs automatisch, wenn Dateien entfernt werden oder die Komponente ausgehängt wird.

Kann ich Vorschauen deaktivieren?​

useDropup({ generatePreviews: false });

Fehlerbehebung​

Dateien werden nicht hochgeladen​

  1. Überprüfen Sie, ob upload konfiguriert ist:

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

  2. Stellen Sie sicher, dass Sie actions.upload() aufrufen (es sei denn autoUpload: true)

  3. Überprüfen Sie die Browser-Konsole auf Netzwerkfehler

Vorschau-URLs funktionieren nicht​

  1. Stellen Sie sicher, dass die Datei ein Bild ist
  2. Überprüfen Sie, dass generatePreviews nicht false ist
  3. Verifizieren Sie, dass das Dateiobjekt eine gültige preview-Eigenschaft hat

Drag and Drop funktioniert nicht​

  1. Stellen Sie sicher, dass Sie getDropProps() auf einem Container-Element spreaden
  2. Fügen Sie das versteckte Input hinzu: <input {...getInputProps()} />
  3. Überprüfen Sie, dass disabled nicht true ist

TypeScript-Fehler​

  1. Aktualisieren Sie auf die neueste Dropup-Version
  2. Stellen Sie sicher, dass tsconfig.json die richtige moduleResolution hat
  3. Überprüfen Sie, dass @samithahansaka/dropup in dependencies ist, nicht in devDependencies

Speicherlecks​

  1. Stellen Sie sicher, dass Komponenten, die useDropup verwenden, ordnungsgemäß ausgehängt werden
  2. Rufen Sie bei Bedarf actions.reset() vor dem Aushängen auf
  3. Speichern Sie Dateien nicht im externen Zustand ohne Bereinigung

Kompatibilität​

Funktioniert es mit Next.js?​

Ja! Verwenden Sie die 'use client'-Direktive:

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

Funktioniert es mit React Native?​

Ja! Verwenden Sie den Native-Adapter:

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

useDropup({ adapter: NativeAdapter });

Unterstützt es SSR?​

Ja! Dropup ist SSR-sicher. Es verwendet Browser-APIs nur, wenn sie verfügbar sind.

Browser-Unterstützung?​

Alle modernen Browser:

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

Beitragen​

Wie kann ich beitragen?​

  1. Forken Sie das Repository
  2. Erstellen Sie einen Feature-Branch
  3. Reichen Sie einen Pull Request ein

Siehe CONTRIBUTING.md für Details.

Wie melde ich Fehler?​

Öffnen Sie ein Issue auf github.com/samithahansaka/dropup/issues.

Gibt es eine Roadmap?​

Schauen Sie sich die GitHub Issues und Discussions für geplante Features an.