JavaScript – Async, Await und Promise anhand FileInput

Downloads:

Async onload via Promise behandeln

Hier definieren wir die Funktion, welche nach dem Bestätigen eines File Inputs aufgerufen werden soll.
Diese beinhaltet das Bearbeiten des Events mit einem FileReader und soll uns das Ergebnis (hier eine Datei) mittels Promise zurückreichen.
Somit haben wir das Einlesen einer Datei schön und übersichtlich gekapselt.

function onFileUpload(input) {
    return new Promise((resolve, reject) => {
        var reader = new FileReader();
        reader.onload = resolve;
        reader.readAsDataURL(input.target.files[0]);
    });
}

Wichtig ist hier, dass „reader.onload“ das „resolve“ vom Promise aufruft.

Async Funktion „workWithFile“ definieren

Diese Funktion soll von dem File-Input aufgerufen/ausgelöst werden.
Zu beachten ist hier, dass die Funktion mit dem Attribut „async“ gekennzeichnet ist.
Dies erlaubt eine Funktion mit „await“ aufzurufen, welche einen Promise liefert.
So lässt sich onFileUpload, welche ein Promise liefert wie synchroner Code aufrufen.

async function workWithFile(input) {
    let result = await onFileUpload(input);
    let img = document.createElement("img");
    img.src = result.target.result;
    document.body.appendChild(img);
}

Definieren des File Input

<input type="file" id="inputFile">

Onchange Funktion hinzufügen

Sobald sich das Input nun ändert (wenn man eine Datei im Dialog auswählt), soll nun die Funktion „workWithFile“ aufgerufen werden.

window.onload = () => {
    document.getElementById("inputFile").onchange = workWithFile;
};

Fazit

ES7 erlaubt das nutzen von async und wait, welche das Behandeln von Promises erheblich vereinfachen und überschauberer gestalten lassen.