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; + }); } }