HTML5 Drag and Drop Uploading
Why Stack Overflow recommends it
Stack Overflow users cite it as the tutorial they followed when asking why their drag and drop upload code, progress bar or JSON response handling is not working.
Recommended by 1 people across 1 different months, 2016 to 2018.
What it is
A Codecourse tutorial on building a multiple-file drag and drop uploader with the HTML5 File API, XMLHttpRequest and FormData, with a PHP script handling the uploads. It walks through a dropzone element, dragover/drop events, and sending files to the server.
What people said
Recommends Danijel · 2017-07 · Stack Overflow · on “Nonsensical values of loaded and total in AJAX file upload”
I am trying to build a progress bar for multiple files drag and drop upload by combining code from tutorial on multiple files drag and drop uploading [this video] and tutorial on progress bar uploading [LINK] . Javascript part is: var dropzone = document.getElementById("dropzone"); function updateProgress(e){ document.getElementById("progress").innerHTML = e.loaded + " of " + e.total; } function upload(files){ var formData = new FormData(), xhr = new XMLHttpRequest(), x; for(x = 0; x < files.length; x++){ formData.append("file[]", files[x]); } xhr.addEventListener("progress", updateProgress, false); xhr.open("post", "upload.php"); xhr.send(formData); } dropzone.ondrop = function(e){ e.preventDefa
Cites Stefanvp · 2016-01 · Stack Overflow · on “Javascript stops on JSON.parse(this.responseText) in XMLHttpRequest.onload/Uncaught SyntaxError: Unexpected token”
I'm trying to make a drag and drop upload field with a tutorial from codecourse/phpacademy [this video] , but after several hours of trying and figuring out why I'm not getting what I expected, I went to bed to try it the next day. It is two days later and I am lost. I am trying to create a div where a user can drop multiple images, which are immediately uploaded to the server. The server response should be a JSON-string containing one or more arrays with a name and a path for the uploaded file. This JSON string is then used to display the file's name on the upload page. What is working: I can drag and drop my image onto the div and the element changes style The files are uploaded I'm receiving a
Cites user9225102 · 2018-01 · Stack Overflow · on “OnDrag JavaScript/JQUERY”
I'm trying to do a drop and drag and I'm following this tutorial: [this video] but my events are not getting fired. What's the problem? var dropzone = $('#dropzone'); dropzone.ondragover = function() { console.log("entered"); this.className = 'dropzone dragover'; return false; }; dropzone.ondragleave = function() { this.className = 'dropzone'; return false; }; dropzone.ondrop = function(e) { e.preventDefault(); this.className = 'dropzone'; return false; }; .dropzone { border: 2px dashed #ccc; width: 100%; height: 100%; color: #ccc; text-align: center; padding: 60px; } .dropzone p { font-size: 25px; } .dropzone.dragover { border-color: #000; color: #000; } <script src=" [LINK] "></script> <div cla