Question

Recently I’ve been looking into adding a simple HTML5 drag and drop to my already simple php file upload script.
I have read lots of tutorials and other solutions but I can’t seem to understand the whole sending the file to server part.
From what I understand, XMLHttpRequest will send the data, but it will do it without reloading the page. This, I do not want. Currently the script I’m using will take the POST data and produce the file upload output, eg. server download link, thumbnail if image etc.

How can I have the drag and drop submit the POST data and either access the upload output or reload the page?

Edit:
I’m using the following for the drag and drop:

    <div id="drop_zone">Drag and drop a file here</div>

    <script>
          function handleFileSelect(evt) {
            evt.stopPropagation();
            evt.preventDefault();

            var files = evt.dataTransfer.files; // FileList object.


            uploadFile(files[0]); //<-- This is where most examples will use XMLHttpRequest to construct form and send data
          }

        function handleDragOver(evt) {
            evt.stopPropagation();
            evt.preventDefault();
            document.getElementById('drop_zone').style.backgroundColor = "#faffa3";
            evt.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
        }
        function handleDragLeave(evt) {
            document.getElementById('drop_zone').style.backgroundColor = "";
        }

          // Setup the dnd listeners.
          var dropZone = document.getElementById('drop_zone');
          dropZone.addEventListener('dragover', handleDragOver, false);
          dropZone.addEventListener('drop', handleFileSelect, false);
          dropZone.addEventListener('dragleave', handleDragLeave, false);                 
    </script>

Answer 1

After more reading and searching around I’ve come to the conclusion that what I originally wanted cannot be done.

The solution I am going with is to simply have a large transparent/hidden <input type="file"> covering the drop zone. The dropped filename will be read from the input with javascript and displayed in the drop zone. This of course will rely on the browser to support the drag and drop files into html file inputs.
From there my upload script will pretty much operate as if the user had used the visible file selector.

Apologies for not being too clear on what I wanted. I wasn’t so sure myself. And thanks for the replies/comments.