(refs #28)Implementing avatar image uploading.

src/main/scala/ScalatraBootstrap.scala

@@ -5,6 +5,7 @@ import javax.servlet._
 class ScalatraBootstrap extends LifeCycle {
   override def init(context: ServletContext) {
     context.mount(new IndexController, "/")
+    context.mount(new FileUploadController, "/upload")
     context.mount(new SignInController, "/*")
     context.mount(new UserManagementController, "/*")
     context.mount(new SystemSettingsController, "/*")

src/main/scala/app/FileUploadController.scala

@@ -0,0 +1,36 @@
+package app
+
+import org.scalatra._
+import org.scalatra.servlet.{MultipartConfig, FileUploadSupport}
+
+/**
+ * Provides Ajax based file upload functionality.
+ *
+ * This servlet saves uploaded file as temporary file and returns the unique key.
+ * You can get uploaded file using [[app.FileUploadUtil#getFile()]] with this key.
+ */
+// TODO Remove temporary files at session timeout by session listener.
+class FileUploadController extends ScalatraServlet with FileUploadSupport with FlashMapSupport {
+  configureMultipartHandling(MultipartConfig(maxFileSize = Some(3*1024*1024)))
+
+  post("/"){
+    fileParams.get("file") match {
+      // TODO save as temporary file and return key.
+      case Some(file) => {
+        println(file.name)
+        println(file.size)
+        Ok("1234")
+      }
+      case None => BadRequest
+    }
+  }
+
+}
+
+// TODO Not implemented yet.
+object FileUploadUtil {
+  def getFile(key: String) = {
+
+  }
+}
+

src/main/twirl/account/edit.scala.html

@@ -34,6 +34,13 @@
       <input type="text" name="url" id="url" style="width: 400px;" value="@account.map(_.url)"/>
       <span id="error-url" class="error"></span>
     </fieldset>
+    <fieldset>
+      <label for="avatar"><strong>Image (Optional)</strong></label>
+      <div id="avatar" class="muted small">
+        <div id="clickable">No Image</div>
+      </div>
+      <input type="hidden" name="avatarFileKey" value=""/>
+    </fieldset>
     <fieldset>
       @if(account.isDefined){
         <input type="submit" class="btn btn-success" value="Save"/>
@@ -44,3 +51,38 @@
     </fieldset>
   </form>
 }
+<script>
+$(function(){
+  var dropzone = new Dropzone('div#clickable', {
+    url: '@path/upload',
+    previewsContainer: 'div#avatar',
+    paramName: 'file',
+    parallelUploads: 1,
+    thumbnailWidth: 120,
+    thumbnailHeight: 120
+  });
+
+  dropzone.on("addedfile", function(){
+    $('div#clickable').remove();
+  });
+});
+</script>
+<style type="text/css">
+div.dz-filename, div.dz-size, div.dz-progress, div.dz-success-mark, div.dz-error-mark, div.dz-error-message {
+  display: none;
+}
+
+div#clickable {
+  width: 100%;
+  text-align: center;
+  line-height: 120px;
+}
+
+div#avatar {
+  background-color: #f8f8f8;
+  border: 1px dashed silver;
+  margin-bottom: 10px;
+  width: 120px;
+  height: 120px;
+}
+</style>