Eine nahtlose Upload-Erfahrung mit Uppy gestalten
Datei-Uploads sind ein zentraler Bestandteil moderner Webanwendungen. Dieser DevTip zeigt, wie Sie mit Uppy, einem leistungsfähigen JavaScript-Dateiuploader, eine effiziente und benutzerfreundliche Upload-Erfahrung schaffen.
Einführung
Datei-Uploads in Webanwendungen erfordern eine Balance aus Benutzererlebnis, Performance und Sicherheit. Uppy ist ein modularer JavaScript-Dateiuploader, der in all diesen Bereichen überzeugt und eine robuste Lösung für die Verwaltung von Datei-Uploads im Browser bietet.
Welche Tools sind für Uploads im Browser beliebt?
Uppy hebt sich im Ökosystem der Datei-Uploads durch seine moderne Architektur, seinen umfangreichen Funktionsumfang und die hervorragende Developer Experience hervor. Es bietet eine umfassende Lösung mit:
- Drag-and-drop-Funktionalität
- Fortschrittsanzeigen
- Funktionen zur Dateivorschau
- Unterstützung für fortsetzbare Uploads
- Integrationen mit Remote-Anbietern
Uppy in einer Browser-Umgebung einrichten
Sie können Uppy mit npm installieren:
npm install @uppy/core @uppy/dashboard @uppy/xhr-upload
Für modulbasierte Anwendungen importieren und initialisieren Sie Uppy wie folgt:
import { Uppy } from '@uppy/core'
import Dashboard from '@uppy/dashboard'
import XHRUpload from '@uppy/xhr-upload'
import '@uppy/core/css/style.min.css'
import '@uppy/dashboard/css/style.min.css'
const uppy = new Uppy().use(Dashboard, {
inline: true,
target: '#drag-drop-area',
}).use(XHRUpload, { endpoint: '/upload', fieldName: 'file' })
Alternativ verwenden Sie für schnelle Prototypen das CDN:
<link href="https://releases.transloadit.com/uppy/v4.13.1/uppy.min.css" rel="stylesheet" />
<script type="module">
import { Uppy, Dashboard, XHRUpload } from 'https://releases.transloadit.com/uppy/v4.13.1/uppy.min.mjs'
</script>
Eine einfache Upload-Funktion umsetzen
Erstellen Sie mit Uppy eine einfache Upload-Oberfläche:
<div id="drag-drop-area"></div>
Verwenden Sie diese Initialisierung anstelle der vorherigen, um Event-Handler hinzuzufügen. Der
Endpunkt /upload muss multipart-POST-Requests mit einem Feld file akzeptieren und eine
erfolgreiche JSON-Antwort zurückgeben. XHRUpload selbst bietet keine fortsetzbaren oder gechunkten
Uploads; verwenden Sie dafür das Tus-Plugin.
const uppy = new Uppy()
.use(Dashboard, {
inline: true,
target: '#drag-drop-area',
})
.use(XHRUpload, { endpoint: '/upload', fieldName: 'file' })
.on('upload-success', (file, response) => {
console.log(`${file.name} uploaded successfully`)
})
.on('upload-error', (file, error) => {
console.error(`Error uploading ${file.name}:`, error)
})
uppy.on('complete', (result) => {
console.log('Upload complete! Files:', result.successful)
})
Moderne Funktionen und Möglichkeiten
Uppy entwickelt sich kontinuierlich weiter, um den Anforderungen moderner Webentwicklung gerecht zu werden. Uppy 4.x bringt mehrere leistungsstarke Funktionen mit:
- Native TypeScript-Unterstützung für mehr Typsicherheit
- React-Hooks-Integration für die nahtlose Einbindung in React-Anwendungen
- Einen integrierten Bildeditor für direkte Anpassungen
- Integration mit Google Photos für die einfache Auswahl entfernter Dateien
- Verbesserte Fehlerbehandlung und konfigurierbare Retry-Mechanismen
Bewährte Verfahren für Sicherheit
Sorgen Sie für robuste Sicherheit, indem Sie Client und Server so konfigurieren, dass sie Datei-Uploads validieren und schützen. Erzwingen Sie auf der Client-Seite Beschränkungen, um Risiken zu minimieren:
uppy.setOptions({
restrictions: {
maxFileSize: 2 * 1024 * 1024, // 2MB
allowedFileTypes: ['image/*', '.pdf'],
maxNumberOfFiles: 5,
},
})
Installieren Sie für einen bestehenden Express-Server das Paket cors mit npm install cors und
konfigurieren Sie es für den Ursprung Ihres Frontends. CORS ersetzt weder Authentifizierung noch
Autorisierung oder serverseitige Validierung.
const cors = require('cors')
app.use(
cors({
origin: 'https://your-domain.com',
methods: ['POST'],
allowedHeaders: ['Content-Type', 'Authorization'],
}),
)
Der folgende JavaScript-Helper veranschaulicht Metadatenprüfungen in einem bestehenden Express/Multer-Handler. Behandeln Sie MIME-Typen als nicht vertrauenswürdig, validieren Sie Dateiinhalte vor der Verwendung und erzwingen Sie Größenbeschränkungen bereits beim Empfang der Daten, nicht erst nach Abschluss des Uploads:
const validateFile = (file) => {
const allowedTypes = ['image/jpeg', 'image/png', 'application/pdf']
if (!allowedTypes.includes(file.mimetype)) {
throw new Error('Invalid file type')
}
if (file.size > 2 * 1024 * 1024) {
throw new Error('File too large')
}
}
Häufige Probleme beheben
CORS-Konfiguration
Verwenden Sie die obige CORS-Middleware mit dem tatsächlichen Ursprung Ihres Frontends erneut. Ersetzen Sie den explizit angegebenen Ursprung nicht durch einen Platzhalter. CORS ist keine Authentifizierung; autorisieren Sie Upload-Requests unabhängig davon.
Netzwerkfehler
Das Dashboard kann fehlgeschlagene Uploads wiederholen. Rufen Sie für eine eigene Schaltfläche zum
Wiederholen im zugehörigen Click-Handler die Methode retryAll() auf der bestehenden Instanz auf:
await uppy.retryAll()
Validierung von Dateitypen
Behandeln Sie Beschränkungen für Dateitypen elegant, um Benutzer über Probleme zu informieren:
uppy.on('restriction-failed', (file, error) => {
console.error(error)
// Display a user-friendly error message
showErrorNotification(`${file.name}: ${error.message}`)
})
Tipps zur Performance-Optimierung
Verbessern Sie Performance und Benutzererlebnis mit diesen Tipps:
- Wählen Sie das Tus-Plugin und einen tus-kompatiblen Endpunkt, wenn große Dateien fortsetzbare Uploads erfordern
- Implementieren Sie eine saubere Fehlerbehandlung und Retry-Mechanismen
- Setzen Sie Komprimierung ein, wo es sinnvoll ist
- Überwachen Sie den Upload-Fortschritt und geben Sie Feedback in Echtzeit
const uppy = new Uppy({
autoProceed: true,
allowMultipleUploadBatches: true,
debug: process.env.NODE_ENV === 'development',
})
uppy.on('upload-progress', (file, progress) => {
const percent = (progress.bytesUploaded / progress.bytesTotal) * 100
updateProgressBar(percent)
})
Fazit
Uppy bietet eine robuste Lösung für die Verarbeitung von Datei-Uploads in modernen Webanwendungen. Der umfangreiche Funktionsumfang, die starken Sicherheitsfunktionen und die hervorragende Developer Experience machen es zur idealen Wahl, um Datei-Uploads in Ihre Projekte zu integrieren.
Für fortgeschrittene Lösungen zur Dateiverarbeitung und -speicherung lohnt sich ein Blick auf den Service für Datei-Uploads von Transloadit und Uppy.