File upload (Drag and Drop) not working

Question

I tried to implement a drag and drop functionality to my site to upload files to the server. But it's not working, this is the code I used:

main.php

<!DOCTYPE html>
<html>
    <head>
        <title>Drag and Drop Upload</title>
        <script src="js/jquery-1.12.3.min.js"></script>
    </head>
    <body>
        <div id="uploadzone" style="width: 100px; height: 100px; background-color: red"></div>
        <span id="progress">Aktueller Fortschritt: 0%</span>
        <script type="text/javascript" src="upload.js"></script>
    </body>
</html>

upload.js

var filelist = [];  // Ein Array, das alle hochzuladenden Files enthält
var totalSize = 0; // Enthält die Gesamtgröße aller hochzuladenden Dateien
var totalProgress = 0; // Enthält den aktuellen Gesamtfortschritt
var currentUpload = null; // Enthält die Datei, die aktuell hochgeladen wird

var uploadzone = document.getElementById('uploadzone');

if(uploadzone) {

    uploadzone.addEventListener('dragover', function (e) {
        e.stopPropagation();
        e.preventDefault();
        e.dataTransfer.dropEffect = 'copy';
    });

    uploadzone.addEventListener('drop', handleDropEvent, false);
}

function handleDropEvent(event)
{
    event.stopPropagation();
    event.preventDefault();

    // event.dataTransfer.files enthält eine Liste aller gedroppten Dateien
    for (var i = 0; i < event.dataTransfer.files.length; i++)
    {
        filelist.push(event.dataTransfer.files[i]);  // Hinzufügen der Datei zur Uploadqueue
        totalSize += event.dataTransfer.files[i].size;  // Hinzufügen der Dateigröße zur Gesamtgröße
    }
}

function startNextUpload()
{
    if (filelist.length)  // Überprüfen, ob noch eine Datei hochzuladen ist
    {
        currentUpload = filelist.shift();  // nächste Datei zwischenspeichern
        uploadFile(currentUpload);  // Upload starten
    }
}

function uploadFile(file)
{
    var xhr = new XMLHttpRequest();    // den AJAX Request anlegen
    xhr.open('POST', 'upload.php');    // Angeben der URL und des Requesttyps

    var formdata = new FormData();    // Anlegen eines FormData Objekts zum Versenden unserer Datei
    formdata.append('uploadfile', file);  // Anhängen der Datei an das Objekt
    xhr.send(formdata);    // Absenden des Requests

    xhr.upload.addEventListener("progress", handleProgress);
    xhr.addEventListener("load", handleComplete);
    xhr.addEventListener("error", handleError);
}

function handleComplete(event)
{
    totalProgress += currentUpload.size;  // Füge die Größe dem Gesamtfortschritt hinzu
    startNextUpload(); // Starte den Upload der nächsten Datei
}

function handleError(event)
{
    alert("Upload failed");    // Die Fehlerbehandlung kann natürlich auch anders aussehen
    totalProgress += currentUpload.size;  // Die Datei wird dem Progress trotzdem hinzugefügt, damit die Prozentzahl stimmt
    startNextUpload();  // Starte den Upload der nächsten Datei
}

function handleProgress(event)
{
    var progress = totalProgress + event.loaded;  // Füge den Fortschritt des aktuellen Uploads temporär dem gesamten hinzu
    document.getElementById('progress').innerHTML = 'Aktueller Fortschritt: ' + (progress / totalSize) + '%';
}

upload.php

<?php
$file = $_FILES['uploadfile'];

if (!empty($file['name']))
{
    move_uploaded_file($file['tmp_name'], "uploads/".$file['name']);
}

I followed a tutorial to do this, but as said, it's not working. Hope you are not to irritated of the german comments.

I have no idea why it's not working, I get no errors at all (neither "normally visible", nor in console) and the network tabs shows me that the file upload.php seems to be loaded... Does anybody have an idea why it's not working?

Answer 1

Okay, problem solved... It wasn't about the code, my www-data user on my Server wasn't owner of the "uploads" folder, so had no permission to upload..

Any tips to improve are still welcome!

File upload (Drag and Drop) not working

Question

1 answers

solution1
0 2016-04-07 09:51:10

File upload (Drag and Drop) not working

Question

1 answers

solution1 0 2016-04-07 09:51:10

solution1
0 2016-04-07 09:51:10