Drag-&-Drop-Upload
Dateien werden direkt in eine Upload-Zone gezogen und übertragen.
Referenz · App-Entwicklung
App-Entwicklung mit Flutter – intuitive File-Upload-Lösung für mobile Endgeräte
Webect hat eine plattformübergreifende Flutter-App für das Datei-Management auf mobilen Endgeräten entwickelt. Drag-&-Drop-Upload, URL-Import und eine Fortschrittsanzeige machen das Hochladen einfach, die Anbindung an AWS und eine REST-API sorgt für die Integration in bestehende Cloud-Infrastrukturen.
- Kunde
- Webect Eigenentwicklung
- Branche
- Technologie
- Leistung
- App-Entwicklung (iOS & Android)
- Technologie
- Flutter, AWS
- Jahr
- 2023
- Dauer
- 2 Monate
Ausgangslage
Die Herausforderung
Dateien vom Smartphone oder Tablet in ein Unternehmenssystem zu übertragen, ist im Alltag oft umständlicher als nötig. Gefragt war eine mobile App, mit der Nutzer Dateien unterschiedlicher Formate – etwa ZIP, PDF, DOCX und Bilder – unkompliziert hochladen können. Dabei sollten zwei Wege möglich sein: das direkte Hochladen per Drag & Drop und der Import über eine URL, wenn eine Datei bereits online liegt.
Die Oberfläche sollte selbsterklärend sein, sodass Nutzer ohne Einweisung zurechtkommen, und sich auf unterschiedlichen Geräten responsiv verhalten. Technisch musste die App sowohl auf iOS als auch auf Android laufen und sich vollständig in eine bestehende Backend-Infrastruktur einfügen. Upload, Authentifizierung und Datei-Management sollten über eine saubere Schnittstelle laufen, die Speicherung skalierbar in der Cloud erfolgen.
Lösung
Unser Vorgehen und die Lösung
Webect hat das gesamte UX/UI-Design und die Entwicklung der App übernommen. In Figma haben wir einen klaren Upload-Flow entworfen: Ein mehrschrittiger Upload-Dialog führt Nutzer vom Auswählen der Datei bis zum Abschluss der Übertragung. Eine Drag-&-Drop-Zone und die URL-Import-Funktion sind gleichwertig in den Dialog eingebunden, ein Fortschrittsbalken zeigt jederzeit, wie weit der Upload ist.
Für die Entwicklung haben wir Flutter mit Dart eingesetzt. So entsteht aus einer gemeinsamen Codebasis eine App für iOS und Android, die sich auf beiden Plattformen nativ anfühlt. Das Design wurde konsequent nutzerorientiert umgesetzt und passt sich unterschiedlichen Bildschirmgrößen an. Unterstützt werden gängige Formate wie ZIP, PDF, DOCX und Bilder, sodass Nutzer nicht über Dateitypen nachdenken müssen.
Im Hintergrund ist die App direkt an AWS und eine REST-API angebunden. AWS stellt die skalierbare Cloud-Infrastruktur für die Speicherung und Verarbeitung der Dateien bereit, die REST-API übernimmt Upload, Authentifizierung und Datei-Management. Dadurch fügt sich die App in bestehende Cloud-Infrastrukturen ein, statt ein eigenes Insel-Backend zu benötigen. Von der Konzeption bis zum produktiven Einsatz vergingen zwei Monate.
URL-Import
Bereits online liegende Dateien lassen sich per URL importieren.
Fortschrittsanzeige
Ein Fortschrittsbalken zeigt den Status jedes Uploads.
Mehrschrittiger Upload-Dialog
Ein geführter Dialog leitet Nutzer sicher durch den Upload.
Mehrere Dateiformate
Unterstützt werden unter anderem ZIP, PDF, DOCX und Bilder.
AWS- und REST-API-Anbindung
Upload, Authentifizierung und Datei-Management laufen über die bestehende Cloud-Infrastruktur.
Projektablauf
Vom Kick-off zum Go-live
- 01
Analyse
Aufnahme der Anforderungen an Dateiformate, Upload-Wege und Backend-Integration.
- 02
Konzept & Design
UX/UI-Design des Upload-Flows in Figma.
- 03
Entwicklung
Flutter-App für iOS und Android mit Anbindung an AWS und REST-API.
- 04
Launch
Produktiver Einsatz der App nach zwei Monaten.
Ergebnis
Was das Projekt bewirkt
Die App ist produktiv im Einsatz
Nutzer laden Dateien per Drag & Drop oder URL ohne Umwege hoch
Die selbsterklärende Oberfläche kommt ohne aufwendige Einweisung aus
Die AWS-Anbindung sorgt für eine skalierbare und verfügbare Datei-Infrastruktur
Eingesetzte Technologien
- Flutter
- Dart
- AWS
- REST-API
- Figma
Leistungen
Leistungen in diesem Projekt
FAQ
Fragen zum Projekt
Sie planen etwas Ähnliches? Wir beraten Sie gern persönlich.
Projekt besprechenWie lange dauerte die Entwicklung der Flutter-App?
Die App wurde in zwei Monaten entwickelt. In dieser Zeit hat Webect den Upload-Flow in Figma gestaltet, die App mit Flutter für iOS und Android umgesetzt und die Anbindung an AWS sowie die REST-API für Upload, Authentifizierung und Datei-Management realisiert.
Warum Flutter für eine File-Upload-App?
Mit Flutter entsteht aus einer gemeinsamen Codebasis eine App für iOS und Android. Das spart Entwicklungs- und Wartungsaufwand und sorgt für ein einheitliches Nutzererlebnis auf beiden Plattformen, ohne auf ein natives Look-and-Feel verzichten zu müssen.
Welche Dateiformate unterstützt die App?
Die App ist für gängige Formate ausgelegt, darunter ZIP-Archive, PDF- und DOCX-Dokumente sowie Bilder. Dateien lassen sich per Drag & Drop hochladen oder über eine URL importieren, ein Fortschrittsbalken zeigt dabei den aktuellen Status jedes Uploads an.
Weitere Referenzen
Das könnte Sie auch interessieren
HiScout Kundenportal: Self-Service-Plattform für GRC-Software
HiScout
BanksAPI-Integration: Digitale Zahlungsprozesse durch API-Anbindung
Syvera / Orbird
Neuer B2B-E-Commerce-Shop: Effizienz, Performance und Nutzererlebnis neu gedacht
Äbbes Tobacco
Shopware E-Commerce Store mit API-Integration zum Versanddienstleister
Hitchcock
React.js ERP Lösung: Moderne Technologie für effiziente Unternehmensprozesse
workstool
Modernes Bestellsystem mit Shopware und API: Eine zukunftssichere E-Commerce-Lösung
Hygienebedarf GmbH
Ähnliches Projekt?
Lassen Sie uns über Ihr Vorhaben sprechen.
Erzählen Sie uns, was Sie vorhaben – wir geben Ihnen eine ehrliche Einschätzung zu Aufwand, Zeitrahmen und Vorgehen.
