aboutsummaryrefslogtreecommitdiff
path: root/qc_app/static/js/upload_progress.js
blob: 22dbda8f1240a8ac4c3687c7f59bf71ce14f4677 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
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);
}