Display Code

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Drag and Drop</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed&family=Roboto:ital,wght@0,400;0,500;1,400&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="/css/styles.css">
    <link rel="stylesheet" href="/css/formstyles.css">
    <style>
        #dropzone {
            border: 2px dashed #ccc;
            border-radius: 20px;
            text-align: center;
            background-color: white;
            min-height: 236px;
            padding: 20px 0 10px 0;
            margin-bottom: 25px;
        }
        #dropzone.highlight {
            border-color: purple;
            background-color: #FFCBCB;
        }
        .preview_img {
            height: 100%;
            max-height: 120px;
            width: auto;
            margin: 25px auto 12px auto;
            display: block;
        }
    </style>
</head>
<body>
    <div id="container">
        <h1>Drag and Drop</h1>

        <h2>Progressive Enhancement im Einsatz</h2>

        <p>Auf mobilen Geräten nützt &quot;Drag and Drop&quot; herzlich wenig. Deshalb empfehle ich dir, das <code>&lt;input type=&quot;file&quot;&gt;</code> immer anzuzeigen, damit die Dateiwahl auch auf die &quot;klassische&quot; Art und Weise möglich ist.</p>
        
        <p>Das Formular und das Verschicken funktioniert auch ohne JavaScript. Die Vorschau- und die &quot;Drag and Drop&quot;-Funktionalität dient zur <strong>Verbesserung der Usability</strong>, ersetzt aber nicht die Kernfunktionalität beim Verschicken.</p>

        <p>Um das Beispiel im Code zu verstehen, solltest du die beiden einleitenden Themen &quot;Vorschaubild&quot; und &quot;Drag Queens&quot; bereits angeschaut haben.</p>
        <form method="post" enctype="multipart/form-data">
            <input type="hidden" name="MAX_FILE_SIZE" value="30000">
            <div id="dropzone">
                <input type="file" accept="image/*" name="myFile" id="myFile">
            </div>
            <div class="form_control" style="text-align: center;">
                <button type="submit" name="go" class="btn btn-blue" disabled>Upload (disabled)</button>
            </div>
        </form>

<script>
const inputElement = document.getElementById("myFile");
inputElement.addEventListener("change", handleFiles, false);

const dropzone = document.getElementById("dropzone");
dropzone.addEventListener('dragenter', highlightDropzone, false);
dropzone.addEventListener('dragover', highlightDropzone, false);
dropzone.addEventListener('dragleave', unhighlightDropzone, false);
dropzone.addEventListener('drop', dropFunction, false);

function highlightDropzone(event) {
    dropzone.classList.add('highlight')
    event.preventDefault();
    event.stopPropagation();
}

function unhighlightDropzone(event) {
    dropzone.classList.remove('highlight')
    event.preventDefault();
    event.stopPropagation();
}

function dropFunction(event) {
    dropzone.classList.remove('highlight')
    event.preventDefault();
    event.stopPropagation();

    if (event.dataTransfer.items.length > 1) {
        alert("Sie können nur eine Datei auf's Mal hochladen");
    }
    else {
        let mime = event.dataTransfer.items[0].type;
        if (mime.startsWith("image/")) {
            let dt = event.dataTransfer;
            let filesFromTransfer = dt.files;
            // Hier findet die "Übergabe" an das Upload-Form statt
            inputElement.files = filesFromTransfer;
            handleFiles();
        }
        else {
            alert("Unerlaubter Dateityp, bitte wählen Sie ein Bild aus");
        }
    }
}

function handleFiles() {
    const fileList = inputElement.files;
    // Theoretisch ginge auch eine Vorschau von mehreren Bildern,
    // wir behandeln nur den Upload von EINEM Bild
    const myFile = fileList[0];

    if (myFile.type.startsWith("image/")) {
        const previewImg = document.createElement("img");
        previewImg.classList.add("preview_img");
        previewImg.file = myFile;
        dropzone.append(previewImg);

        const legend = document.createElement("p");
        legendText = document.createTextNode("Dateigrösse: " + myFile.size + " Bytes");
        legend.appendChild(legendText);
        dropzone.append(legend);

        const reader = new FileReader();
        reader.onload = (e) => {
            previewImg.src = e.target.result;
        };
        reader.readAsDataURL(myFile);
    }
    else {
        alert("Unerlaubter Dateityp, bitte wählen Sie ein Bild aus");
    }
}
</script>
</body>
</html>