Skip to content

Fukász Rómeó Ervin / cloud

Go to a project
Commit 606f3842 by Dányi Bence
Options

store: ajax upload (drag'n'drop)

parent c6fc41fe
Showing with 97 additions and 22 deletions
miscellaneous/homepage/index.html
...@@ -38,6 +38,8 @@ body { ...@@ -38,6 +38,8 @@ body {
display: block; display: block;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.3); box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
border-radius: 5px; border-radius: 5px;
text-align: center;
vertical-align: middle;
} }
.contentblock h2 { .contentblock h2 {
background-color: #000; background-color: #000;
......
miscellaneous/store-server/CloudStore.py
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
# TODO File permission checks # 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 json, os, shutil
import uuid import uuid
import subprocess import subprocess
...@@ -258,6 +258,14 @@ def dl_hash(hash_num): ...@@ -258,6 +258,14 @@ def dl_hash(hash_num):
else: else:
filename = os.path.basename(os.path.realpath(hash_path+'/'+hash_num)) filename = os.path.basename(os.path.realpath(hash_path+'/'+hash_num))
return static_file(hash_num, root=hash_path, download=filename) 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') @route('/ul/<hash_num>', method='POST')
def upload(hash_num): def upload(hash_num):
if not os.path.exists(ROOT_WWW_FOLDER+'/'+hash_num): if not os.path.exists(ROOT_WWW_FOLDER+'/'+hash_num):
...@@ -297,6 +305,9 @@ def upload(hash_num): ...@@ -297,6 +305,9 @@ def upload(hash_num):
redirect_address = request.headers.get('Referer') redirect_address = request.headers.get('Referer')
except: except:
redirect_address = REDIRECT_URL 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) redirect(redirect_address)
#return 'Upload finished: '+file_name+' - '+str(datalength)+' Byte' #return 'Upload finished: '+file_name+' - '+str(datalength)+' Byte'
......
one/static/box.less
...@@ -155,6 +155,14 @@ ...@@ -155,6 +155,14 @@
display: none; display: none;
.container{ .container{
padding: 5px 5px; padding: 5px 5px;
.upload-zone{
margin: 10px;
border-radius: 10px;
border: 2px dashed #666;
height: 40px;
text-align: center;
line-height: 40px;
}
} }
h3{ h3{
font-weight: normal; font-weight: normal;
......
one/static/cloud.js
...@@ -28,7 +28,7 @@ $(function() { ...@@ -28,7 +28,7 @@ $(function() {
} }
}); });
toggleDetails = function() { toggleDetails = function() {
if($(this).parent('.wm').hasClass('opened')){ if($(this).parent('.wm').hasClass('opened')) {
$(this).parent('.wm').removeClass('opened'); $(this).parent('.wm').removeClass('opened');
$(this).next('.details').slideUp(700); $(this).next('.details').slideUp(700);
} else { } else {
...@@ -69,6 +69,11 @@ $(function() { ...@@ -69,6 +69,11 @@ $(function() {
}) })
$('#modal').show(); $('#modal').show();
}); });
$('#old-upload').click(function(e){
e.preventDefault();
$(this).parent().hide().next('div').show();
return false;
})
function Model() { function Model() {
var self = this; var self = this;
...@@ -76,6 +81,7 @@ $(function() { ...@@ -76,6 +81,7 @@ $(function() {
self.allFiles = []; self.allFiles = [];
self.notInRoot = ko.observable(false); self.notInRoot = ko.observable(false);
self.fileLimit = 5; self.fileLimit = 5;
function throttle(f) { function throttle(f) {
var disabled = false; var disabled = false;
return function() { return function() {
...@@ -132,6 +138,7 @@ $(function() { ...@@ -132,6 +138,7 @@ $(function() {
if(added < 6) addFile(data[i]); if(added < 6) addFile(data[i]);
} }
} }
function addFile(d) { function addFile(d) {
var viewData; var viewData;
if(d.TYPE === 'D') { if(d.TYPE === 'D') {
...@@ -192,53 +199,92 @@ $(function() { ...@@ -192,53 +199,92 @@ $(function() {
} }
}) })
} }
self.uploadURL=ko.observable('/'); self.uploadURL = ko.observable('/');
self.getUploadURL=function(){ self.getUploadURL = function() {
$.ajax({ $.ajax({
type: 'POST', type: 'POST',
data: 'ul='+self.currentPath()+'&next='+encodeURI(window.location.href), data: 'ul=' + self.currentPath() + '&next=' + encodeURI(window.location.href),
url: '/ajax/store/upload', url: '/ajax/store/upload',
dataType: 'json', dataType: 'json',
success: function(data){ success: function(data) {
self.uploadURL(data.url); self.uploadURL(data.url);
} }
}).error(function(){ console.log('asd', arguments)}) }).error(function() {
console.log('asd', arguments)
})
} }
self.newFolderName=ko.observable(); self.newFolderName = ko.observable();
self.newFolder=throttle(function(i,e){ self.newFolder = throttle(function(i, e) {
$(e.target).parent().parent().parent().removeClass('opened'); $(e.target).parent().parent().parent().removeClass('opened');
$.ajax({ $.ajax({
type: 'POST', type: 'POST',
data: 'new='+self.newFolderName()+'&path='+self.currentPath(), data: 'new=' + self.newFolderName() + '&path=' + self.currentPath(),
url: '/ajax/store/newFolder', url: '/ajax/store/newFolder',
dataType: 'json', dataType: 'json',
success: function(data){ success: function(data) {
loadFolder(self.currentPath()); 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()); 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); console.log(e);
e.stopPropagation(); e.stopPropagation();
e.preventDefault(); e.preventDefault();
console.log(e.dataTransfer.files)
readfiles(e.dataTransfer.files);
return false; 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); console.log(e);
e.stopPropagation(); e.stopPropagation();
e.preventDefault(); e.preventDefault();
return false; return false;
}); });
document.addEventListener('drop', function(e) { document.addEventListener('dragover', function(e) {
console.log(e); console.log(e);
e.stopPropagation(); e.stopPropagation();
e.preventDefault(); e.preventDefault();
console.log(e.dataTransfer.files)
return false; return false;
}); });
}) })
one/templates/box-filelist.html
...@@ -73,18 +73,26 @@ ...@@ -73,18 +73,26 @@
</li> </li>
<li class="file-upload wm"> <li class="file-upload wm">
<div class="summary" data-bind="click: getUploadURL"> <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="name filetype-up">Fájlfeltöltés</div>
<div class="clear"></div> <div class="clear"></div>
</div> </div>
<div class="details"> <div class="details">
<div class="container"> <div class="container">
<form method="POST" data-bind="attr: {action: uploadURL}" enctype="multipart/form-data"> <div id="upload-zone" class="upload-zone">
{% csrf_token %} A feltöltéshez húzza ide a fájlt. <a href="#" id="old-upload">Hagyományos fájltfeltöltési felület</a>
<input name="data" type="file" /> <img class="preview" />
<input type="submit" value="Feltöltés"/> </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> </form>
</div> </div>
</div> </div>
</div>
</li> </li>
<li class="wm small"> <li class="wm small">
<div class="summary"> <div class="summary">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment