Lehr-Howto: Bilder aus Clipboard hochladen

Für meine Lösung wird zuerst jQuery eingebunden, ich mach das einfach im header:

<script src="https://code.jquery.com/jquery-latest.min.js"</script>

Um das später hochgeladene Bild mit einem Post-Request zu verschicken erstelle ich zuerst einen Form-Tag und darunter noch einen Submit-Button zum versenden

<form action="/upload.php" method="POST"> <button type="submit" id="upload">Upload</button> </form>

Darin erstelle ich als nächstes ein Input Feld, das ich auf hidden setze.

<input type="hidden" id="base64_file_form"/>

Der type wird absichtlich auf "hidden" gesetzt und es wird ein eventlistener auf die Seite gesetzt, der auf die Tastenkombination "strg+v" ('paste') hört. Das Bild wird in base64 umgewandelt und ins Input Feld gespeichert.

document.getElementById("base64_file_form").value = evt.target.result; document.getElementById("base64_file_form").setAttribute('name', 'base64_file');

Base64 ist ein Verfahren zur Kodierung von 8-bit-Binärdaten (z.B. ausführbare Dateien oder Bilder) in eine Zeichenfolge, die nur aus ASCII-Zeichen besteht. So kann man das Bild z.B. als Post Request verschicken und in seine Datenbank speichern. Danach füge ich in mein HTML-File noch ein div ein, in dem der User das Bild das er eingefügt hat sofort zur Überprüfung ansehen kann. Darum gebe ich dem Div eine bestimmte Größe, damit wir das Bild danach auch sehen.

<div id="picture"></div> <style> #picture { background-size: contain; background-repeat: no-repeat; max-height: 150px; } </style>

Auf dieses div wird in dem Script der base64 String als Background Image gesetzt.

document.getElementById("picture").style.backgroundImage = "url('"+evt.target.result+"')";

Für die Drag & Drop-Funktion erstelle ich ein Div. Dieses nenne ich die “dropzone”, da in diesem Bereich ein Bild hineingezogen wird. Auch dieses bekommt eine bestimmte Breite und eine bestimmte Höhe und ich gebe dem Div einen gestrichelten Rand, damit ist die Dropzone in der das Bild gezogen wird übersichtlicher.

<div id="dropzone"> <input type="hidden" id="dropy"/> </div> <style> #dropzone { width: 200px; height: 100px; border: 1px dashed #000000; } </style>

In die Dropzone verschachtelte ich noch ein Input Feld, in das auch wie oben der base64 String geschrieben wird. Somit kann man auch hier ein Post Request abfeuern.

window.addEventListener("load", function() { $("#dropzone") .bind("dragover", function(e) { $(this).addClass("dragover"); return false; }) .bind("dragleave", function(e) { $(this).removeClass("dragover"); e.stopPropagation(); e.preventDefault(); return false; }) .bind("drop", function(e) { $(this).removeClass("dragover"); e.stopPropagation(); e.preventDefault(); readImages(e); return false; }); $(document.body) .bind("dragover", function(e) { return false; }) .bind("drop", function(e) { e.stopPropagation(); e.preventDefault(); return false; }); });

Es ist wichtig, auch einen Event Listener auf diese Funktion zu setzen. So wird nämlich die Funktion aufgerufen wenn ein Bild hineingezogen wird. Auch hier wird wieder der Background von der id=”picture” gesetzt für die Kontrolle.

function readImage(file, event) { document.getElementById("dropy").value = event.target.result; document.getElementById("base64_image").style.backgroundImage = "url('"+event.target.result+"')"; document.getElementById("dropzone").setAttribute('name', 'base64_file'); } function readImages(event) { var files = event.originalEvent.dataTransfer.files; $.each( files, function(index, file){ var fileReader = new FileReader(); fileReader.onload = (function(file) { return readImage(file, event); } })(file); fileReader.readAsDataURL(file); return found = true; }); }

Zu beachten bei solchen Aufgaben ist, dass ein User keinen Code bzw. andere Files hochladen kann, diese könnten unerwünschten Code beinhalten und Schaden an der Applikation anrichten. Ein sicherer Upload für Bilder kann z.B. so aussehen:

//checking the file extension $allowed_extensions = array('png', 'jpg', 'jpeg', 'gif'); if(!in_array($extension, $allowed_extensions)) { die(); } //checking the file size $max_size = 500*1024; //500 KB if($_FILES['datei']['size'] > $max_size) { die(); }

Dabei wird überprüft, dass wirklich eine Bilddatei hochgeladen wird, außerdem wird auch die Größe des Bildes überprüft, um zu große Dateien auszuschließen. Man könnte dies auch schon im Frontend abfragen, doch ein Angreifer könnte den JavaScript Code manipulieren um trotzdem andere Dateiformate hochladen. Darum macht es mehr Sinn die Überprüfung im Backend (serverseitig) durchzuführen. Um auf Nummer sicher zu gehen kann auch explizit angeben werden, das der Ordner in welchem die Uploads landen, keine ausführbaren Rechte besitzt.

So ein Jahr vergeht wirklich schnell, und auch wenn das Projekt “Bild Hochladen beim Link-Shortener” für jeden ausgelernten Entwickler vielleicht ein Kinderspiel ist, bin ich doch überrascht, das nun so locker “hinzucoden”. Mein Ich vor einem Jahr wäre begeistert von meinen in dieser verhältnismäßig kurzen Zeit erworbenen Fähigkeiten. Anexia bildet übrigens immer wieder junge Leute als Softwareentwickler aus, und ich finde bewerben lohnt sich: joinourrevolution.net