Commit 606f3842 by Dányi Bence

store: ajax upload (drag'n'drop)

parent c6fc41fe
......@@ -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;
......
......@@ -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'
......
......@@ -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;
......
......@@ -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;
});
})
......@@ -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">
......
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