(refs #12) Implemented the upload area in preview.hrml.

src/main/scala/app/FileUploadController.scala

@@ -24,7 +24,9 @@ class FileUploadController extends ScalatraServlet with FileUploadSupport {
   }
 
   post("/image/:owner/:repository"){
+    execute { (file, fileId) =>
 
+    }
   }
 
   private def execute(f: (FileItem, String) => Unit) = fileParams.get("file") match {

src/main/twirl/helper/preview.scala.html

@@ -15,7 +15,10 @@
   <div class="tab-content">
     <div class="tab-pane active" id="tab1">
       <span id="error-content" class="error"></span>
-      <textarea id="content" name="content"@if(style.nonEmpty){ style="@style"} placeholder="@placeholder">@content</textarea>
+      <div id="clickable">
+        <textarea id="content" name="content"@if(style.nonEmpty){ style="@style"} placeholder="@placeholder">@content</textarea>
+        <span class="muted">Attach images by dragging &amp; dropping, or selecting them.</span>
+      </div>
     </div>
     <div class="tab-pane" id="tab2">
       <div class="markdown-body" id="preview-area">
@@ -42,5 +45,17 @@ $(function(){
       prettyPrint();
     });
   });
+
+  @if(!enableWikiLink){
+    $("div#clickable").dropzone({
+      url: '@path/upload/image/@repository.owner/@repository.name',
+      maxFilesize: 10,
+      previewTemplate: "<div class=\"dz-preview\">\n  <div class=\"dz-progress\"><span class=\"dz-upload\" data-dz-uploadprogress>Uploading your images…</span></div>\n  <div class=\"dz-error-message\"><span data-dz-errormessage></span></div>\n</div>",
+      success: function(file, id) {
+        $('#content').val($('#content').val() + "\n" + id + "\n" + file.name);
+        file.previewElement.remove();
+      }
+    });
+  }
 });
 </script>

src/main/twirl/helper/uploadavatar.scala.html

@@ -21,7 +21,6 @@ $(function(){
   var dropzone = new Dropzone('div#clickable', {
     url: '@path/upload/image',
     previewsContainer: 'div#avatar',
-    paramName: 'file',
     parallelUploads: 1,
     thumbnailWidth: 120,
     thumbnailHeight: 120