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
|
||||
import os
|
||||
import sys
|
||||
import os
|
||||
|
||||
|
||||
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")
|
||||
|
||||
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>
|
||||
<html>
|
||||
<head>
|
||||
<title>generic one click host</title>
|
||||
<title>videopdf</title>
|
||||
<script src="/static/js/jquery.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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue