diff --git a/public_html/js/Controls/FileDropper.js b/public_html/js/Controls/FileDropper.js
index 8e2b6cf6..3344023a 100644
--- a/public_html/js/Controls/FileDropper.js
+++ b/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('
');
var allowMultiple = $fileInput.attr('multiple');
$dropDiv.html((allowMultiple ? 'Drop files here!' : 'Drop file here!') + '
Or just click on this box.');
@@ -37,9 +42,28 @@ 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;
+
};
App.DI.register('fileDropper', App.Controls.FileDropper);
diff --git a/public_html/js/Presenters/PostUploadPresenter.js b/public_html/js/Presenters/PostUploadPresenter.js
index d5432efb..27a4f0e3 100644
--- a/public_html/js/Presenters/PostUploadPresenter.js
+++ b/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();
- reader.onload = function(e) {
- post.content = e.target.result;
+ fileDropper.readAsDataURL(file, function(content) {
+ post.content = content;
if (file.type.match('image.*')) {
- post.thumbnail = e.target.result;
+ post.thumbnail = content;
postThumbnailLoaded(post);
}
- };
- reader.readAsDataURL(file);
+ });
postAdded(post);
}
diff --git a/public_html/js/Presenters/UserAccountSettingsPresenter.js b/public_html/js/Presenters/UserAccountSettingsPresenter.js
index 1da0de4f..44b362bc 100644
--- a/public_html/js/Presenters/UserAccountSettingsPresenter.js
+++ b/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();
- reader.onloadend = function() {
- avatarContent = reader.result;
- var $el = jQuery(target);
- var $target = $el.find('.avatar-content .file-handler');
- $target.html(files[0].name);
- };
- reader.readAsDataURL(files[0]);
+ fileDropper.readAsDataURL(files[0], function(content) {
+ avatarContent = content;
+ });
}
}