UploadWebInterface/buttonInterface.js at master · MartinBeseda/UploadWebInterface · GitHub

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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
$(document).ready(function() {
	//------------------//
	//----- CONFIG -----//
	//------------------//
	var url = '/upload';

	var queue = []; // queue for uploaded items - synchronous upload is used

	//------------------//
	//--- ADD BUTTON ---//
	//------------------//
	$("#Add").click(function() {

		var intId = $("#inputFields div").length / 3;
		var fieldWrapper = $("<div id=\"field" + intId + "\" />");
		var fBody = $("<input type=\"file\" name=\"browsers[]\" class=\"browserElement\" value=\"Browse...\" \" />");

		var removeButton = $('<span class="removeButton glyphicon glyphicon-remove" ></span>');
		removeButton.click(function() {
			$(this).parent().remove();
		});

		var progressBar = $("<div name=\"progressBars[]\" id=\"ProgressBackBar" + intId + "\" class=\"progress\">\
				<div id=\"progressBar" + intId + "\" class=\"progress-bar progress-bar-striped active\" role=\"progressbar\" aria-valuemin=\"0\" aria-valuemax=\"100\"></div>\
		</div>");

		fieldWrapper.append(fBody);
		fieldWrapper.append(removeButton);
		fieldWrapper.append(progressBar);
		$("#InputFields").append(fieldWrapper);
	});

	//---------------------//
	//--- UPLOAD BUTTON ---//
	//---------------------//
	$("#Upload").click(function() {

		var $btn = $(this);
		$btn.button().button("loading");

		//-----------------------------------------------//
		//--- DIV WITH NOTICE AFTER SUCCESSFUL UPLOAD ---//
		//-----------------------------------------------//
		var uploadSuccess = document.getElementById("UploadSuccess2");
		uploadSuccess.style.display = 'none'

		//-----------------------------------------------------------//
		//--- WARNING WHEN NO FILE IS SELECTED - INITIALLY HIDDEN ---//
		//-----------------------------------------------------------//
		var warning = document.getElementById("Warning2");
		warning.style.display = 'none';

		var browserArray = document.getElementsByName('browsers[]'); // array of inputs

		//----------------------------------------------//
		//--- CHECK IF THERE ARE SOME FILES SELECTED ---//
		// ---------------------------------------------//
		if (browserArray.length === 0) {
			$btn.button("reset");
			warning.style.display = 'block';
			return;
		}

		var chosenFilesCount = 0;
		for (var i = 0; i < browserArray.length; i++) {
			if (browserArray[i].files.length != 0) {
				chosenFilesCount++;
			}
		}

		if (chosenFilesCount === 0) {
			$btn.button("reset");
			warning.style.display = 'block';
			return;
		}

		//-----------------------------------------//
		//--- CHECK IF BROWSER SUPPORTS FileAPI ---//
		// ----------------------------------------//
		var fileApiSupported = !!(window.File && window.FileReader && window.FileList && window.Blob);
		if (!fileApiSupported) {
			alert('Your browser is not supported!');
			return;
		}

		var progressBarArray = document.getElementsByName('progressBars[]'); // array of progress bars for inputs

		var formData;
		var file;
		var backBar;
		var bar;
		for (var i = 0; i < browserArray.length; i++) {
			file = browserArray[i].files[0];
			backBar = progressBarArray[i]; // background of loadbar
			bar = backBar.children[0]; // "colourful part" in loadbar

			//------------------------------------------------//
			//--- CHECK IF FILE INPUT ELEMENT IS NOT EMPTY ---//
			// -----------------------------------------------//
			if (file) {
				formData = new FormData();
				formData.append('filepath', file, file.name);

				//----------------------------//
				//--- PUSH DATA INTO QUEUE ---//
				//----------------------------//
				var data = [queue, formData, url, $btn, uploadSuccess, warning, null, progressBarArray, null, bar, backBar, null];
				queue.push(data);

			}

		}

		//------------------------//
		//--- REQUEST HANDLING ---//
		//------------------------//
		var data = queue.shift();
		requestHandle( 2, data );
	});
});