multiple file uploads enabled

This commit is contained in:
Ville Rantanen
2018-02-15 22:22:19 +02:00
parent 7fec444a2f
commit 0ff3f59c03
2 changed files with 28 additions and 13 deletions

View File

@@ -8,20 +8,32 @@ function index_form_enter(event) {
} }
function index_form_submit() { function index_form_submit() {
window.location = window.location + "/list/" + document.getElementById("index_form_name").value; window.location = window.location + "/list/" +
document.getElementById("index_form_name").value;
} }
function UploadFile(file) { function UploadFile(file,file_no,files_total) {
if (uploadTurn != file_no) {
// Wait for our turn to upload. check every 0.5s
setTimeout(
function() {
UploadFile(file,file_no,files_total);
},
500
);
return
}
var file_counter = "(" + (file_no + 1) + "/" + files_total + ") ";
var xhr = new XMLHttpRequest(); var xhr = new XMLHttpRequest();
if (xhr.upload) { if (xhr.upload) {
var o = document.getElementById("progress"); var o = document.getElementById("progress");
xhr.upload.addEventListener("progress", function(e) { xhr.upload.addEventListener("progress", function(e) {
var pc = parseInt((e.loaded / e.total * 100)); var pc = parseInt((e.loaded / e.total * 100));
o.innerHTML = "Uploading: " + pc + "%"; o.className = "";
o.innerHTML = "Uploading: " + file_counter + pc + "%";
if (pc == 100) { if (pc == 100) {
o.innerHTML = "Finishing up... wait..."; o.innerHTML = "Finishing up " + file_counter + "wait ...";
} }
// upload works, hide button // upload works, hide button
document.getElementById("list_upload_button").hidden = true; document.getElementById("list_upload_button").hidden = true;
@@ -30,12 +42,15 @@ function UploadFile(file) {
// file received/failed // file received/failed
xhr.onreadystatechange = function(e) { xhr.onreadystatechange = function(e) {
if (xhr.readyState == 4) { if (xhr.readyState == 4) {
progress.className = (xhr.status == 200 ? "success" : "failure"); o.className = (xhr.status == 200 ? "success" : "failure");
if (xhr.status == 200) { if (xhr.status == 200) {
if (file_no + 1 == files_total) {
location = location; location = location;
}
} else { } else {
o.innerHTML = xhr.response; o.innerHTML = xhr.response;
} }
uploadTurn += 1;
} }
}; };
@@ -55,13 +70,12 @@ function FileSelectHandler(e) {
// fetch FileList object // fetch FileList object
var files = e.target.files || e.dataTransfer.files; var files = e.target.files || e.dataTransfer.files;
uploadTurn = 0;
// process all File objects // process all File objects
for (var i = 0, f; f = files[i]; i++) { for (var i = 0, f; f = files[i]; i++) {
UploadFile(f); UploadFile(f,i,files.length);
} }
} }
// Variable to stop parallel uploads
var uploadTurn = -1;

View File

@@ -6,7 +6,8 @@
<form id="upload_form" action={{ url_for('upload') }} method=post enctype=multipart/form-data> <form id="upload_form" action={{ url_for('upload') }} method=post enctype=multipart/form-data>
<input id="list_upload_name" type=hidden name=name value="{{ name|safe }}" /> <input id="list_upload_name" type=hidden name=name value="{{ name|safe }}" />
<input type=hidden name=from_gui value="true" /> <input type=hidden name=from_gui value="true" />
<input id="list_upload_select" type=file name=file onchange="FileSelectHandler(event)"><br> <input id="list_upload_select" type=file name=file
onchange="FileSelectHandler(event)" multiple="multiple"><br>
<input id="list_upload_button" type=submit value=Upload> <input id="list_upload_button" type=submit value=Upload>
<div id="progress"></div> <div id="progress"></div>
</form> </form>