From 9cfc0e4a61383cbbb0d8986044b49975136c6abf Mon Sep 17 00:00:00 2001
From: codeskyblue <codeskyblue@gmail.com>
Date: Fri, 29 Jul 2016 16:49:42 +0800
Subject: [PATCH] modify upload dropzone

---
 README.md           |  7 ++++++-
 res/css/style.css   |  3 ++-
 res/index.tmpl.html |  2 +-
 res/js/index.js     | 16 ++++++++++++++--
 4 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index 18cb2cc..fa5f5e2 100644
--- a/README.md
+++ b/README.md
@@ -1,9 +1,13 @@
 # gohttpserver
-Make the best HTTP File Server. Rewrite from https://github.com/codeskyblue/gohttp with golang+vue
+Make the best HTTP File Server.
+
+> Rewrite from https://github.com/codeskyblue/gohttp with golang+vue
 
 ## Notes
 If using go1.5, ensure you set GO15VENDOREXPERIMENT=1
 
+Upload size now limited to 1G
+
 ## Features
 1. [x] Support QRCode code generate
 1. [x] Breadcrumb path quick change
@@ -96,6 +100,7 @@ That's all. ^_^
 * Markdown-JS <https://github.com/showdownjs/showdown>
 * <https://github.com/sindresorhus/github-markdown-css>
 * <http://www.gorillatoolkit.org/pkg/handlers>
+* <http://www.dropzonejs.com/>
 
 ## LICENSE
 This project is under license [MIT](LICENSE)
diff --git a/res/css/style.css b/res/css/style.css
index b319b45..7d72571 100644
--- a/res/css/style.css
+++ b/res/css/style.css
@@ -6,9 +6,10 @@ body {
     margin-bottom: 1em;
 }
 
+/* Not used */
 div.dropzone {
     display: block;
-    text-align: center;
+    /*text-align: center;*/
     border: 2px dashed #666;
     border-radius: 5px;
     cursor: pointer;
diff --git a/res/index.tmpl.html b/res/index.tmpl.html
index 73ed979..1a74998 100644
--- a/res/index.tmpl.html
+++ b/res/index.tmpl.html
@@ -154,7 +154,7 @@
                             </h4>
                         </div>
                         <div class="modal-body">
-                            <form action="/testdata" class="dropzone"></form>
+                            <form action="#" class="dropzone" id="my-dropzone"></form>
                         </div>
                         <div class="modal-footer">
                             <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
diff --git a/res/js/index.js b/res/js/index.js
index 007fc71..ee64c22 100644
--- a/res/js/index.js
+++ b/res/js/index.js
@@ -194,5 +194,17 @@ function loadFileList() {
     vm.updateBreadcrumb()
 }
 
-loadFileList() // For page first loading
-$("div.dropzone").dropzone({ url: location.pathname });
+// For page first loading
+loadFileList()
+
+Dropzone.options.myDropzone = {
+    url: location.pathname,
+    paramName: "file",
+    maxFilesize: 1024,
+    addRemoveLinks: true,
+    init: function() {
+        this.on("uploadprogress", function(file, progress) {
+            console.log("File progress", progress);
+        });
+    }
+}