Upload progress bar

masks/course.html

@@ -5,6 +5,9 @@
 				<input type="file" class="custom-file-input" id="fileupload" name="files[]" multiple>
 				<label class="custom-file-label" for="customFile">Choose file</label>
 			</div>
+			<div id="upload_progress" class="progress mt-2 hidden transition">
+				<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
+			</div>
 		</div>
 		<div id="doc_list"></div>
 	</div>
@@ -57,16 +60,24 @@ oCATC.pageInit = function(asHash, bFirstPage) {
 			dataType: 'json',
 			acceptFileTypes: /(\.|\/)(gif|jpe?g|png|mov|doc|docx|pdf|mp3|wav)$/i,
 			formData: {id: self.tmp('id_course')},
+			progressall: function (e, asData) {
+				console.log(asData);
+				var iProgress = parseInt(asData.loaded / asData.total * 100, 10);
+				$('#upload_progress')
+					.show()
+					.find('.progress-bar')
+						.attr('aria-valuenow', iProgress)
+						.css('width', iProgress+'%')
+						.text(iProgress+'%');
+			},
 			done: function(e, asData) {
 				$.each(asData.result.files, function(iKey, oFile) {
 					var sMsg = ('error' in oFile)?oFile.error:(oFile.name+" uploaded successfully");
 					oCATC.feedback('notice', sMsg);
 				});
+				$('#upload_progress').hide('fast');
 				loadDocs();
-			}/*,
+			}
-			progressall: function (e, asData) {
-				$('#progress .bar').css('width', parseInt(asData.loaded / asData.total * 100, 10)+'%');
-			}*/
 		});
 	loadDocs();
 };

style/_template.scss

@@ -35,6 +35,10 @@ a:hover {
 	cursor: pointer;
 }
 
+.hidden {
+	display: none;
+}
+
 @mixin catc-round($radius) {
 	border-radius: 0 $radius $radius $radius;
 }