beginnings of upload js
This commit is contained in:
Sanj
parent
60ad39dba4
commit
c1876fe0ee
201
itf/static/js/upload/chunkupload.js
Normal file
201
itf/static/js/upload/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;
|
||||||
|
}
|
||||||
163
itf/static/js/upload/edgeUpload.js
Normal file
163
itf/static/js/upload/edgeUpload.js
Normal file
|
|
@ -0,0 +1,163 @@
|
||||||
|
// vi:si:et:sw=2:sts=2:ts=2
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
function doProgress(progress) {
|
||||||
|
var status = progress.status;
|
||||||
|
var progress = progress.progress;
|
||||||
|
//do something with status and progress, i.e. set progressbar width:
|
||||||
|
$('#progress').css('width', parseInt(progress*100, 10) +'%');
|
||||||
|
$('#progressstatus').html(parseInt(progress*100, 10) + '% - ' + status);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
var UploadQueue = function() {
|
||||||
|
var that = this;
|
||||||
|
this.allFiles = [];
|
||||||
|
this.isUploading = false;
|
||||||
|
this.$list = $('#filesList');
|
||||||
|
this.$progress = $('#progressbar');
|
||||||
|
this.len = function() {
|
||||||
|
return this.allFiles.length;
|
||||||
|
};
|
||||||
|
this.getLi = function(no) {
|
||||||
|
return this.$list.children('li').eq(no);
|
||||||
|
}
|
||||||
|
this.init();
|
||||||
|
}
|
||||||
|
|
||||||
|
UploadQueue.prototype.init = function() {
|
||||||
|
// $('#progressbar').show();
|
||||||
|
$('#progressbar').width(200).height(20);
|
||||||
|
// $('#progressbar').css('background-color', '#80ADB0');
|
||||||
|
$('#progressbar').html('<div id="progress" style="height:20px;width:0%"></div><div id="progressstatus" style="">uploading</div>');
|
||||||
|
}
|
||||||
|
|
||||||
|
/* param f = file */
|
||||||
|
UploadQueue.prototype.getData = function(f) {
|
||||||
|
return {
|
||||||
|
'firefogg': 1,
|
||||||
|
'name': f.name,
|
||||||
|
'category': $('#files_category').val()
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
UploadQueue.prototype.uploadNext = function() {
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
UploadQueue.prototype.addFile = function(f) {
|
||||||
|
for (var i=0; i<this.len(); i++) {
|
||||||
|
if (this.allFiles[i].name == f.name) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.allFiles.push(f);
|
||||||
|
this.addFileToList(f);
|
||||||
|
// this.$list.triggerEvent("fileAdded");
|
||||||
|
if (!this.isUploading) {
|
||||||
|
this.upload(this.len() - 1);
|
||||||
|
}
|
||||||
|
return this;
|
||||||
|
};
|
||||||
|
|
||||||
|
UploadQueue.prototype.addFileToList = function(f) {
|
||||||
|
var that = this;
|
||||||
|
var $li = $('<li />').data("file", f).text(f.name).appendTo(that.$list);
|
||||||
|
};
|
||||||
|
|
||||||
|
UploadQueue.prototype.markDone = function(no, data) {
|
||||||
|
$('.uploading').removeClass("uploading");
|
||||||
|
var $li = this.getLi(no);
|
||||||
|
$li.addClass("uploaded");
|
||||||
|
fileUploadedCallback($li, data);
|
||||||
|
if (this.len() > (no + 1)) {
|
||||||
|
this.upload(no + 1);
|
||||||
|
} else {
|
||||||
|
this.isUploading = false;
|
||||||
|
$('#progressbar').hide();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
UploadQueue.prototype.upload = function(no) {
|
||||||
|
var that = this;
|
||||||
|
var fil = this.allFiles[no];
|
||||||
|
// console.log("uploading", fil);
|
||||||
|
var data = this.getData(fil);
|
||||||
|
var $li = this.getLi(no);
|
||||||
|
this.isUploading = true;
|
||||||
|
$('#progressbar').show();
|
||||||
|
$li.addClass("uploading");
|
||||||
|
var ogg = ChunkUploader({
|
||||||
|
'file': fil,
|
||||||
|
'url': add_url,
|
||||||
|
'data': data,
|
||||||
|
'callback': function(response) {
|
||||||
|
var data = JSON.parse(response.responseText);
|
||||||
|
//console.log("data", data);
|
||||||
|
if (data.resultUrl) {
|
||||||
|
that.markDone(no, response);
|
||||||
|
} else {
|
||||||
|
$('#progressbar').html(response.status);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
'progress': doProgress
|
||||||
|
});
|
||||||
|
/*
|
||||||
|
ogg = FirefoggUploader(fil, add_url, data, function(ogg) {
|
||||||
|
if (ogg.resultUrl) {
|
||||||
|
that.markDone(no, ogg);
|
||||||
|
} else {
|
||||||
|
$('#progressbar').html(ogg.status);
|
||||||
|
}
|
||||||
|
}, doProgress);
|
||||||
|
*/
|
||||||
|
};
|
||||||
|
|
||||||
|
function fileUploadedCallback(jq, data) {
|
||||||
|
// alert("hi");
|
||||||
|
// console.log(data);
|
||||||
|
|
||||||
|
var d = JSON.parse(data.responseText);
|
||||||
|
// console.log("dd", d)
|
||||||
|
var fileId = d.fileId;
|
||||||
|
jq.data("fileId", fileId);
|
||||||
|
if (d.hasOwnProperty("errors")) {
|
||||||
|
var $error = $('<div />').addClass("fileError").text(data.errors[0]).appendTo(jq);
|
||||||
|
} else {
|
||||||
|
var $formContainer = $('<div />').addClass("fileForm");
|
||||||
|
// var $title = $('<div />').addClass("formHelp").text("Add Description").appendTo($formContainer);
|
||||||
|
// console.log(data);
|
||||||
|
var $titleInput = $('<input />').attr("type", "text").addClass("fileTitle").val(d.title);
|
||||||
|
// console.log($titleInput);
|
||||||
|
$titleInput.appendTo($formContainer);
|
||||||
|
var $descInput = $('<textarea />').attr("placeholder", "Add Description").addClass("fileDesc").appendTo($formContainer);
|
||||||
|
if (d.type == 'image') {
|
||||||
|
var $thumbnail = $('<img />').addClass("thumbnail").attr("src", d.thumbnail).appendTo($formContainer);
|
||||||
|
}
|
||||||
|
var $submitBtn = $('<button />').text("Submit").click(function() {
|
||||||
|
var $this = $(this);
|
||||||
|
$this.attr("disabled", "disabled");
|
||||||
|
var $parent = $(this).parents('.uploaded');
|
||||||
|
var fileId = $parent.data("fileId");
|
||||||
|
var title = $parent.find(".fileTitle").val();
|
||||||
|
var description = $parent.find(".fileDesc").val();
|
||||||
|
$.post("/files/editFile/", {
|
||||||
|
'id': fileId,
|
||||||
|
'title': title,
|
||||||
|
'description': description
|
||||||
|
}, function(response) {
|
||||||
|
$this.removeAttr("disabled");
|
||||||
|
$this.after("<span class='saved'>Saved</span>");
|
||||||
|
},
|
||||||
|
"json");
|
||||||
|
}).appendTo($formContainer);
|
||||||
|
$formContainer.appendTo(jq);
|
||||||
|
}
|
||||||
|
}
|
||||||
129
itf/static/js/upload/itfUpload.js
Normal file
129
itf/static/js/upload/itfUpload.js
Normal file
|
|
@ -0,0 +1,129 @@
|
||||||
|
(function($) {
|
||||||
|
|
||||||
|
var ItfFileUpload = function(file, Q) {
|
||||||
|
this.file = file;
|
||||||
|
this.Q = Q;
|
||||||
|
|
||||||
|
this.$li = this.getLi().appendTo(Q.$ul);
|
||||||
|
};
|
||||||
|
|
||||||
|
ItfFileUpload.prototype.upload = function() {
|
||||||
|
var that = this;
|
||||||
|
var Q = that.Q;
|
||||||
|
var fil = this.file;
|
||||||
|
// console.log("uploading", fil);
|
||||||
|
var data = Q.getData(fil);
|
||||||
|
// var $li = this.getLi(no);
|
||||||
|
Q.isUploading = true;
|
||||||
|
var url = Q.options.addURL;
|
||||||
|
this.showProgress();
|
||||||
|
// $('#progressbar').show();
|
||||||
|
// $li.addClass("uploading");
|
||||||
|
this.chunkUploader = ChunkUploader({
|
||||||
|
'file': fil,
|
||||||
|
'url': url,
|
||||||
|
'data': data,
|
||||||
|
'callback': function(response) {
|
||||||
|
var data = JSON.parse(response.responseText);
|
||||||
|
//console.log("data", data);
|
||||||
|
if (data.resultUrl) {
|
||||||
|
that.markDone(data);
|
||||||
|
} else {
|
||||||
|
that.$progressStatus.html(response.status);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
'progress': that.doProgress
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
ItfFileUpload.prototype.showProgress = function() {
|
||||||
|
this.$elem.find(".fileProgress").show();
|
||||||
|
};
|
||||||
|
|
||||||
|
ItfFileUpload.prototype.doProgress = function() {
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
ItfFileUpload.prototype.getLi = function() {
|
||||||
|
var that = this;
|
||||||
|
var $li = $('<li />').addClass("uploadFileItem");
|
||||||
|
var $title = $('<div />').addClass("uploadFileTitle").text(that.file.name).appendTo($li);
|
||||||
|
var $progress = $('<div />').addClass("fileProgress").hide().appendTo($li);
|
||||||
|
var $progressBar = $('<div />').addClass("progressBar").appendTo($progress);
|
||||||
|
var $progressStatus = $('<div />').addClass("progressStatus").appendTo($progress);
|
||||||
|
return $li;
|
||||||
|
};
|
||||||
|
|
||||||
|
var ItfUploadQueue = function(options, $elem) {
|
||||||
|
var that = this;
|
||||||
|
this.files = [];
|
||||||
|
this.isUploading = false;
|
||||||
|
this.len = function() {
|
||||||
|
return this.files.length;
|
||||||
|
}
|
||||||
|
this.$elem = $elem;
|
||||||
|
this.$ul = $("<ul />").addClass("uploadFileList").appendTo($elem);
|
||||||
|
};
|
||||||
|
|
||||||
|
ItfUploadQueue.prototype.addFile = function(f) {
|
||||||
|
var that = this;
|
||||||
|
var fileUpload = new ItfFileUpload(f, that);
|
||||||
|
this.files.push(fileUpload);
|
||||||
|
// this.addToList(f);
|
||||||
|
if (!this.isUploading) {
|
||||||
|
fileUpload.upload();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
ItfUploadQueue.prototype.getData = function(f) {
|
||||||
|
var that = this;
|
||||||
|
return {
|
||||||
|
'name' f.name,
|
||||||
|
'id': that.options.id
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$.fn.uploadQueue = function(options) {
|
||||||
|
var that = this;
|
||||||
|
var dataOptions = {
|
||||||
|
//add data- options
|
||||||
|
}
|
||||||
|
var o = $.extend({
|
||||||
|
'id': '0',
|
||||||
|
'addURL': '/add'
|
||||||
|
}, options, dataOptions);
|
||||||
|
|
||||||
|
var Q = new ItfUploadQueue(o, that);
|
||||||
|
|
||||||
|
var $fileInput = $(this).find('input[type=file]'); //If there are any <input type=file> elements with the file drop container, bind to their change event.
|
||||||
|
if ($fileInput.length > 0) {
|
||||||
|
$fileInput.change(function() {
|
||||||
|
var t = this;
|
||||||
|
for (var i=0; i<t.files.length;i++) {
|
||||||
|
var f = t.files[i];
|
||||||
|
Q.addFile(f);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
var f = this.get(0); //get DOM object, not jquery element, enable drag / droppability of files from desktop
|
||||||
|
f.addEventListener("dragenter", function(e) { e.stopPropagation(); e.preventDefault(); return false; }, false);
|
||||||
|
f.addEventListener("dragover", function(e) { e.stopPropagation(); e.preventDefault(); return false; }, false);
|
||||||
|
f.addEventListener("drop", function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
|
var files = e.dataTransfer.files;
|
||||||
|
for (var i=0; i<files.length; i++) {
|
||||||
|
var fil = files[i];
|
||||||
|
Q.addFile(fil);
|
||||||
|
}
|
||||||
|
}, false);
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
})(jQuery);
|
||||||
Loading…
Reference in New Issue
Block a user