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