store: ajax upload (drag'n'drop)

miscellaneous/homepage/index.html

@@ -38,6 +38,8 @@ body {
     display: block;
     box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
     border-radius: 5px;
+    text-align: center;
+    vertical-align: middle;
 }
 .contentblock h2 {
     background-color: #000;

miscellaneous/store-server/CloudStore.py

@@ -2,7 +2,7 @@
 
 # TODO File permission checks
 
-from bottle import route, run, request, static_file, abort, redirect, app
+from bottle import route, run, request, static_file, abort, redirect, app, response
 import json, os, shutil
 import uuid
 import subprocess
@@ -258,6 +258,14 @@ def dl_hash(hash_num):
     else:
         filename = os.path.basename(os.path.realpath(hash_path+'/'+hash_num))
         return static_file(hash_num, root=hash_path, download=filename)
+
+@route('/ul/<hash_num>', method='OPTIONS')
+def upload_allow(hash_num):
+    response.set_header('Access-Control-Allow-Origin', '*')
+    response.set_header('Access-Control-Allow-Methods', 'POST, GET, OPTIONS')
+    response.set_header('Access-Control-Allow-Headers', 'Content-Type, Content-Range, Content-Disposition, Content-Description')
+    return 'ok'
+
 @route('/ul/<hash_num>', method='POST')
 def upload(hash_num):
     if not os.path.exists(ROOT_WWW_FOLDER+'/'+hash_num):
@@ -297,6 +305,9 @@ def upload(hash_num):
         redirect_address = request.headers.get('Referer')
     except:
 	redirect_address = REDIRECT_URL
+    response.set_header('Access-Control-Allow-Origin', '*')
+    response.set_header('Access-Control-Allow-Methods', 'POST, GET, OPTIONS')
+    response.set_header('Access-Control-Allow-Headers', 'Content-Type, Content-Range, Content-Disposition, Content-Description')
     redirect(redirect_address)
     #return 'Upload finished: '+file_name+' - '+str(datalength)+' Byte'
 

one/static/box.less

@@ -155,6 +155,14 @@
         display: none;
         .container{
             padding: 5px 5px;
+            .upload-zone{
+                margin: 10px;
+                border-radius: 10px;
+                border: 2px dashed #666;
+                height: 40px;
+                text-align: center;
+                line-height: 40px;
+            }
         }
         h3{
             font-weight: normal;

one/static/cloud.js

@@ -28,7 +28,7 @@ $(function() {
         }
     });
     toggleDetails = function() {
-        if($(this).parent('.wm').hasClass('opened')){
+        if($(this).parent('.wm').hasClass('opened')) {
             $(this).parent('.wm').removeClass('opened');
             $(this).next('.details').slideUp(700);
         } else {
@@ -69,6 +69,11 @@ $(function() {
         })
         $('#modal').show();
     });
+    $('#old-upload').click(function(e){
+        e.preventDefault();
+        $(this).parent().hide().next('div').show();
+        return false;
+    })
 
     function Model() {
         var self = this;
@@ -76,6 +81,7 @@ $(function() {
         self.allFiles = [];
         self.notInRoot = ko.observable(false);
         self.fileLimit = 5;
+
         function throttle(f) {
             var disabled = false;
             return function() {
@@ -132,6 +138,7 @@ $(function() {
                     if(added < 6) addFile(data[i]);
                 }
             }
+
         function addFile(d) {
             var viewData;
             if(d.TYPE === 'D') {
@@ -192,53 +199,92 @@ $(function() {
                 }
             })
         }
-        self.uploadURL=ko.observable('/');
-        self.getUploadURL=function(){
+        self.uploadURL = ko.observable('/');
+        self.getUploadURL = function() {
             $.ajax({
                 type: 'POST',
-                data: 'ul='+self.currentPath()+'&next='+encodeURI(window.location.href),
+                data: 'ul=' + self.currentPath() + '&next=' + encodeURI(window.location.href),
                 url: '/ajax/store/upload',
                 dataType: 'json',
-                success: function(data){
+                success: function(data) {
                     self.uploadURL(data.url);
                 }
-            }).error(function(){ console.log('asd', arguments)})
+            }).error(function() {
+                console.log('asd', arguments)
+            })
         }
-        self.newFolderName=ko.observable();
-        self.newFolder=throttle(function(i,e){
+        self.newFolderName = ko.observable();
+        self.newFolder = throttle(function(i, e) {
             $(e.target).parent().parent().parent().removeClass('opened');
             $.ajax({
                 type: 'POST',
-                data: 'new='+self.newFolderName()+'&path='+self.currentPath(),
+                data: 'new=' + self.newFolderName() + '&path=' + self.currentPath(),
                 url: '/ajax/store/newFolder',
                 dataType: 'json',
-                success: function(data){
+                success: function(data) {
                     loadFolder(self.currentPath());
                 }
             })
         });
+        self.uploadProgress = ko.observable('0%');
+        var tests = {
+            filereader: typeof FileReader != 'undefined',
+            dnd: 'draggable' in document.createElement('span'),
+            formdata: !! window.FormData,
+            progress: "upload" in new XMLHttpRequest
+        };
+
+        function readfiles(files) {
+            var formData = tests.formdata ? new FormData() : null;
+            for (var i = 0; i < files.length; i++) {
+                if (tests.formdata) formData.append('data', files[i]);
+            }
+            // now post a new XHR request
+            if(tests.formdata) {
+                var xhr = new XMLHttpRequest();
+                xhr.open('POST', self.uploadURL());
+                console.log(xhr);
+                xhr.onload = function() {
+                    self.uploadProgress('0%');
                     loadFolder(self.currentPath());
+                };
+                if(tests.progress) {
+                    xhr.upload.onprogress = function(event) {
+                        console.log(event);
+                        if(event.lengthComputable) {
+                            var complete = (event.loaded / event.total * 100 | 0);
+                            //progress.value = progress.innerHTML = complete;
+                            self.uploadProgress(parseInt(complete)+'%');
                         }
-    var model = new Model();
-    ko.applyBindings(model);
-    document.addEventListener('dragenter', function(e) {
+                    }
+                }
+
+                xhr.send(formData);
+            }
+        }
+        document.addEventListener('drop', function(e) {
             console.log(e);
             e.stopPropagation();
             e.preventDefault();
+            console.log(e.dataTransfer.files)
+            readfiles(e.dataTransfer.files);
             return false;
         });
-    document.addEventListener('dragover', function(e) {
+        loadFolder(self.currentPath());
+    }
+    var model = new Model();
+    ko.applyBindings(model);
+    document.addEventListener('dragenter', function(e) {
         console.log(e);
         e.stopPropagation();
         e.preventDefault();
         return false;
     });
-    document.addEventListener('drop', function(e) {
+    document.addEventListener('dragover', function(e) {
         console.log(e);
         e.stopPropagation();
         e.preventDefault();
-        console.log(e.dataTransfer.files)
-
         return false;
     });
+
 })

one/templates/box-filelist.html

@@ -73,18 +73,26 @@
                 </li>
                 <li class="file-upload wm">
                     <div class="summary" data-bind="click: getUploadURL">
+                        <div class="quota">
+                            <div id="upload-progress" class="used" style="background-color: rgba(0,255,0,0.2);" data-bind="style: {width: uploadProgress}"></div>
+                        </div>
                         <div class="name filetype-up">Fájlfeltöltés</div>
                         <div class="clear"></div>
                     </div>
                     <div class="details">
                         <div class="container">
-                            <form method="POST" data-bind="attr: {action: uploadURL}" enctype="multipart/form-data">
-                                {% csrf_token %}
-                                <input name="data" type="file" />
-                                <input type="submit" value="Feltöltés"/>
+                            <div id="upload-zone" class="upload-zone">
+                                A feltöltéshez húzza ide a fájlt. <a href="#" id="old-upload">Hagyományos fájltfeltöltési felület</a>
+                                <img class="preview" />
+                            </div>
+                            <div style="display: none" class="upload-zone">
+                                <form action="/" method="POST" data-bind="attr: {action: uploadURL}" enctype="multipart/form-data">
+                                    <input type="file" name="data" />
+                                    <input type="submit" value="Feltöltés" />
                                 </form>
                             </div>
                         </div>
+                    </div>
                 </li>
                 <li class="wm small">
                     <div class="summary">