Kategorie: js-library

Fileupload über den Browser – ein Überblick über diverse Lösungen

Beim Upload von Dateien über den Browser hat sich in den letzten Jahren viel getan.

Vor allem mit Canvas und JavaScript gibt es jetzt viele geniale Möglichkeiten wie

  • Bildvorschau vor dem Upload
  • Datei umbenennen
  • Bilder mit Watermarks versehen
  • Bildgröße anpassen
  • Bilder drehen, beschneiden und verändern
  • Text aus Dokumenten vor dem Upload auslesen

 

Hier also ein Überblick über diverse Möglichkeiten

filepond.js

https://pqina.nl/filepond/

Die Goodies:

  • Vanilla JavaScript – keine Abhängigkeiten zu jQuery o.ä.
  • Kann mit Base64-Dateien, Ordnerpfaden, Einzeldateien, mehreren Dateien und Links umgehen!
  • Funktioniert mit React, Vue and Angular und ist als jQuery-Plugin erhältlich.

 

jQuery-File-Upload

https://github.com/blueimp/jQuery-File-Upload

Goodies:

  • Drag’n’Drop
  • Fortschrittsanzeige
  • Kann angefangene und unterbrochene Uploads fortsetzen

Für micht interessante Links zu dem Tool, was Bildvorschau betrifft:

 

Übersicht anderer:

Drag and Drop JavaScript Bibliotheken Sammlung – Ziehen, verschieben und fallenlassen, Daten hochladen per Drag’n’Drop uvm

Ich glaube, das ist eine der schwierigsten und kompliziertesten und uninteressantesten Überschriften für einen Artikel.

Dabei ist das Thema Drag’n’Drop gar nicht so unwichtig.

Viele Webapps hängen von leichter Bedienung ab, was Sortierung oder Einordnung von „Elementen“ betrifft.

Eine gute Drag’n’Drop-Library hilft da zb schon ungemein, es gibt aber auch native Lösungen.

 

 

Also hier mal Infos dazu

Folien zum Thema

Native Lösungen ohne Bibliotheken

Die Zeit bleibt nicht stehen, daher werden viele Dinge, die früher durch JavaScript-Skripte gelöst wurden, direkt als native Funktion in den Browser integriert.

Es gibt daher Anweisungen für drag-Events, Notierung für draggable = true, ondragover, ondrop, dropzone usw.

Man kann sich also seine Lösung ohne andere Bibliotheken zusammenbauen – die Frage ist oft nur: Warum? Das Rad neu zu erfinden ist jetzt nicht gerade erstrebenswert. Aber wer’s will, bitteschön! Hier ein paar Links dazu:

Dragon Drop – einzige tastaturbedienbare Lösung

Draggable von Shopify

  • https://shopify.github.io/draggable/
  • Responsive, touchfreundlich, modern
  • Die Demo schaut gut aus, hat nette Toneffekte und könnte für GameDevs interessant sein. Außerdem steht dahinter eine potente Firma, die Interesse an einer Weiterentwicklung hat.
  • Draggable ist relativ neu und wurde in letzter Zeit oft erwähnt und geteilt.

 

Dragula

Diese JS-Bibliothek gibt es schon länger und ist bei uns daher auch schon länger am Radar

Draggabilly

jquery.shapeshift

  • http://mcpants.github.io/jquery.shapeshift/
  • Ähnlich wie jQuery-Masonry aber mit Drag and Drop.

Hootsuite Grid/Gridlist

Goold old jQuery Draggable, Sortable und Konsorten

Natürlich darf hier jQuery in der Auflistung nicht fehlen. Einer der Kernkompetenzen von jQuery war Drag’n’Drop. Gerade jQuery hat das Web einfacher und bedienbarer gemacht.