MediaWiki:UploadHelper.js

// <nowiki>
// Batch file uploader using new browsers features
// It was an attempt to make quick and easy to use (drag and drop) uploading experience as I felt Upload Wizard's batch uploader misses
// but the intitial feedbacks wasn't appealing for better or worse.
// https://commons.wikimedia.org/wiki/Special:blankpage/uploadhelper?withJS=MediaWiki:UploadHelper.js
// Author: User:Ebrahim
$(function () {
	if (mw.config.get('wgCanonicalSpecialPageName') !== "Blankpage" || mw.config.get('wgPageName').split('/')[1] !== "uploadhelper") {
		location.href = mw.util.getUrl('Special:BlankPage/uploadhelper', { withJS: "MediaWiki:UploadHelper.js" });
		return;
	}
	
	function hover(e) {
		e.stopPropagation();
		e.preventDefault();
	}
	document.addEventListener("dragleave", hover, false);
	document.addEventListener("dragover", hover, false);
	var jobQueue = [];
	document.addEventListener("drop", function (e) {
		hover(e);
		var ignorewarnings = $('#uploadhelper-ignorewarnings')[0].checked;
		var description = $('#uploadhelper-description').val();
		$('#uploadhelper-images').empty();

		$("#uploadhelper-images").append($('<button>', { text: 'Upload All' }).click(function () {
			var uploadAllButton = $(this);
			uploadAllButton.prop('disabled', 'disabled');
			jobQueue.reduce(function (defer, job) {
			  return defer.then(job);
			}, $.Deferred().resolve()).then(function () {
				uploadAllButton.replaceWith('Done!');
			});
		}), $('<div>').append(Array.from(e.dataTransfer.files).map(function (file) {
			// .name .type .sizex
			var button = $('<button>', { text: 'Upload' }).click(function (e) {
				e.preventDefault();
				job();
			});

			var job = function() {
				button.prop('disabled', 'disabled');
				var filename = $('.uploadhelper-name', button.parent()).val();
				var text = $('textarea', button.parent()).val();
				return upload(file, filename, text, ignorewarnings).then(function () {
					button.replaceWith($('<a>', {
						href: '/wiki/File:' + filename,
						text: filename
					}));
				}, function (e) {
					button.replaceWith($('<span>', {
						style: 'style="color: red"',
						text: 'Error: ' + e.toString()
					}));
					return $.Deferred().resolve();
				});
			};
			jobQueue.push(job);

			return $('<div style="border-top: 1px solid; margin-top: 1em; padding-top: 1em;">').append(
				' Name: ',
				$('<input>', { type: 'text', class: 'uploadhelper-name', style: 'width: 400px;' }).val(file.name),
				$('<br>'),
				preview(file, $('<img>', { width: 200 })),
				' Size: ' + file.size + ' bytes',
				$('<br>'),
				$('<textarea>', { style: 'font-family: monospace; height: 240px; width: 500px;' }).val(description),
				button
			);
		})));
	}, false);
	
	$('#content').html($('<div id="uploadhelper-images" style="border: 2px solid rgb(179, 0, 11); padding: 1em;' +
			' background-color: rgb(254, 252, 227); margin-bottom: 8px; border-top-left-radius: 15px;' +
			' border-top-right-radius: 15px; border-bottom-right-radius: 15px; border-bottom-left-radius: 15px;">').append(
		$('<textarea>', { id: 'uploadhelper-description', style: 'font-family: monospace; height: 240px; width: 500px;' }).val([
			'=={{int:filedesc}}==',
			'{{Information',
			'|description    = {{en|1=Description}}',
			'|date           = ' + new Date().toISOString().slice(0, 10),
			'|source         = [' + '[User:' + mw.config.get('wgUserName') + '|' + mw.config.get('wgUserName') + ']]',
			'|author         = {{Self}}',
			'|permission     = ',
			'|other versions = ',
			'}}',
			'',
			'=={{int:license-header}}==',
			'{{self|cc-by-sa-4.0}}',
			'',
			'[' + '[Category:Uploaded with UploadHelper]]'
		].join('\n')),
		$('<label>').append($('<input>', { id: 'uploadhelper-ignorewarnings', type: 'checkbox' }), ' Ignore warnings'),
		$('<br>'),
		$('<br>'),
		'After filling above, drop your files to this page to continue.'
	));
	
	function preview(file, img) {
		var reader = new FileReader();
		reader.addEventListener("load", function () {
			img[0].src = reader.result;
		}, false);
		reader.readAsDataURL(file);
		return img;
	}
	
	function upload(file, filename, text, ignorewarnings) {
		var formData = new FormData();
		formData.append('action', 'upload');
		formData.append('filename', filename);
		formData.append('token', mw.user.tokens.get('csrfToken'));
		formData.append('format', 'json');
		formData.append('text', text);
		formData.append('file', file);
		formData.append('ignorewarnings', ignorewarnings);
		return $.ajax({
			url: mw.util.wikiScript('api'),
			contentType: false,
			processData: false,
			type: 'POST',
			data: formData
		});
	}
});