From 94a4b0dfd61b2eec658fb5ee68657644a294b0a1 Mon Sep 17 00:00:00 2001
From: Lucas Clemente <lucas@clemente.io>
Date: Wed, 3 Jun 2015 16:00:39 +0200
Subject: [PATCH] add file upload by dragging it into the editor

fixes #45
---
 Changelog.md                     |  4 ++--
 web/app/components/drop-area.js  |  2 +-
 web/app/controllers/folder.js    |  6 ++++--
 web/app/controllers/page/edit.js | 27 +++++++++++++++++++++++++++
 web/app/styles/app.scss          |  8 ++++----
 web/app/templates/page/edit.hbs  |  4 +++-
 6 files changed, 41 insertions(+), 10 deletions(-)

diff --git a/Changelog.md b/Changelog.md
index 2ebb447..daa8246 100644
--- a/Changelog.md
+++ b/Changelog.md
@@ -4,8 +4,8 @@
 
 Features:
 
-- File upload via drag and drop into the folder view
-- Commits that are less than a minute ago are automatically ammended
+- File upload via drag and drop into the folder view or drag and drop into the editor. The latter will insert a reference to the file into the text.
+- Commits that are less than a minute ago are automatically amended.
 - Autosave in the web editor
 
 Fixed:
diff --git a/web/app/components/drop-area.js b/web/app/components/drop-area.js
index d7d48e1..1114542 100644
--- a/web/app/components/drop-area.js
+++ b/web/app/components/drop-area.js
@@ -32,7 +32,7 @@ export default Ember.Component.extend({
         return;
       }
       var files = e.dataTransfer.files;
-      this.sendAction('action', files);
+      this.sendAction('action', files, e.target);
     });
   },
 });
diff --git a/web/app/controllers/folder.js b/web/app/controllers/folder.js
index 0d2f765..46b38b6 100644
--- a/web/app/controllers/folder.js
+++ b/web/app/controllers/folder.js
@@ -38,8 +38,10 @@ export default Ember.Controller.extend({
           id: id,
           folder: folder,
         });
-        page.save();
-        page.sendData(file);
+        /* jshint -W083 */
+        page.save().then(function () {
+          page.sendData(file);
+        });
       }
     },
   },
diff --git a/web/app/controllers/page/edit.js b/web/app/controllers/page/edit.js
index f8aa1a6..0e39474 100644
--- a/web/app/controllers/page/edit.js
+++ b/web/app/controllers/page/edit.js
@@ -11,5 +11,32 @@ export default Ember.Controller.extend({
       this.get('model').save();
       this.transitionToRoute('page.show', this.get('model'));
     },
+
+    uploadAndLinkFile: function (fileList, textArea) {
+      var textToInsert = '';
+
+      var folder = this.get('page.folder');
+      for (var i = 0; i < fileList.length; i++) {
+        var file = fileList.item(i);
+        var id = folder.get('id') + '|' + file.name;
+        id = id.replace('||', '|');
+        var page = this.store.createRecord('page', {
+          id: id,
+          folder: folder,
+        });
+        /* jshint -W083 */
+        page.save().then(function () {
+          page.sendData(file);
+        });
+
+        textToInsert += '[[' + file.name + ']]';
+      }
+
+      var pos = textArea.selectionStart || 0;
+      var text = this.get('page.markdownSource');
+      this.set('page.markdownSource', text.substring(0, pos) + textToInsert + text.substring(pos));
+      textArea.selectionStart = pos + textToInsert.length;
+      textArea.selectionEnd = pos + textToInsert.length;
+    },
   },
 });
diff --git a/web/app/styles/app.scss b/web/app/styles/app.scss
index 8cd5fb4..349c763 100644
--- a/web/app/styles/app.scss
+++ b/web/app/styles/app.scss
@@ -36,6 +36,10 @@ a:not([href]) {
   cursor: pointer;
 }
 
+.dragging {
+  box-shadow:  0px 0px 10px green;
+}
+
 // Folder list
 
 .nav-list {
@@ -51,10 +55,6 @@ a:not([href]) {
     border-color: lighten(#428bca, 20%);
     color: #fff;
   }
-
-  &.dragging {
-    box-shadow:  0px 0px 10px green;
-  }
 }
 
 .btn-new-file {
diff --git a/web/app/templates/page/edit.hbs b/web/app/templates/page/edit.hbs
index e6c2281..ca76487 100644
--- a/web/app/templates/page/edit.hbs
+++ b/web/app/templates/page/edit.hbs
@@ -25,5 +25,7 @@
 </div>
 
 {{#if page.isMarkdown}}
-  {{textarea-autosize value=page.markdownSource class="markdown-edit" placeholder='Type markdown here'}}
+  {{#drop-area action='uploadAndLinkFile'}}
+    {{textarea-autosize value=page.markdownSource class="markdown-edit" placeholder='Type markdown here'}}
+  {{/drop-area}}
 {{/if}}