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:

Webseiten und SSL – Webseiten auf SSL umstellen und betreiben

Mit let’s encrypt haben wir ja eine günstige und einfache Möglichkeit bekommen, um Seiten mit SSL-Zertifikaten abzusichern.

Es gibt aber einige Fallstricke und Dinge zu berücksichtigen, wenn man Seiten richtig mit SSL absichern will. Der Artikel soll weiterhelfen und auch Links zu interessanten anderen Artikeln liefern.

Grundsätzlich wichtige Schritte

  • 301 Redirects einrichten
  • HTTP Strict Transport Security (HSTS) einrichten – das ist wichtig, weil bei einer 301er Weiterleitung immernoch über eine unsichere Verbindung kommuniziert wird. Cookies können so zb unverschlüsselt ausgelesen werden!
  • Mixed Content aufspüren und ausbessern – oft werden Bilder per HTTP ausgeliefert. Das gibt im Browser eine Mixed-Content-Warnung!

Interessante Artikel

 

https://www.troyhunt.com/the-6-step-happy-path-to-https/ – Super Zusammenfassung zu allen wichtigen Schritten und weiterführende Infos. Absolute Leseempfehlung!

 

 

Post Thumbnail by Sean MacEntee