MediaWiki:Common.js: Difference between revisions

← Older edit Newer edit →

@@ Line 3,266: / Line 3,266: @@
 	);
 	var $status = $('<p>', { 'class': 'soldier-upload-status', text: '' });
+	var $progress = $('<div>', { 'class': 'camp-manual-progress', hidden: true });
+	var $progressFill = $('<div>', { 'class': 'camp-manual-progress-fill' });
+	var $progressBar = $('<div>', {
+		'class': 'camp-manual-progress-bar',
+		role: 'progressbar',
+		'aria-valuemin': 0,
+		'aria-valuemax': 100,
+		'aria-valuenow': 0
+	}).append($progressFill);
+	var $progressLabel = $('<p>', { 'class': 'camp-manual-progress-label', text: '' });
+	$progress.append($progressBar, $progressLabel);
 	var $submit = $('<button>', { type: 'submit', text: 'Upload to library' });
-	$form.append($file, $label, $note, $submit, $status);
+	$form.append($file, $label, $note, $submit, $progress, $status);
 	$box.append($form);
 	$slot.append($box);
@@ Line 3,273: / Line 3,284: @@
 	function setStatus(msg, isError) {
 		$status.text(msg).css('color', isError ? '#ba0000' : '#202122');
+	}
+	function formatBytes(n) {
+		if (n >= 1024 * 1024) {
+			return (n / (1024 * 1024)).toFixed(1) + ' MB';
+		}
+		if (n >= 1024) {
+			return Math.round(n / 1024) + ' KB';
+		}
+		return n + ' B';
+	}
+	function setProgress(loaded, total) {
+		$progress.prop('hidden', false);
+		if (!total) {
+			$progress.addClass('is-indeterminate');
+			$progressBar.attr('aria-valuenow', 0);
+			$progressFill.css('width', '30%');
+			$progressLabel.text('Uploading…');
+			return;
+		}
+		$progress.removeClass('is-indeterminate');
+		var pct = Math.max(0, Math.min(100, Math.round((loaded / total) * 100)));
+		$progressBar.attr('aria-valuenow', pct);
+		$progressFill.css('width', pct + '%');
+		$progressLabel.text(pct + '% · ' + formatBytes(loaded) + ' of ' + formatBytes(total));
+	}
+	function resetProgress() {
+		$progress.prop('hidden', true).removeClass('is-indeterminate');
+		$progressFill.css('width', '0%');
+		$progressBar.attr('aria-valuenow', 0);
+		$progressLabel.text('');
 	}
@@ Line 3,342: / Line 3,386: @@
 		var note = $.trim($form.find('.camp-manual-note').val() || '');
 		$submit.prop('disabled', true);
-		setStatus('Uploading… (large files can take a few minutes)');
+		resetProgress();
+		setProgress(0, file.size);
+		setStatus('Uploading…');
 		var api = new mw.Api();
 		var fileText = 'Camp Ritchie / MITC training material.';
 		var uploadParams = {
+			action: 'upload',
 			filename: file.name,
 			comment: 'Uploaded to Training materials library',
 			text: fileText,
-			ignorewarnings: true
+			ignorewarnings: true,
+			file: file,
+			format: 'json'
 		};
-		var uploadPromise = api.upload
+		api.postWithToken('csrf', uploadParams, {
-			? api.upload(file, uploadParams)
+			contentType: 'multipart/form-data',
-			: api.postWithToken('csrf', $.extend({ action: 'upload', file: file, format: 'json' }, uploadParams), {
+			timeout: 0,
-				contentType: 'multipart/form-data',
+			xhr: function () {
-				timeout: 0
+				var xhr = $.ajaxSettings.xhr();
-			});
+				if (xhr.upload) {
-		uploadPromise.then(function (data) {
+					xhr.upload.addEventListener('progress', function (evt) {
+						if (evt.lengthComputable) {
+							setProgress(evt.loaded, evt.total);
+						}
+					});
+				}
+				return xhr;
+			}
+		}).then(function (data) {
 			var uploaded = data.upload && data.upload.filename;
 			if (!uploaded) {
 				throw new Error((data.error && data.error.info) || 'Upload failed');
 			}
+			$progress.addClass('is-indeterminate');
+			$progressFill.css('width', '100%');
+			$progressLabel.text('Finishing…');
 			setStatus('Adding to Library list…');
 			return appendToLibrary(api, uploaded, displayTitle, note);
 		}).done(function () {
+			setProgress(file.size, file.size);
+			$progress.removeClass('is-indeterminate');
+			$progressLabel.text('100% · done');
 			setStatus('Done. Reloading…');
 			window.location.reload();
@@ Line 3,376: / Line 3,439: @@
 			}
 			setStatus(String(err), true);
+			resetProgress();
 			$submit.prop('disabled', false);
 		});