Refactored file dropper

public_html/js/Controls/FileDropper.js

@@ -3,9 +3,14 @@ App.Controls = App.Controls || {};
 
 App.Controls.FileDropper = function(
 	$fileInput,
-	onChange,
+	_,
 	jQuery) {
 
+	var options = {
+		onChange: null,
+		setNames: false,
+	};
+
 	var $dropDiv = jQuery('<div class="file-handler"></div>');
 	var allowMultiple = $fileInput.attr('multiple');
 	$dropDiv.html((allowMultiple ? 'Drop files here!' : 'Drop file here!') + '<br/>Or just click on this box.');
@@ -37,8 +42,27 @@ App.Controls.FileDropper = function(
 			window.alert('Cannot select multiple files.');
 			return;
 		}
-		onChange(files);
+		if (typeof(options.onChange) !== 'undefined') {
+			options.onChange(files);
 		}
+		if (options.setNames && !allowMultiple) {
+			$dropDiv.text(files[0].name);
+		}
+	}
+
+	function readAsDataURL(file, callback) {
+		var reader = new FileReader();
+		reader.onloadend = function() {
+			callback(reader.result);
+		};
+		reader.readAsDataURL(file);
+	}
+
+	_.extend(options, {
+		readAsDataURL: readAsDataURL,
+	});
+
+	return options;
 
 };
 

public_html/js/Presenters/PostUploadPresenter.js

@@ -18,6 +18,7 @@ App.Presenters.PostUploadPresenter = function(
 	var template;
 	var allPosts = [];
 	var tagInput;
+	var fileDropper;
 	var interactionEnabled = true;
 
 	function init(args, loaded) {
@@ -39,7 +40,8 @@ App.Presenters.PostUploadPresenter = function(
 		$messages = $el.find('.messages');
 
 		tagInput = new App.Controls.TagInput($el.find('form [name=tags]'), _, jQuery);
-		App.Controls.FileDropper($el.find('[name=post-content]'), fileHandlerChanged, jQuery);
+		fileDropper = App.Controls.FileDropper($el.find('[name=post-content]'), _, jQuery);
+		fileDropper.onChange = fileHandlerChanged;
 
 		$el.find('.url-handler input').keydown(urlHandlerKeyPressed);
 		$el.find('.url-handler button').click(urlHandlerButtonClicked);
@@ -109,15 +111,13 @@ App.Presenters.PostUploadPresenter = function(
 	function addPostFromFile(file) {
 		var post = _.extend({}, getDefaultPost(), {fileName: file.name});
 
-		var reader = new FileReader();
+		fileDropper.readAsDataURL(file, function(content) {
-		reader.onload = function(e) {
+			post.content = content;
-			post.content = e.target.result;
 			if (file.type.match('image.*')) {
-				post.thumbnail = e.target.result;
+				post.thumbnail = content;
 				postThumbnailLoaded(post);
 			}
-		};
+		});
-		reader.readAsDataURL(file);
 
 		postAdded(post);
 	}

public_html/js/Presenters/UserAccountSettingsPresenter.js

@@ -15,6 +15,7 @@ App.Presenters.UserAccountSettingsPresenter = function(
 	var user;
 	var privileges;
 	var avatarContent;
+	var fileDropper;
 
 	function init(args, loaded) {
 		user = args.user;
@@ -51,7 +52,9 @@ App.Presenters.UserAccountSettingsPresenter = function(
 		$el.find('form').submit(accountSettingsFormSubmitted);
 		$el.find('form [name=avatar-style]').change(avatarStyleChanged);
 		avatarStyleChanged();
-		new App.Controls.FileDropper($el.find('[name=avatar-content]'), avatarContentChanged, jQuery);
+		fileDropper = new App.Controls.FileDropper($el.find('[name=avatar-content]'), _, jQuery);
+		fileDropper.onChange = avatarContentChanged;
+		fileDropper.setNames = true;
 	}
 
 	function getPrivileges() {
@@ -70,14 +73,9 @@ App.Presenters.UserAccountSettingsPresenter = function(
 
 	function avatarContentChanged(files) {
 		if (files.length === 1) {
-			var reader = new FileReader();
+			fileDropper.readAsDataURL(files[0], function(content) {
-			reader.onloadend = function() {
+				avatarContent = content;
-				avatarContent = reader.result;
+			});
-				var $el = jQuery(target);
-				var $target = $el.find('.avatar-content .file-handler');
-				$target.html(files[0].name);
-			};
-			reader.readAsDataURL(files[0]);
 		}
 	}