allow uploading files by drag and drop

lib/gollum/app.rb

@@ -129,8 +129,10 @@ module Precious
       wikip = wiki_page(params[:splat].first)
       @name = wikip.name
       @path = wikip.path
+      @upload_dest   = find_upload_dest(@path)
 
       wiki = wikip.wiki
+      @allow_uploads = wiki.allow_uploads
       if page = wikip.page
         if wiki.live_preview && page.format.to_s.include?('markdown') && supported_useragent?(request.user_agent)
           live_preview_url = '/livepreview/index.html?page=' + encodeURIComponent(@name)
@@ -266,6 +268,8 @@ module Precious
       wikip = wiki_page(params[:splat].first.gsub('+', '-'))
       @name = wikip.name.to_url
       @path = wikip.path
+      @allow_uploads = wikip.wiki.allow_uploads
+      @upload_dest   = find_upload_dest(@path)
 
       page_dir = settings.wiki_options[:page_file_dir].to_s
       unless page_dir.empty?
@@ -453,10 +457,7 @@ module Precious
         @page          = page
         @name          = name
         @content       = page.formatted_data
-        @upload_dest   = settings.wiki_options[:allow_uploads] ?
-            (settings.wiki_options[:per_page_uploads] ?
-                "#{path}/#{@name}".sub(/^\/\//, '') : 'uploads'
-            ) : ''
+        @upload_dest   = find_upload_dest(path)
 
         # Extensions and layout data
         @editable      = true
@@ -505,5 +506,12 @@ module Precious
       commit_message.merge! author_parameters unless author_parameters.nil?
       commit_message
     end
+
+    def find_upload_dest(path)
+      settings.wiki_options[:allow_uploads] ?
+          (settings.wiki_options[:per_page_uploads] ?
+              "#{path}/#{@name}".sub(/^\/\//, '') : 'uploads'
+          ) : ''
+    end
   end
 end

lib/gollum/public/gollum/css/editor.css

@@ -338,6 +338,31 @@ a#function-help:hover span { background-position: -402px -25px; }
 }
 
 
+/* @section uploads */
+
+#gollum-editor-body.dragging {
+  box-shadow: 0 0 10px #AAE000;
+}
+
+#gollum-editor-body.uploading {
+  opacity: 0.5;
+}
+
+#gollum-editor-body + div {
+  display: none;
+  font-size: 1.5em;
+}
+
+#gollum-editor-body + div > i {
+  font-size: 1em;
+}
+
+#gollum-editor-body.uploading + div {
+  display: block;
+}
+
+
+
 /* @section form-fields */
 
 #gollum-editor textarea {

lib/gollum/public/gollum/css/template.css

@@ -27,6 +27,51 @@
   content: "\f0c1";
 }
 
+.fa-spinner:before {
+  content: "\f110";
+}
+
+.fa-spin {
+  -webkit-animation: spin 2s infinite linear;
+  -moz-animation: spin 2s infinite linear;
+  -o-animation: spin 2s infinite linear;
+  animation: spin 2s infinite linear;
+}
+@-moz-keyframes spin {
+  0% {
+    -moz-transform: rotate(0deg);
+  }
+  100% {
+    -moz-transform: rotate(359deg);
+  }
+}
+@-webkit-keyframes spin {
+  0% {
+    -webkit-transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(359deg);
+  }
+}
+@-o-keyframes spin {
+  0% {
+    -o-transform: rotate(0deg);
+  }
+  100% {
+    -o-transform: rotate(359deg);
+  }
+}
+@keyframes spin {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(359deg);
+    transform: rotate(359deg);
+  }
+}
+
 /* margin & padding reset*/
 * {
   margin: 0;

lib/gollum/public/gollum/javascript/editor/gollum.editor.js

@@ -98,6 +98,52 @@
           $('#gollum-editor-help').removeClass('jaws');
         }
       } // EditorHas.functionBar
+
+      if ( EditorHas.dragDropUpload() ) {
+        var $editorBody = $('#gollum-editor-body');
+        var editorBody = $('#gollum-editor-body')[0];
+        editorBody.ondragover = function(e) {
+          $editorBody.addClass('dragging');
+          return false;
+        };
+        editorBody.ondragleave = function() {
+          $editorBody.removeClass('dragging');
+          return false;
+        };
+        editorBody.ondrop = function(e) {
+          debug("dropped file");
+          e.preventDefault();
+          $editorBody.removeClass('dragging').addClass('uploading');
+
+          var file = e.dataTransfer.files[0],
+              formData = new FormData();
+          formData.append('upload_dest', uploadDest);
+          formData.append('file', file);
+
+          $.ajax({
+            url: '/uploadFile',
+            data: formData,
+            cache: false,
+            contentType: false,
+            processData: false,
+            type: 'POST',
+            success: function(){
+              $editorBody.removeClass('uploading');
+              var text = '[[' + uploadDest + '/' + file.name + ']]';
+              var pos = editorBody.selectionStart || 0;
+              editorBody.value = editorBody.value.substring(0, pos) + text + editorBody.value.substring(pos);
+              editorBody.selectionStart = pos + text.length;
+              editorBody.selectionEnd = pos + text.length;
+            },
+            error: function(r, textStatus) {
+              alert('Error uploading file: ' + textStatus);
+              $editorBody.removeClass('uploading');
+            }
+          });
+
+          return false;
+        };
+      } // EditorHas.dragDropUpload
     } // EditorHas.baseEditorMarkup
   };
 
@@ -444,6 +490,17 @@
      */
     titleDisplayed: function() {
       return ( ActiveOptions.NewFile );
+    },
+
+
+    /**
+     *  EditorHas.dragDropUpload
+     *  True if the editor is supports drag and drop file uploads, false otherwise.
+     *
+     *  @return boolean
+     */
+    dragDropUpload: function() {
+      return $('#gollum-editor.uploads-allowed').length;
     }
 
   };

lib/gollum/templates/editor.mustache

@@ -1,4 +1,4 @@
-<div id="gollum-editor" data-escaped-name="{{escaped_name}}" class="{{#is_create_page}}create{{/is_create_page}}{{#is_edit_page}}edit{{/is_edit_page}}">
+<div id="gollum-editor" data-escaped-name="{{escaped_name}}" class="{{#is_create_page}}create{{/is_create_page}}{{#is_edit_page}}edit{{/is_edit_page}} {{#allow_uploads}}uploads-allowed{{/allow_uploads}}">
 {{#is_create_page}}
 <form name="gollum-editor" action="{{base_url}}/create" method="post">
 {{/is_create_page}}
@@ -89,6 +89,10 @@
   </div>
     <textarea id="gollum-editor-body"
      data-markup-lang="{{format}}" name="content" class="mousetrap">{{content}}</textarea>
+    <div>
+      <i class="fa fa-spinner fa-spin"></i>
+      Uploading file ...
+    </div>
 
     {{#header}}
     <div id="gollum-editor-edit-header" class="collapsed">

lib/gollum/templates/layout.mustache

@@ -19,9 +19,9 @@
 
   <script>
       var baseUrl = '{{base_url}}';
+      var uploadDest   = '{{upload_dest}}';
       {{#page}}
       var pageFullPath = '{{url_path_display}}';
-      var uploadDest   = '{{upload_dest}}';
       {{/page}}
   </script>
   <script type="text/javascript" src="{{base_url}}/javascript/jquery-1.7.2.min.js"></script>

lib/gollum/views/create.rb

@@ -17,6 +17,14 @@ module Precious
         false
       end
 
+      def allow_uploads
+        @allow_uploads
+      end
+
+      def upload_dest
+        @upload_dest
+      end
+
       def format
         @format = (@page.format || false) if @format.nil? && @page
         @format.to_s.downcase

lib/gollum/views/edit.rb

@@ -60,6 +60,14 @@ module Precious
         true
       end
 
+      def allow_uploads
+        @allow_uploads
+      end
+
+      def upload_dest
+        @upload_dest
+      end
+
       def format
         @format = (@page.format || false) if @format.nil?
         @format.to_s.downcase