aboutsummaryrefslogtreecommitdiff
path: root/qc_app/static/js/upload_progress.js
blob: 049dbfeb4daca88a482b3e69a5dbf3d00680746f (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
function make_processing_indicator(elt) {
    var count = 0;
    return function() {
	var message = "Checking for errors: "
	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_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);
    };
    return request;
}

function selected_filetype(radios) {
    for(idx = 0; idx < radios.length; idx++) {
	if(radios[idx].checked) {
	    return radios[idx].value;
	}
    }
}

function setup_formdata(form) {
    var formdata = new FormData();
    formdata.append(
	"qc_text_file",
	form.querySelector("input[type='file']").files[0]);
    formdata.append(
	"filetype",
	selected_filetype(
	    Array.from(form.querySelectorAll("input[type='radio']"))));
    return formdata;
}

function upload_data(event) {
    event.preventDefault();

    var pindicator = document.getElementById("progress-indicator");

    var form = document.getElementsByTagName("form")[0];
    var the_file = form.querySelector("input[type='file']").files[0];
    if(the_file === undefined) {
	form.querySelector("#file_upload").parentElement.setAttribute(
	    "class", "invalid-input");
	form.querySelector("#no-file-error").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("progress-indicator"));
    request.open(form.getAttribute("method"), form.getAttribute("action"));
    request.send(formdata);
    return false;
}


function setup_upload_handlers() {
    console.info("Setting up the upload handlers.")
    upload_form = document.getElementsByTagName("form")[0];
    upload_form.addEventListener("submit", upload_data);
}