add chunk upload files
This commit is contained in:
j
parent
59114ed01d
commit
e6c5194edd
4 changed files with 274 additions and 1 deletions
|
|
@ -1,8 +1,17 @@
|
||||||
#!/usr/bin/env python
|
#!/usr/bin/env python
|
||||||
import os
|
import os
|
||||||
import sys
|
import sys
|
||||||
|
import os
|
||||||
|
|
||||||
|
|
||||||
if __name__ == "__main__":
|
if __name__ == "__main__":
|
||||||
|
root_dir = os.path.normpath(os.path.abspath(os.path.dirname(__file__)))
|
||||||
|
os.chdir(root_dir)
|
||||||
|
|
||||||
|
#using virtualenv's activate_this.py to reorder sys.path
|
||||||
|
activate_this = os.path.join(root_dir, 'bin', 'activate_this.py')
|
||||||
|
execfile(activate_this, dict(__file__=activate_this))
|
||||||
|
|
||||||
os.environ.setdefault("DJANGO_SETTINGS_MODULE", "videopdf.settings")
|
os.environ.setdefault("DJANGO_SETTINGS_MODULE", "videopdf.settings")
|
||||||
|
|
||||||
from django.core.management import execute_from_command_line
|
from django.core.management import execute_from_command_line
|
||||||
|
|
|
||||||
201
static/js/chunkupload.js
Normal file
201
static/js/chunkupload.js
Normal file
|
|
@ -0,0 +1,201 @@
|
||||||
|
// vi:si:et:sw=4:sts=4:ts=4
|
||||||
|
// GPL2+/MIT 2012
|
||||||
|
'use strict';
|
||||||
|
/*
|
||||||
|
Usage:
|
||||||
|
ChunkUploader({
|
||||||
|
file: file,
|
||||||
|
url: '/add',
|
||||||
|
data: {'name': file.name},
|
||||||
|
progress: function(data) {
|
||||||
|
console.log(data.progress);
|
||||||
|
},
|
||||||
|
callback: function(result) {
|
||||||
|
if(result.progress == 1) {
|
||||||
|
var response = JSON.parse(result.responseText);
|
||||||
|
if(response.resultUrl) {
|
||||||
|
document.location.href = response.resultUrl;
|
||||||
|
} else {
|
||||||
|
alert(response.status;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
alert('!!!');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
*/
|
||||||
|
function ChunkUploader(options) {
|
||||||
|
var chunkSize = options.size || 1024*1024,
|
||||||
|
chunkUrl,
|
||||||
|
file = options.file,
|
||||||
|
maxRetry = -1,
|
||||||
|
retries = 0,
|
||||||
|
request,
|
||||||
|
that = {};
|
||||||
|
|
||||||
|
initUpload();
|
||||||
|
|
||||||
|
function done() {
|
||||||
|
options.callback({
|
||||||
|
status: that.status,
|
||||||
|
progress: that.progress,
|
||||||
|
responseText: that.responseText
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function initUpload() {
|
||||||
|
//request upload slot from server
|
||||||
|
that.status = 'requesting chunk upload';
|
||||||
|
that.progress = 0;
|
||||||
|
request = new XMLHttpRequest();
|
||||||
|
request.addEventListener('load', function (evt) {
|
||||||
|
var response = {};
|
||||||
|
that.responseText = evt.target.responseText;
|
||||||
|
try {
|
||||||
|
response = JSON.parse(evt.target.responseText);
|
||||||
|
} catch(e) {
|
||||||
|
response = {};
|
||||||
|
that.status = 'failed to parse response';
|
||||||
|
that.progress = -1;
|
||||||
|
done();
|
||||||
|
}
|
||||||
|
if (response.maxRetry) {
|
||||||
|
maxRetry = response.maxRetry;
|
||||||
|
}
|
||||||
|
chunkUrl = response.uploadUrl;
|
||||||
|
if (document.location.protocol == 'https:') {
|
||||||
|
chunkUrl = chunkUrl.replace(/http:\/\//, 'https://');
|
||||||
|
}
|
||||||
|
if (chunkUrl) {
|
||||||
|
that.status = 'uploading';
|
||||||
|
that.progress = 0.0;
|
||||||
|
//start upload
|
||||||
|
uploadChunk(0);
|
||||||
|
} else {
|
||||||
|
that.status = 'upload failed, no upload url provided';
|
||||||
|
that.progress = -1;
|
||||||
|
done();
|
||||||
|
}
|
||||||
|
}, false);
|
||||||
|
request.addEventListener('error', function (evt) {
|
||||||
|
that.status = 'uplaod failed';
|
||||||
|
that.progress = -1;
|
||||||
|
that.responseText = evt.target.responseText;
|
||||||
|
done();
|
||||||
|
}, false);
|
||||||
|
request.addEventListener('abort', function (evt) {
|
||||||
|
that.status = 'aborted';
|
||||||
|
that.progress = -1;
|
||||||
|
done();
|
||||||
|
}, false);
|
||||||
|
var formData = new FormData();
|
||||||
|
|
||||||
|
Object.keys(options.data).forEach(function(key) {
|
||||||
|
formData.append(key, options.data[key]);
|
||||||
|
});
|
||||||
|
request.open('POST', options.url);
|
||||||
|
request.send(formData);
|
||||||
|
}
|
||||||
|
|
||||||
|
function progress(p) {
|
||||||
|
that.progress = p;
|
||||||
|
options.progress({
|
||||||
|
progress: that.progress,
|
||||||
|
status: that.status
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function uploadChunk(chunkId) {
|
||||||
|
var bytesAvailable = file.size,
|
||||||
|
chunk,
|
||||||
|
chunkOffset = chunkId * chunkSize;
|
||||||
|
|
||||||
|
if(file.mozSlice) {
|
||||||
|
chunk = file.mozSlice(chunkOffset, chunkOffset+chunkSize, file.type);
|
||||||
|
} else if(file.webkitSlice) {
|
||||||
|
chunk = file.webkitSlice(chunkOffset, chunkOffset+chunkSize, file.type);
|
||||||
|
} else if(file.slice) {
|
||||||
|
chunk = file.slice(chunkOffset, chunkOffset+chunkSize, file.type);
|
||||||
|
} else {
|
||||||
|
that.status = 'Sorry, your browser is currently not supported.';
|
||||||
|
done()
|
||||||
|
}
|
||||||
|
|
||||||
|
progress(parseFloat(chunkOffset)/bytesAvailable);
|
||||||
|
|
||||||
|
request = new XMLHttpRequest();
|
||||||
|
request.addEventListener('load', function (evt) {
|
||||||
|
var response;
|
||||||
|
that.responseText = evt.target.responseText;
|
||||||
|
try {
|
||||||
|
response = JSON.parse(evt.target.responseText);
|
||||||
|
} catch(e) {
|
||||||
|
response = {};
|
||||||
|
}
|
||||||
|
if (response.done == 1) {
|
||||||
|
//upload finished
|
||||||
|
that.resultUrl = response.resultUrl;
|
||||||
|
that.progress = 1;
|
||||||
|
that.status = 'done';
|
||||||
|
done();
|
||||||
|
} else if (response.result == 1) {
|
||||||
|
//reset retry counter
|
||||||
|
retries = 0;
|
||||||
|
//start uploading next chunk
|
||||||
|
uploadChunk(chunkId + 1);
|
||||||
|
} else {
|
||||||
|
//failed to upload, try again in 5 second
|
||||||
|
retries++;
|
||||||
|
if (maxRetry > 0 && retries > maxRetry) {
|
||||||
|
that.status = 'uplaod failed';
|
||||||
|
that.progress = -1;
|
||||||
|
done();
|
||||||
|
} else {
|
||||||
|
setTimeout(function() {
|
||||||
|
uploadChunk(chunkId);
|
||||||
|
}, 5000);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, false);
|
||||||
|
request.addEventListener('error', function (evt) {
|
||||||
|
//failed to upload, try again in 3 second
|
||||||
|
retries++;
|
||||||
|
if (maxRetry > 0 && retries > maxRetry) {
|
||||||
|
that.status = 'uplaod failed';
|
||||||
|
that.progress = -1;
|
||||||
|
done();
|
||||||
|
} else {
|
||||||
|
setTimeout(function() {
|
||||||
|
uploadChunk(chunkId);
|
||||||
|
}, 3000);
|
||||||
|
}
|
||||||
|
}, false);
|
||||||
|
request.upload.addEventListener('progress', function (evt) {
|
||||||
|
if (evt.lengthComputable) {
|
||||||
|
progress(parseFloat(chunkOffset + evt.loaded) / bytesAvailable);
|
||||||
|
}
|
||||||
|
}, false);
|
||||||
|
request.addEventListener('abort', function (evt) {
|
||||||
|
that.status = 'aborted';
|
||||||
|
that.progress = -1;
|
||||||
|
done();
|
||||||
|
}, false);
|
||||||
|
|
||||||
|
var formData = new FormData();
|
||||||
|
formData.append('chunkId', chunkId);
|
||||||
|
if (bytesAvailable <= chunkOffset + chunkSize) {
|
||||||
|
formData.append('done', 1);
|
||||||
|
}
|
||||||
|
formData.append('chunk', chunk);
|
||||||
|
request.open('POST', chunkUrl, true);
|
||||||
|
request.send(formData);
|
||||||
|
}
|
||||||
|
|
||||||
|
that.abort = function() {
|
||||||
|
if (request) {
|
||||||
|
request.abort();
|
||||||
|
request = null;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
return that;
|
||||||
|
}
|
||||||
63
static/js/upload.js
Normal file
63
static/js/upload.js
Normal file
|
|
@ -0,0 +1,63 @@
|
||||||
|
// vi:si:et:sw=4:sts=4:ts=4
|
||||||
|
$(document).ready(function() {
|
||||||
|
function formatSize(bytes) {
|
||||||
|
var base = 1000,
|
||||||
|
PREFIXES = ['K', 'M', 'G', 'T', 'P'],
|
||||||
|
len = PREFIXES.length,
|
||||||
|
val,
|
||||||
|
pow = 1;
|
||||||
|
while(Math.pow(base, pow+1) < bytes) {
|
||||||
|
pow += 1;
|
||||||
|
}
|
||||||
|
return (Math.round(100* bytes / Math.pow(base, pow)) / 100) + ' ' + PREFIXES[pow-1] + 'B';
|
||||||
|
}
|
||||||
|
|
||||||
|
$('#file').val('');
|
||||||
|
$('#file').change(function(e) {
|
||||||
|
if(this.files.length>0) {
|
||||||
|
$('#file').hide();
|
||||||
|
$('#upload').show();
|
||||||
|
$('#status').width(400);
|
||||||
|
$('#status').html('' + this.files[0].name + ' (' + formatSize(this.files[0].size) + ')');
|
||||||
|
} else {
|
||||||
|
$('#upload').hide();
|
||||||
|
}
|
||||||
|
$('#upload').click(function(e) {
|
||||||
|
e.stopPropagation();
|
||||||
|
var file = $('#file')[0].files[0];
|
||||||
|
|
||||||
|
$('#upload').hide();
|
||||||
|
$('#status').width(200);
|
||||||
|
$('#status').css('background-color', '#eee');
|
||||||
|
$('#status').html('<div id="progress" style="background-color: #666;height:20px;width:0%" /><div id="progressstatus" style="background-color: #fff;">uploading</div>');
|
||||||
|
ChunkUploader({
|
||||||
|
file: file,
|
||||||
|
url: '/add',
|
||||||
|
data: {
|
||||||
|
'firefogg': 1,
|
||||||
|
'name': file.name
|
||||||
|
},
|
||||||
|
progress: function(data) {
|
||||||
|
var progress = data.progress
|
||||||
|
$('#progress').css('width', parseInt(progress*100, 10) +'%');
|
||||||
|
$('#progressstatus').html(parseInt(progress*100, 10) + '% - ' + data.status);
|
||||||
|
},
|
||||||
|
callback: function(result) {
|
||||||
|
if(result.progress == 1) {
|
||||||
|
var response = JSON.parse(result.responseText);
|
||||||
|
if(response.resultUrl) {
|
||||||
|
document.location.href = response.resultUrl;
|
||||||
|
} else {
|
||||||
|
$('#status').html(response.status);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
$('#status').width(500);
|
||||||
|
$('#status').css('background-color', '#fff');
|
||||||
|
$('#status').html(result.status);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title>generic one click host</title>
|
<title>videopdf</title>
|
||||||
<script src="/static/js/jquery.js" type="text/javascript"></script>
|
<script src="/static/js/jquery.js" type="text/javascript"></script>
|
||||||
<script src="/static/js/chunkupload.js" type="text/javascript"></script>
|
<script src="/static/js/chunkupload.js" type="text/javascript"></script>
|
||||||
<script src="/static/js/upload.js?1" type="text/javascript"></script>
|
<script src="/static/js/upload.js?1" type="text/javascript"></script>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue