mirror of
https://github.com/alchemy-fr/Phraseanet.git
synced 2025-10-13 04:53:26 +00:00
add upload library
This commit is contained in:
Nicolas Le Goff
285
www/include/js/tests/jquery.Upload.js.html
Normal file
285
www/include/js/tests/jquery.Upload.js.html
Normal file
@@ -0,0 +1,285 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title></title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.js"></script>
|
||||
<script src="/include/vendor/qunit/qunit/qunit.js"></script>
|
||||
<script src="/include/jslibs/blueimp.load-image.js"></script>
|
||||
<script src="../../../prod/jquery.Upload.js"></script>
|
||||
<link type="text/css" rel="stylesheet" href="/include/vendor/qunit/qunit/qunit.css"/>
|
||||
<script> $(document).ready(function(){
|
||||
|
||||
var getUploadManager = function(){
|
||||
var UM = new p4.UploaderManager({
|
||||
container : $(".container"),
|
||||
uploadBox : $(".upload-box"),
|
||||
settingsBox : $(".settings-box"),
|
||||
downloadBox : $(".download-box")
|
||||
});
|
||||
|
||||
return UM;
|
||||
}
|
||||
|
||||
module("upload Manager");
|
||||
|
||||
test("bad parameters", function() {
|
||||
raises(function() {
|
||||
new p4.UploaderManager();
|
||||
}, "must throw error to pass");
|
||||
|
||||
raises(function() {
|
||||
new p4.UploaderManager({
|
||||
container : $(".container"),
|
||||
uploadBox : $(".upload-box"),
|
||||
settingsBox : $(".settings-box"),
|
||||
downloadBox : {}
|
||||
});
|
||||
}, "must throw error to pass");
|
||||
|
||||
raises(function() {
|
||||
new p4.UploaderManager({
|
||||
container : $(".container"),
|
||||
uploadBox : $(".upload-box"),
|
||||
settingsBox : $(".settings-box")
|
||||
});
|
||||
}, "must throw error to pass");
|
||||
});
|
||||
|
||||
test("getContainer", function() {
|
||||
var UM = getUploadManager();
|
||||
deepEqual($(".container"), UM.getContainer());
|
||||
});
|
||||
|
||||
test("getUploadBox", function() {
|
||||
var UM = getUploadManager();
|
||||
deepEqual($(".upload-box").find('ul:first'), UM.getUploadBox());
|
||||
});
|
||||
|
||||
test("getSettingsBox", function() {
|
||||
var UM = getUploadManager();
|
||||
deepEqual($(".settings-box"), UM.getSettingsBox());
|
||||
});
|
||||
|
||||
test("getDownloadBox", function() {
|
||||
var UM = getUploadManager();
|
||||
deepEqual($(".download-box"), UM.getDownloadBox());
|
||||
});
|
||||
|
||||
test("clearUploadBox", function() {
|
||||
var UM = getUploadManager();
|
||||
UM.addData({test:'test'});
|
||||
UM.clearUploadBox();
|
||||
equal(0, UM.Queue.getLength());
|
||||
equal(0, UM.getUploadIndex());
|
||||
equal(0, UM.getUploadBox().find('*').length);
|
||||
});
|
||||
|
||||
test("getDatas", function() {
|
||||
var UM = getUploadManager();
|
||||
|
||||
UM.addData({test:'test'});
|
||||
UM.addData({test:'toto'});
|
||||
|
||||
var datas = UM.getDatas();
|
||||
var expected = {1:{test:"test", uploadIndex:1}, 2:{test:"toto", uploadIndex:2}};
|
||||
deepEqual(datas, expected);
|
||||
});
|
||||
|
||||
test("addData", function() {
|
||||
var UM = getUploadManager();
|
||||
|
||||
UM.addData({test:'test'});
|
||||
UM.addData({test:'toto'});
|
||||
|
||||
equal( UM.Queue.getLength(), 2);
|
||||
equal(UM.getUploadIndex(), 2);
|
||||
});
|
||||
|
||||
test("getData", function() {
|
||||
var UM = getUploadManager();
|
||||
|
||||
UM.addData({test:'test'});
|
||||
deepEqual(UM.getData(UM.getUploadIndex()), {test:'test', uploadIndex: 1});
|
||||
UM.addData({test:'test'});
|
||||
deepEqual(UM.getData(UM.getUploadIndex()), {test:'test', uploadIndex: 2});
|
||||
});
|
||||
|
||||
test("addAttributeToData", function() {
|
||||
var UM = getUploadManager();
|
||||
|
||||
UM.addData({test:'test'});
|
||||
UM.addAttributeToData(UM.getUploadIndex(), 'test2', 'titi');
|
||||
var data = UM.getData(UM.getUploadIndex());
|
||||
|
||||
ok("test2" in data);
|
||||
equal(data.test2, 'titi');
|
||||
});
|
||||
|
||||
test("getUploadIndex", function() {
|
||||
var UM = getUploadManager();
|
||||
UM.uploadIndex = 5;
|
||||
equal(UM.getUploadIndex(), 5);
|
||||
});
|
||||
|
||||
module("upload Manager Queue");
|
||||
|
||||
test("set", function() {
|
||||
var UM = getUploadManager();
|
||||
|
||||
UM.Queue.set(32, {test:'test'});
|
||||
equal(1, UM.Queue.getLength());
|
||||
});
|
||||
|
||||
test("remove", function() {
|
||||
var UM = getUploadManager();
|
||||
|
||||
UM.Queue.set(32, {test:'test'});
|
||||
UM.Queue.remove(32);
|
||||
|
||||
equal(0, UM.Queue.getLength());
|
||||
});
|
||||
|
||||
test("length", function() {
|
||||
var UM = getUploadManager();
|
||||
|
||||
UM.Queue.set(32, {test:'test'});
|
||||
UM.Queue.set(33, {test:'test'});
|
||||
UM.Queue.set(34, {test:'test'});
|
||||
UM.Queue.set(32, {test:'test'});
|
||||
|
||||
equal(3, UM.Queue.getLength());
|
||||
});
|
||||
|
||||
test("all", function() {
|
||||
var UM = getUploadManager();
|
||||
|
||||
UM.Queue.set(32, {test:'test'});
|
||||
UM.Queue.set(33, {test:'test'});
|
||||
UM.Queue.set(34, {test:'test'});
|
||||
UM.Queue.set(32, {test:'test'});
|
||||
|
||||
var o = UM.Queue.all();
|
||||
$.each(o, function(k, v){
|
||||
equal(v, UM.Queue.get(k));
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
test("clear", function() {
|
||||
var UM = getUploadManager();
|
||||
|
||||
UM.Queue.set(32, {test:'test'});
|
||||
UM.Queue.set(33, {test:'test'});
|
||||
UM.Queue.set(34, {test:'test'});
|
||||
|
||||
UM.Queue.clear();
|
||||
equal(0, UM.Queue.getLength());
|
||||
});
|
||||
|
||||
test("isEmpty", function() {
|
||||
var UM = getUploadManager();
|
||||
|
||||
ok(UM.Queue.isEmpty());
|
||||
|
||||
UM.Queue.set(32, {test:'test'});
|
||||
|
||||
ok(!UM.Queue.isEmpty());
|
||||
});
|
||||
|
||||
module("upload Manager Formater");
|
||||
|
||||
test("size", function() {
|
||||
var UM = getUploadManager();
|
||||
|
||||
var convert = UM.Formater.size(125456589754);
|
||||
equal('116.84 GB', convert);
|
||||
convert = UM.Formater.size(12545);
|
||||
equal('12.25 KB', convert);
|
||||
convert = UM.Formater.size(565487585);
|
||||
equal('539.29 MB', convert);
|
||||
});
|
||||
|
||||
test("bitrate", function() {
|
||||
var UM = getUploadManager();
|
||||
|
||||
var convert = UM.Formater.bitrate(125456589754);
|
||||
equal('116.84 Gbit/s', convert);
|
||||
convert = UM.Formater.bitrate(12545);
|
||||
equal('12.25 Kbit/s', convert);
|
||||
convert = UM.Formater.bitrate(565487585);
|
||||
equal('539.29 Mbit/s', convert);
|
||||
});
|
||||
|
||||
module("upload Manager Preview");
|
||||
|
||||
test("setOptions & getOptions", function() {
|
||||
var UM = getUploadManager();
|
||||
|
||||
var o = {
|
||||
maxWidth: 600,
|
||||
maxHeight: 480,
|
||||
minWidth: 300,
|
||||
minHeight: 200,
|
||||
canvas : false
|
||||
};
|
||||
|
||||
var defaultOptions = {
|
||||
fileType: /^image\/(gif|jpeg|png|jpg)$/,
|
||||
maxSize: 5242880
|
||||
};
|
||||
|
||||
var expected = $.extend(defaultOptions, o);
|
||||
|
||||
UM.Preview.setOptions(o);
|
||||
|
||||
deepEqual(expected, UM.Preview.getOptions());
|
||||
|
||||
});
|
||||
|
||||
test("render", function() {
|
||||
var UM = getUploadManager();
|
||||
|
||||
var ab, bb, blob, i, ia, _i, _len;
|
||||
|
||||
var byteString = 'iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAyVBMVEUzM2a9pUL90Bzi0phoZH3/6pb/9cytooiEg3v93FhST2vuwhL977qVjGr/++z/1zl0cILPvoj/5X9eW3Xix1/9ywP/7aX/+NyLhnb/88Sfk37NwZ86OWb80ix0bHD/5HZZV3T/8LX//vn/20yFeWr/6I1jYob7zBDGqTrp4MNoZ4j/7J7/9tPNtWCDg4P/4mtSUHT1xwuckWT//fP+2kfpz2r/5oReXYD8zAr/7qz/+uSLhnaflYjPx7Q6Omn70zP977qAeHoAAAAdPTPOAAAAQ3RSTlP///////////////////////////////////////////////////////////////////////////////////////8AQWIE7wAAAM5JREFUGFclj9lywjAMRcWSkIWGVTYppTQMe0JCwA22hzZT//9HVTb3SeeMNJLA2KCNqwxYlJVSeSidIoFCJ5oXqWqtAeLN3YmMrWorpL7vH5r7/S/WyKMBrJLk/OCF35/luzYmwbSmAT/NlNcIXAAqzgviocp3a4FvgN4JfiyzCXyPbEeYXsfDTDHvMwq7cUlb2PL3+hy8Rx8XgR0S2LLeXwTRdi5kHbhLV00zXVehOOCtdL/U2Aox6mJN7IQ5xvRs3AmIX8KY4BaUFo35B3lHJ6UKnYJ8AAAAAElFTkSuQmCC';
|
||||
|
||||
ab = new ArrayBuffer(byteString.length);
|
||||
ia = new Uint8Array(ab);
|
||||
|
||||
for (_i = 0, _len = byteString.length; _i < _len; _i++) {
|
||||
i = byteString[_i];
|
||||
ia[i] = byteString.charCodeAt(i);
|
||||
}
|
||||
|
||||
bb = new MozBlobBuilder();
|
||||
bb.append(ab);
|
||||
blob = bb.getBlob('image/png');
|
||||
|
||||
UM.Preview.render(blob, function(img){
|
||||
//do something
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<h1 id="qunit-header">QUnit example</h1>
|
||||
<h2 id="qunit-banner"></h2>
|
||||
<div id="qunit-testrunner-toolbar"></div>
|
||||
<h2 id="qunit-userAgent"></h2>
|
||||
<ol id="qunit-tests"></ol>
|
||||
<div id="qunit-fixture">test markup, will be hidden</div>
|
||||
|
||||
<div class='container'>
|
||||
<div class='upload-box'><p></p></div>
|
||||
<div class='settings-box'></div>
|
||||
<div class='download-box'></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
244
www/prod/jquery.Upload.js
Normal file
244
www/prod/jquery.Upload.js
Normal file
@@ -0,0 +1,244 @@
|
||||
;
|
||||
var p4 = p4 || {};
|
||||
|
||||
;
|
||||
(function(p4, $){
|
||||
|
||||
/**
|
||||
* UPLOADER MANAGER
|
||||
*/
|
||||
var UploaderManager = function(options){
|
||||
|
||||
var options = options || {};
|
||||
|
||||
if(false === ("container" in options)){
|
||||
throw "missing container parameter";
|
||||
}
|
||||
else if(! options.container.jquery){
|
||||
throw "container parameter must be a jquery dom element";
|
||||
}
|
||||
|
||||
if(false === ("settingsBox" in options)){
|
||||
throw "missing settingBox parameter";
|
||||
}
|
||||
else if(! options.settingsBox.jquery){
|
||||
throw "container parameter must be a jquery dom element";
|
||||
}
|
||||
|
||||
if(false === ("uploadBox" in options)){
|
||||
throw "missing uploadBox parameter";
|
||||
}
|
||||
else if(! options.uploadBox.jquery){
|
||||
throw "container parameter must be a jquery dom element";
|
||||
}
|
||||
|
||||
if(false === ("downloadBox" in options)){
|
||||
throw "missing downloadBox parameter";
|
||||
}
|
||||
else if(! options.downloadBox.jquery){
|
||||
throw "container parameter must be a jquery dom element";
|
||||
}
|
||||
|
||||
this.recordClass = options.recordClass || 'upload-record';
|
||||
|
||||
this.options = options;
|
||||
|
||||
this.options.uploadBox.wrapInner('<ul />');
|
||||
|
||||
this.options.uploadBox = this.options.uploadBox.find('ul:first');
|
||||
|
||||
if($.isFunction($.fn.sortable)){
|
||||
this.options.uploadBox.sortable();
|
||||
}
|
||||
|
||||
this.uploadIndex = 0;
|
||||
|
||||
this.Queue = new Queue();
|
||||
this.Formater = new Formater();
|
||||
this.Preview = new Preview();
|
||||
};
|
||||
|
||||
UploaderManager.prototype = {
|
||||
setOptions : function(options){
|
||||
return $.extend(this.options, options);
|
||||
},
|
||||
getContainer : function(){
|
||||
return this.options.container;
|
||||
},
|
||||
getUploadBox : function(){
|
||||
return this.options.uploadBox;
|
||||
},
|
||||
getSettingsBox : function(){
|
||||
return this.options.settingsBox;
|
||||
},
|
||||
getDownloadBox : function(){
|
||||
return this.options.downloadBox;
|
||||
},
|
||||
clearUploadBox: function(){
|
||||
this.getUploadBox().empty();
|
||||
this.uploadIndex = 0;
|
||||
this.Queue.clear();
|
||||
},
|
||||
getDatas : function(){
|
||||
return this.Queue.all();
|
||||
},
|
||||
getData : function(index){
|
||||
return this.Queue.get(index);
|
||||
},
|
||||
addData: function(data){
|
||||
this.uploadIndex++;
|
||||
data.uploadIndex = this.uploadIndex;
|
||||
this.Queue.set(this.uploadIndex, data);
|
||||
},
|
||||
removeData : function(index){
|
||||
this.Queue.remove(index);
|
||||
},
|
||||
addAttributeToData : function(indexOfData, attribute, value){
|
||||
var data = this.getData(indexOfData);
|
||||
if($.type(attribute) === "string"){
|
||||
data[attribute] = value;
|
||||
this.Queue.set(indexOfData, data);
|
||||
}
|
||||
},
|
||||
getUploadIndex : function(){
|
||||
return this.uploadIndex;
|
||||
},
|
||||
hasData : function(){
|
||||
return !this.Queue.isEmpty();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* PREVIEW
|
||||
*
|
||||
* Dependency : loadImage function
|
||||
* @see https://github.com/blueimp/JavaScript-Load-Image
|
||||
*
|
||||
* Options
|
||||
* maxWidth: (int) Max width of preview
|
||||
* maxHeight: (int) Max height of preview
|
||||
* minWidth: (int) Min width of preview
|
||||
* minHeight: (int) Min height of preview
|
||||
* canva: (boolean) render preview as canva if supported by the navigator
|
||||
*/
|
||||
|
||||
var Preview = function(){
|
||||
this.options = {
|
||||
fileType: /^image\/(gif|jpeg|png|jpg)$/,
|
||||
maxSize : 5242880 // 5MB
|
||||
};
|
||||
}
|
||||
|
||||
Preview.prototype = {
|
||||
setOptions: function(options){
|
||||
this.options = $.extend(this.options, options);
|
||||
},
|
||||
getOptions: function(){
|
||||
return this.options;
|
||||
},
|
||||
render: function(file, callback){
|
||||
if(typeof loadImage == 'function' && this.options.fileType.test(file.type)){
|
||||
if($.type(this.options.maxSize) !== 'number' || file.size < this.options.maxSize){
|
||||
var options = {
|
||||
maxWidth: this.options.maxWidth || 150,
|
||||
maxHeight: this.options.maxHeight || 75,
|
||||
minWidth: this.options.minWidth || 80,
|
||||
minHeight: this.options.minHeight || 40,
|
||||
canvas : this.options.canva || true
|
||||
};
|
||||
loadImage(file, callback, options);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* FORMATER
|
||||
*/
|
||||
|
||||
var Formater = function(){
|
||||
|
||||
}
|
||||
|
||||
Formater.prototype = {
|
||||
size: function (bytes) {
|
||||
if (typeof bytes !== 'number') {
|
||||
throw bytes + ' is not a number';
|
||||
}
|
||||
if (bytes >= 1073741824) {
|
||||
return (bytes / 1073741824).toFixed(2) + ' GB';
|
||||
}
|
||||
if (bytes >= 1048576) {
|
||||
return (bytes / 1048576).toFixed(2) + ' MB';
|
||||
}
|
||||
return (bytes / 1024).toFixed(2) + ' KB';
|
||||
},
|
||||
bitrate: function (bits) {
|
||||
if (typeof bits !== 'number') {
|
||||
throw bits + ' is not a number';
|
||||
}
|
||||
if (bits >= 1073741824) {
|
||||
return (bits / 1073741824).toFixed(2) + ' Gbit/s';
|
||||
}
|
||||
if (bits >= 1048576) {
|
||||
return (bits / 1048576).toFixed(2) + ' Mbit/s';
|
||||
}
|
||||
if (bits >= 1024) {
|
||||
return (bits / 1024).toFixed(2) + ' Kbit/s';
|
||||
}
|
||||
return bits + ' bit/s';
|
||||
},
|
||||
pourcent: function(current, total){
|
||||
return (current/ total * 100).toFixed(2)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* QUEUE
|
||||
*/
|
||||
var Queue = function(){
|
||||
this.list = {};
|
||||
};
|
||||
|
||||
Queue.prototype = {
|
||||
all : function(){
|
||||
return this.list;
|
||||
},
|
||||
set : function(id, item){
|
||||
this.list[id] = item;
|
||||
return this;
|
||||
},
|
||||
get : function(id){
|
||||
if(!this.list[id]){
|
||||
throw 'Unknown ID' + id;
|
||||
}
|
||||
return this.list[id];
|
||||
},
|
||||
remove : function(id) {
|
||||
delete this.list[id];
|
||||
},
|
||||
getLength : function(){
|
||||
var count = 0;
|
||||
for (var k in this.list){
|
||||
if (this.list.hasOwnProperty(k)){
|
||||
++count;
|
||||
}
|
||||
}
|
||||
return count;
|
||||
},
|
||||
isEmpty: function(){
|
||||
return this.getLength() === 0;
|
||||
},
|
||||
clear: function(){
|
||||
var $this = this;
|
||||
$.each(this.list, function(k){
|
||||
$this.remove(k);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
p4.UploaderManager = UploaderManager;
|
||||
|
||||
})(p4, jQuery);
|
||||
Reference in New Issue
Block a user