Ember Admin - Upload Modal

Issue #2547

ghost/admin/components/gh-upload-modal.js

@@ -1,17 +1,36 @@
-/*global console */
-
 import ModalDialog from 'ghost/components/gh-modal-dialog';
+import upload from 'ghost/assets/lib/uploader';
 
 var UploadModal = ModalDialog.extend({
     layoutName: 'components/gh-modal-dialog',
 
     didInsertElement: function () {
         this._super();
+        var filestorage = $('#general').data('filestorage');
+        upload.call(this.$('.js-drop-zone'), {fileStorage: filestorage});
+    },
+    confirm: {
+        reject: {
+            func: function () { // The function called on rejection
+                return true;
+            },
+            buttonClass: true,
+            text: 'Cancel' // The reject button text
+        },
+        accept: {
+            buttonClass: 'button-save right',
+            text: 'Save', // The accept button texttext: 'Save'
+            func: function () {
+                var imageType = 'model.' + this.get('imageType');
 
-        // @TODO: get this real
+                if (this.$('.js-upload-url').val()) {
-        console.log('UploadController:afterRender');
+                    this.set(imageType, this.$('.js-upload-url').val());
-        // var filestorage = $('#' + this.options.model.id).data('filestorage');
+                } else {
-        // this.$('.js-drop-zone').upload({fileStorage: filestorage});
+                    this.set(imageType, this.$('.js-upload-target').attr('src'));
+                }
+                return true;
+            }
+        }
     },
 
     actions: {
@@ -21,12 +40,11 @@ var UploadModal = ModalDialog.extend({
         confirm: function (type) {
             var func = this.get('confirm.' + type + '.func');
             if (typeof func === 'function') {
-                func();
+                func.apply(this);
             }
             this.sendAction();
         }
-    },
+    }
-
 });
 
 export default UploadModal;

ghost/admin/controllers/modals/upload.js

@@ -1,5 +1,6 @@
 
 var UploadController = Ember.Controller.extend({
+    acceptEncoding: 'image/*',
     actions: {
         confirmReject: function () {
             return true;

ghost/admin/fixtures/settings.js

@@ -3,8 +3,8 @@ var settings = {
     "title": "Ghost",
     "description": "Just a blogging platform.",
     "email": "ghost@tryghost.org",
-    "logo": "",
+    "logo": "http://media-cache-ec0.pinimg.com/236x/be/35/06/be35065e6f9a613d4a7661a6f45d0831.jpg",
-    "cover": "",
+    "cover": "http://i906.photobucket.com/albums/ac267/df853/bring_me_a_shrubbery_cat.jpg",
     "defaultLang": "en_US",
     "postsPerPage": "6",
     "forceI18n": "true",
@@ -23,4 +23,4 @@ var settings = {
 };
 
 export default settings;
-/* jshint ignore:end */
+/* jshint ignore:end */

ghost/admin/routes/application.js

@@ -24,12 +24,14 @@ var ApplicationRoute = Ember.Route.extend({
             this.set('controller.user', null);
         },
 
-        openModal: function (modalName, model) {
+        openModal: function (modalName, model, type) {
             modalName = 'modals/' + modalName;
             // We don't always require a modal to have a controller
             // so we're skipping asserting if one exists
             if (this.controllerFor(modalName, true)) {
                 this.controllerFor(modalName).set('model', model);
+                this.controllerFor(modalName).set('imageType', type);
+                this.controllerFor(modalName).set('src', model.get(type));
             }
             return this.render(modalName, {
                 into: 'application',
@@ -58,4 +60,4 @@ var ApplicationRoute = Ember.Route.extend({
     }
 });
 
-export default ApplicationRoute;
+export default ApplicationRoute;

ghost/admin/templates/components/gh-file-upload.hbs

@@ -1,2 +1,4 @@
-<input type="file" class="button-add" />
+<section class="js-drop-zone">
-<button type="submit" class="button-save" {{bind-attr disabled=uploadButtonDisabled}} {{action "upload"}}>{{uploadButtonText}}</button>
+    <img class="js-upload-target" {{bind-attr src=src}} alt="logo">
+    <input data-url="upload" class="js-fileupload main" type="file" name="uploadimage" {{#if options.acceptEncoding}}accept="{{options.acceptEncoding}}"{{/if}}>
+</section>

ghost/admin/templates/modals/upload.hbs

@@ -1,9 +1,8 @@
-{{#gh-upload-modal action="closeModal" close=true type="action" style="wide"
+{{#gh-upload-modal action="closeModal" close=true type="action" style="wide" model=model imageType=imageType
    animation="fade"}}
-
   <section class="js-drop-zone">
       <img class="js-upload-target" {{bind-attr src=src}} alt="logo">
-      <input data-url="upload" class="js-fileupload main" type="file" name="uploadimage" {{#if options.acceptEncoding}}accept="{{options.acceptEncoding}}"{{/if}}>
+      <input data-url="upload" class="js-fileupload main" type="file" name="uploadimage" {{bind-attr accept=acceptEncoding}} >
   </section>
 
 {{/gh-upload-modal}}

ghost/admin/templates/settings/general.hbs

@@ -29,9 +29,9 @@
             <div class="form-group">
                 <label for="blog-logo">Blog Logo</label>
                 {{#if logo}}
-                    <a class="js-modal-logo" href="#" {{action "openModal" "upload"}}><img id="blog-logo" {{bind-attr src=logo}} alt="logo"></a>
+                    <a class="js-modal-logo" href="#" {{action "openModal" "upload" this "logo"}}><img id="blog-logo" {{bind-attr src=logo}} alt="logo"></a>
                 {{else}}
-                    <a class="button-add js-modal-logo" {{action "openModal" "upload"}}>Upload Image</a>
+                    <a class="button-add js-modal-logo" {{action "openModal" "upload" this "logo"}}>Upload Image</a>
                 {{/if}}
                 <p>Display a sexy logo for your publication</p>
             </div>
@@ -39,9 +39,9 @@
             <div class="form-group">
                 <label for="blog-cover">Blog Cover</label>
                 {{#if cover}}
-                    <a class="js-modal-cover" href="#" {{action "openModal" "upload"}}><img id="blog-cover" {{bind-attr src=logo}} alt="cover photo"></a>
+                    <a class="js-modal-cover" href="#" {{action "openModal" "upload" this "cover"}}><img id="blog-cover" {{bind-attr src=cover}} alt="cover photo"></a>
                 {{else}}
-                    <a class="button-add js-modal-cover" {{action "openModal" "upload"}}>Upload Image</a>
+                    <a class="button-add js-modal-cover" {{action "openModal" "upload" this "cover"}}>Upload Image</a>
                 {{/if}}
                 <p>Display a cover image on your site</p>
             </div>

ghost/admin/templates/settings/user.hbs

@@ -11,7 +11,7 @@
     <header class="user-profile-header">
         <img id="user-cover" class="cover-image" {{bind-attr src=cover title=coverTitle}} />
 
-        <a class="edit-cover-image js-modal-cover button" {{action "openModal" "upload"}}>Change Cover</a>
+        <a class="edit-cover-image js-modal-cover button" {{action "openModal" "upload" user "cover"}}>Change Cover</a>
     </header>
 
     <form class="user-profile" novalidate="novalidate">
@@ -20,7 +20,7 @@
 
             <figure class="user-image">
                 <div id="user-image" class="img" {{bind-attr style=image}} href="#"><span class="hidden">{{name}}"s Picture</span></div>
-                <a href="" {{action "openModal" "upload"}} class="edit-user-image js-modal-image">Edit Picture</a>
+                <a href="" {{action "openModal" "upload" user "image"}} class="edit-user-image js-modal-image">Edit Picture</a>
             </figure>
 
             <div class="form-group">