Skip to content

Commit

Permalink
Merge tag 'v3.1.0'
Browse files Browse the repository at this point in the history 
Added dimensions to file object, a totaluploadprogress event and the possibility to define the resize function.
  • Loading branch information
@enyo
enyo committed May 18, 2013
2 parents 361e875 + a15d783 commit 02c2aa4
Show file tree
Hide file tree
Showing 13 changed files with 388 additions and 153 deletions.
2 changes: 1 addition & 1 deletion component.json
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "dropzone",
"repo": "enyo/dropzone",
"version": "3.0.1",
"version": "3.1.0",
"description": "Handles drag and drop of files for you.",
"scripts": [ "index.js", "lib/dropzone.js" ],
"styles": [ "downloads/css/basic.css" ],
Expand Down
5 changes: 0 additions & 5 deletions downloads/css/dropzone.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -215,11 +215,6 @@
box-shadow: 1px 1px 4px rgba(0,0,0,0.16);
font-size: 14px;
}
.dropzone .dz-preview .dz-details img,
.dropzone-previews .dz-preview .dz-details img {
width: 100px;
height: 100px;
}
.dropzone .dz-preview.dz-image-preview:hover .dz-details img,
.dropzone-previews .dz-preview.dz-image-preview:hover .dz-details img {
display: block;
Expand Down
3 changes: 0 additions & 3 deletions downloads/css/stylus/dropzone.styl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,9 +80,6 @@


.dz-details
img
width 100px
height 100px

// Not implemented yet. This is the CSS definition of the file
// content as text.
Expand Down
102 changes: 69 additions & 33 deletions downloads/dropzone-amd-module.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -263,6 +263,33 @@ Emitter.prototype.hasListeners = function(event){
}
return this.element.appendChild(this.getFallbackForm());
},
resize: function(file) {
var info, srcRatio, trgRatio;

info = {
srcX: 0,
srcY: 0,
srcWidth: file.width,
srcHeight: file.height
};
srcRatio = file.width / file.height;
trgRatio = this.options.thumbnailWidth / this.options.thumbnailHeight;
if (file.height < this.options.thumbnailHeight || file.width < this.options.thumbnailWidth) {
info.trgHeight = info.srcHeight;
info.trgWidth = info.srcWidth;
} else {
if (srcRatio > trgRatio) {
info.srcHeight = file.height;
info.srcWidth = info.srcHeight * trgRatio;
} else {
info.srcWidth = file.width;
info.srcHeight = info.srcWidth / trgRatio;
}
}
info.srcX = (file.width - info.srcWidth) / 2;
info.srcY = (file.height - info.srcHeight) / 2;
return info;
},
/*
Those functions register themselves to the events on init and handle all
the user interface specific stuff. Overwriting them won't break the upload
Expand Down Expand Up @@ -461,6 +488,20 @@ Emitter.prototype.hasListeners = function(event){
eventName = _ref1[_i];
this.on(eventName, this.options[eventName]);
}
this.on("uploadprogress", function(file) {
var totalBytes, totalBytesSent, totalUploadProgress, _j, _len1, _ref2;

totalBytesSent = 0;
totalBytes = 0;
_ref2 = _this.files;
for (_j = 0, _len1 = _ref2.length; _j < _len1; _j++) {
file = _ref2[_j];
totalBytesSent += file.upload.bytesSent;
totalBytes += file.upload.total;
}
totalUploadProgress = 100 * totalBytesSent / totalBytes;
return _this.emit("totaluploadprogress", totalUploadProgress, totalBytes, totalBytesSent);
});
noPropagation = function(e) {
e.stopPropagation();
if (e.preventDefault) {
Expand Down Expand Up @@ -677,6 +718,11 @@ Emitter.prototype.hasListeners = function(event){
Dropzone.prototype.addFile = function(file) {
var _this = this;

file.upload = {
progress: 0,
total: file.size,
bytesSent: 0
};
this.files.push(file);
this.emit("addedfile", file);
if (this.options.createImageThumbnails && file.type.match(/image.*/) && file.size <= this.options.maxThumbnailFilesize * 1024 * 1024) {
Expand Down Expand Up @@ -729,39 +775,22 @@ Emitter.prototype.hasListeners = function(event){

img = new Image;
img.onload = function() {
var canvas, ctx, srcHeight, srcRatio, srcWidth, srcX, srcY, thumbnail, trgHeight, trgRatio, trgWidth, trgX, trgY;
var canvas, ctx, resizeInfo, thumbnail, _ref, _ref1, _ref2, _ref3, _ref4, _ref5;

file.width = img.width;
file.height = img.height;
resizeInfo = _this.options.resize.call(_this, file);
if ((_ref = resizeInfo.trgWidth) == null) {
resizeInfo.trgWidth = _this.options.thumbnailWidth;
}
if ((_ref1 = resizeInfo.trgHeight) == null) {
resizeInfo.trgHeight = _this.options.thumbnailHeight;
}
canvas = document.createElement("canvas");
ctx = canvas.getContext("2d");
srcX = 0;
srcY = 0;
srcWidth = img.width;
srcHeight = img.height;
canvas.width = _this.options.thumbnailWidth;
canvas.height = _this.options.thumbnailHeight;
trgX = 0;
trgY = 0;
trgWidth = canvas.width;
trgHeight = canvas.height;
srcRatio = img.width / img.height;
trgRatio = canvas.width / canvas.height;
if (img.height < canvas.height || img.width < canvas.width) {
trgHeight = srcHeight;
trgWidth = srcWidth;
} else {
if (srcRatio > trgRatio) {
srcHeight = img.height;
srcWidth = srcHeight * trgRatio;
} else {
srcWidth = img.width;
srcHeight = srcWidth / trgRatio;
}
}
srcX = (img.width - srcWidth) / 2;
srcY = (img.height - srcHeight) / 2;
trgY = (canvas.height - trgHeight) / 2;
trgX = (canvas.width - trgWidth) / 2;
ctx.drawImage(img, srcX, srcY, srcWidth, srcHeight, trgX, trgY, trgWidth, trgHeight);
canvas.width = resizeInfo.trgWidth;
canvas.height = resizeInfo.trgHeight;
ctx.drawImage(img, (_ref2 = resizeInfo.srcX) != null ? _ref2 : 0, (_ref3 = resizeInfo.srcY) != null ? _ref3 : 0, resizeInfo.srcWidth, resizeInfo.srcHeight, (_ref4 = resizeInfo.trgX) != null ? _ref4 : 0, (_ref5 = resizeInfo.trgY) != null ? _ref5 : 0, resizeInfo.trgWidth, resizeInfo.trgHeight);
thumbnail = canvas.toDataURL("image/png");
return _this.emit("thumbnail", file, thumbnail);
};
Expand Down Expand Up @@ -817,7 +846,6 @@ Emitter.prototype.hasListeners = function(event){
if (!((200 <= (_ref = xhr.status) && _ref < 300))) {
return handleError();
} else {
_this.emit("uploadprogress", file, 100, file.size);
return _this.finished(file, response, e);
}
};
Expand All @@ -826,7 +854,15 @@ Emitter.prototype.hasListeners = function(event){
};
progressObj = (_ref = xhr.upload) != null ? _ref : xhr;
progressObj.onprogress = function(e) {
return _this.emit("uploadprogress", file, Math.max(0, Math.min(100, 100 * e.loaded / e.total)), e.loaded);
var progress;

file.upload = {
progress: progress,
total: e.total,
bytesSent: e.loaded
};
progress = 100 * e.loaded / e.total;
return _this.emit("uploadprogress", file, progress, e.loaded);
};
xhr.setRequestHeader("Accept", "application/json");
xhr.setRequestHeader("Cache-Control", "no-cache");
Expand Down Expand Up @@ -877,7 +913,7 @@ Emitter.prototype.hasListeners = function(event){

})(Em);

Dropzone.version = "3.0.1";
Dropzone.version = "3.1.0";

Dropzone.options = {};

Expand Down
2 changes: 1 addition & 1 deletion downloads/dropzone-amd-module.min.js
View file

Large diffs are not rendered by default.

102 changes: 69 additions & 33 deletions downloads/dropzone.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -472,6 +472,33 @@ require.register("dropzone/lib/dropzone.js", function(exports, require, module){
}
return this.element.appendChild(this.getFallbackForm());
},
resize: function(file) {
var info, srcRatio, trgRatio;

info = {
srcX: 0,
srcY: 0,
srcWidth: file.width,
srcHeight: file.height
};
srcRatio = file.width / file.height;
trgRatio = this.options.thumbnailWidth / this.options.thumbnailHeight;
if (file.height < this.options.thumbnailHeight || file.width < this.options.thumbnailWidth) {
info.trgHeight = info.srcHeight;
info.trgWidth = info.srcWidth;
} else {
if (srcRatio > trgRatio) {
info.srcHeight = file.height;
info.srcWidth = info.srcHeight * trgRatio;
} else {
info.srcWidth = file.width;
info.srcHeight = info.srcWidth / trgRatio;
}
}
info.srcX = (file.width - info.srcWidth) / 2;
info.srcY = (file.height - info.srcHeight) / 2;
return info;
},
/*
Those functions register themselves to the events on init and handle all
the user interface specific stuff. Overwriting them won't break the upload
Expand Down Expand Up @@ -670,6 +697,20 @@ require.register("dropzone/lib/dropzone.js", function(exports, require, module){
eventName = _ref1[_i];
this.on(eventName, this.options[eventName]);
}
this.on("uploadprogress", function(file) {
var totalBytes, totalBytesSent, totalUploadProgress, _j, _len1, _ref2;

totalBytesSent = 0;
totalBytes = 0;
_ref2 = _this.files;
for (_j = 0, _len1 = _ref2.length; _j < _len1; _j++) {
file = _ref2[_j];
totalBytesSent += file.upload.bytesSent;
totalBytes += file.upload.total;
}
totalUploadProgress = 100 * totalBytesSent / totalBytes;
return _this.emit("totaluploadprogress", totalUploadProgress, totalBytes, totalBytesSent);
});
noPropagation = function(e) {
e.stopPropagation();
if (e.preventDefault) {
Expand Down Expand Up @@ -886,6 +927,11 @@ require.register("dropzone/lib/dropzone.js", function(exports, require, module){
Dropzone.prototype.addFile = function(file) {
var _this = this;

file.upload = {
progress: 0,
total: file.size,
bytesSent: 0
};
this.files.push(file);
this.emit("addedfile", file);
if (this.options.createImageThumbnails && file.type.match(/image.*/) && file.size <= this.options.maxThumbnailFilesize * 1024 * 1024) {
Expand Down Expand Up @@ -938,39 +984,22 @@ require.register("dropzone/lib/dropzone.js", function(exports, require, module){

img = new Image;
img.onload = function() {
var canvas, ctx, srcHeight, srcRatio, srcWidth, srcX, srcY, thumbnail, trgHeight, trgRatio, trgWidth, trgX, trgY;
var canvas, ctx, resizeInfo, thumbnail, _ref, _ref1, _ref2, _ref3, _ref4, _ref5;

file.width = img.width;
file.height = img.height;
resizeInfo = _this.options.resize.call(_this, file);
if ((_ref = resizeInfo.trgWidth) == null) {
resizeInfo.trgWidth = _this.options.thumbnailWidth;
}
if ((_ref1 = resizeInfo.trgHeight) == null) {
resizeInfo.trgHeight = _this.options.thumbnailHeight;
}
canvas = document.createElement("canvas");
ctx = canvas.getContext("2d");
srcX = 0;
srcY = 0;
srcWidth = img.width;
srcHeight = img.height;
canvas.width = _this.options.thumbnailWidth;
canvas.height = _this.options.thumbnailHeight;
trgX = 0;
trgY = 0;
trgWidth = canvas.width;
trgHeight = canvas.height;
srcRatio = img.width / img.height;
trgRatio = canvas.width / canvas.height;
if (img.height < canvas.height || img.width < canvas.width) {
trgHeight = srcHeight;
trgWidth = srcWidth;
} else {
if (srcRatio > trgRatio) {
srcHeight = img.height;
srcWidth = srcHeight * trgRatio;
} else {
srcWidth = img.width;
srcHeight = srcWidth / trgRatio;
}
}
srcX = (img.width - srcWidth) / 2;
srcY = (img.height - srcHeight) / 2;
trgY = (canvas.height - trgHeight) / 2;
trgX = (canvas.width - trgWidth) / 2;
ctx.drawImage(img, srcX, srcY, srcWidth, srcHeight, trgX, trgY, trgWidth, trgHeight);
canvas.width = resizeInfo.trgWidth;
canvas.height = resizeInfo.trgHeight;
ctx.drawImage(img, (_ref2 = resizeInfo.srcX) != null ? _ref2 : 0, (_ref3 = resizeInfo.srcY) != null ? _ref3 : 0, resizeInfo.srcWidth, resizeInfo.srcHeight, (_ref4 = resizeInfo.trgX) != null ? _ref4 : 0, (_ref5 = resizeInfo.trgY) != null ? _ref5 : 0, resizeInfo.trgWidth, resizeInfo.trgHeight);
thumbnail = canvas.toDataURL("image/png");
return _this.emit("thumbnail", file, thumbnail);
};
Expand Down Expand Up @@ -1026,7 +1055,6 @@ require.register("dropzone/lib/dropzone.js", function(exports, require, module){
if (!((200 <= (_ref = xhr.status) && _ref < 300))) {
return handleError();
} else {
_this.emit("uploadprogress", file, 100, file.size);
return _this.finished(file, response, e);
}
};
Expand All @@ -1035,7 +1063,15 @@ require.register("dropzone/lib/dropzone.js", function(exports, require, module){
};
progressObj = (_ref = xhr.upload) != null ? _ref : xhr;
progressObj.onprogress = function(e) {
return _this.emit("uploadprogress", file, Math.max(0, Math.min(100, 100 * e.loaded / e.total)), e.loaded);
var progress;

file.upload = {
progress: progress,
total: e.total,
bytesSent: e.loaded
};
progress = 100 * e.loaded / e.total;
return _this.emit("uploadprogress", file, progress, e.loaded);
};
xhr.setRequestHeader("Accept", "application/json");
xhr.setRequestHeader("Cache-Control", "no-cache");
Expand Down Expand Up @@ -1086,7 +1122,7 @@ require.register("dropzone/lib/dropzone.js", function(exports, require, module){

})(Em);

Dropzone.version = "3.0.1";
Dropzone.version = "3.1.0";

Dropzone.options = {};

Expand Down
2 changes: 1 addition & 1 deletion downloads/dropzone.min.js
View file

Large diffs are not rendered by default.

Loading

0 comments on commit 02c2aa4

Please sign in to comment.