StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POmultiple file upload using html5 drag-and-drop fails as multiple files get same content
text
Body
copied!<p>I need to transfer all the files dropped on an element to a server using HTML5 drag and drop. I provided the corresponding js code below. I have a servlet in the server side to collect the files and put it in a folder. This is working fine if I drop 1 or 2 files on the page. But, if i drop 4-10 files, all the files are getting created in the server but multiple files are set to same content and some files content is 0K.</p> <p>Can any of you please tell me how to achieve the correct behavior. My requirement is similar to gmail attachments!! Any solution which makes a sequential upload of files is much appreciable.</p> <pre><code>/* * Upload files to the server using HTML 5 Drag and drop from the folders on your local computer */ function uploader(place, status, target, show) { // Upload image files upload = function(file) { // Firefox 3.6, Chrome 6, WebKit if(window.FileReader) { // Once the process of reading file this.loadEnd = function() { bin = reader.result; xhr = new XMLHttpRequest(); xhr.open('POST', target+'?up=true', false); var body = bin; xhr.setRequestHeader('content-type', 'multipart/form-data;'); xhr.setRequestHeader("file-name", file.name ); xhr.setRequestHeader("mime-type", file.type ); // Firefox 3.6 provides a feature sendAsBinary () if(xhr.sendAsBinary != null) { xhr.sendAsBinary(body); // Chrome 7 sends data but you must use the base64_decode on the PHP side } else { xhr.open('POST', target+'?up=true&base64=true', true); xhr.setRequestHeader('UP-FILENAME', file.name); xhr.setRequestHeader('UP-SIZE', file.size); xhr.setRequestHeader('UP-TYPE', file.type); xhr.send(window.btoa(bin)); } if (show) { var newFile = document.createElement('div'); newFile.innerHTML = 'Loaded : '+file.name+' size '+file.size+' B'; document.getElementById(show).appendChild(newFile); } if (status) { document.getElementById(status).innerHTML = 'Loaded : 100%<br/>Next file ...'; } }; // Loading errors this.loadError = function(event) { switch(event.target.error.code) { case event.target.error.NOT_FOUND_ERR: document.getElementById(status).innerHTML = 'File not found!'; break; case event.target.error.NOT_READABLE_ERR: document.getElementById(status).innerHTML = 'File not readable!'; break; case event.target.error.ABORT_ERR: break; default: document.getElementById(status).innerHTML = 'Read error.'; } }; // Reading Progress this.loadProgress = function(event) { if (event.lengthComputable) { var percentage = Math.round((event.loaded * 100) / event.total); document.getElementById(status).innerHTML = 'Loaded : '+percentage+'%'; } }; // Preview images this.previewNow = function(event) { bin = preview.result; var img = document.createElement("img"); img.className = 'addedIMG'; img.file = file; img.src = bin; document.getElementById(show).appendChild(img); }; reader = new FileReader(); // Firefox 3.6, WebKit if(reader.addEventListener) { reader.addEventListener('loadend', this.loadEnd, false); if (status != null) { reader.addEventListener('error', this.loadError, false); reader.addEventListener('progress', this.loadProgress, false); } // Chrome 7 } else { reader.onloadend = this.loadEnd; if (status != null) { reader.onerror = this.loadError; reader.onprogress = this.loadProgress; } } var preview = new FileReader(); // Firefox 3.6, WebKit if(preview.addEventListener) { preview.addEventListener('loadend', this.previewNow, false); // Chrome 7 } else { preview.onloadend = this.previewNow; } // The function that starts reading the file as a binary string reader.readAsBinaryString(file); // Preview uploaded files if (show) { preview.readAsDataURL(file); } // Safari 5 does not support FileReader } else { xhr = new XMLHttpRequest(); xhr.open('POST', target+'?up=true', true); xhr.setRequestHeader('UP-FILENAME', file.name); xhr.setRequestHeader('UP-SIZE', file.size); xhr.setRequestHeader('UP-TYPE', file.type); xhr.send(file); if (status) { document.getElementById(status).innerHTML = 'Loaded : 100%'; } if (show) { var newFile = document.createElement('div'); newFile.innerHTML = 'Loaded : '+file.name+' size '+file.size+' B'; document.getElementById(show).appendChild(newFile); } } }; // Function drop file this.drop = function(event) { event.preventDefault(); var dt = event.dataTransfer; var files = dt.files; for (var i = 0; i<files.length; i++) { var file = files[i]; upload(file); } }; // The inclusion of the event listeners (DragOver and drop) this.uploadPlace = document.getElementById(place); this.uploadPlace.addEventListener("dragover", function(event) { event.stopPropagation(); event.preventDefault(); }, true); this.uploadPlace.addEventListener("drop", this.drop, false); } </code></pre> <p>Thank you.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload