add chunk upload files

This commit is contained in:
j 2013-02-12 19:36:39 +05:30
parent 59114ed01d
commit e6c5194edd
4 changed files with 274 additions and 1 deletions

View File

@ -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
View 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
View 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);
}
}
});
});
});
});

View File

@ -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>