function make_processing_indicator(elt) { var count = 0; return function() { var message = "Finalising upload and saving file: " if(count > 5) { count = 1; } for(i = 0; i < count; i++) { message = message + "."; } elt.innerHTML = message count = count + 1 }; } function make_progress_updater(file, indicator_elt) { var progress_bar = indicator_elt.querySelector("#progress-bar"); var progress_text = indicator_elt.querySelector("#progress-text"); var extra_text = indicator_elt.querySelector("#progress-extra-text"); return function(event) { if(event.loaded <= file.size) { var percent = Math.round((event.loaded / file.size) * 100); progress_bar.value = percent progress_text.innerHTML = "Uploading: " + percent + "%"; extra_text.setAttribute("class", "hidden") } if(event.loaded == event.total) { progress_bar.value = 100; progress_text.innerHTML = "Uploaded: 100%"; extra_text.setAttribute("class", null); intv = setInterval(make_processing_indicator(extra_text), 400); setTimeout(function() {clearTimeout(intv);}, 20000); } }; } function setup_cancel_upload(request, indicator_elt) { document.getElementById("btn-cancel-upload").addEventListener( "click", function(event) { event.preventDefault(); request.abort(); indicator_elt.setAttribute("class", "hidden"); }); } function setup_request(file, progress_indicator_elt) { var request = new XMLHttpRequest(); var updater = make_progress_updater(file, progress_indicator_elt); request.upload.addEventListener("progress", updater); request.onload = function(event) { document.location.assign(request.responseURL); }; setup_cancel_upload(request, progress_indicator_elt) return request; } function selected_filetype(radios) { for(idx = 0; idx < radios.length; idx++) { if(radios[idx].checked) { return radios[idx].value; } } } function make_data_uploader(setup_formdata) { return function(event) { event.preventDefault(); var pindicator = document.getElementById("upload-progress-indicator"); var form = event.target; var the_file = form.querySelector("input[type='file']").files[0]; if(the_file === undefined) { form.querySelector("input[type='file']").parentElement.setAttribute( "class", "invalid-input"); error_elt = form.querySelector("#no-file-error"); if(error_elt !== undefined) { error_elt.setAttribute("style", "display: block;"); } return false; } pindicator.setAttribute("class", "modal"); var formdata = setup_formdata(form); document.getElementById("progress-filename").innerHTML = the_file.name; var request = setup_request( the_file, document.getElementById("upload-progress-indicator")); request.open(form.getAttribute("method"), form.getAttribute("action")); request.send(formdata); return false; } } function setup_upload_handlers(formid, datauploader) { console.info("Setting up the upload handlers.") upload_form = document.getElementById(formid); upload_form.addEventListener("submit", datauploader); }