From 26800f894a31bcb64a69a179d6428e4d546fe541 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ege=20Sert=C3=A7etin?= Date: Fri, 20 Jun 2014 12:29:20 +0300 Subject: [PATCH 01/10] Fixed multiple images base64 error If multiple images are selected, all of them had the same base64 URL and it was the last selected image's URL. Fixed this by adding them to queue. --- public/javascripts/imageupload.js | 84 ++++++++++++++++++------------- 1 file changed, 50 insertions(+), 34 deletions(-) diff --git a/public/javascripts/imageupload.js b/public/javascripts/imageupload.js index c3c1453..20a5592 100644 --- a/public/javascripts/imageupload.js +++ b/public/javascripts/imageupload.js @@ -30,17 +30,13 @@ angular.module('imageupload', []) var height = origImage.height; var width = origImage.width; - // calculate the width and height, constraining the proportions - if (width > height) { - if (width > maxWidth) { - height = Math.round(height *= maxWidth / width); - width = maxWidth; - } + // calculate the width and height, constraining the proportions *** Edited by Ege + if(height / width < maxHeight / maxWidth) { + width = width * (maxHeight / height); + height = maxHeight; } else { - if (height > maxHeight) { - width = Math.round(width *= maxHeight / height); - height = maxHeight; - } + height = height * (maxWidth / width); + width = maxWidth; } canvas.width = width; @@ -66,7 +62,10 @@ angular.module('imageupload', []) var deferred = $q.defer(); var reader = new FileReader(); reader.onload = function (e) { - deferred.resolve(e.target.result); + deferred.resolve({ + data: e.target.result, + file: file + }); }; reader.readAsDataURL(file); return deferred.promise; @@ -95,14 +94,17 @@ angular.module('imageupload', []) }); }; - var applyScope = function(imageResult) { - scope.$apply(function() { - //console.log(imageResult); - if(attrs.multiple) - scope.image.push(imageResult); - else - scope.image = imageResult; - }); + var applyScope = function(imageResults) { + if(attrs.multiple) { + for(var i in imageResults) { + scope.image.push(imageResults[i]); + } + } + else { + scope.$apply(function() { + scope.image = imageResults[0]; + }); + } }; @@ -112,25 +114,39 @@ angular.module('imageupload', []) scope.image = []; var files = evt.target.files; + + var imageResults = []; + + var addToImageResults = function(imageResult) { + imageResults.push(imageResult); + if(imageResults.length === files.length) { + applyScope(imageResults); + imageResults = []; + } + } + + for(var i = 0; i < files.length; i++) { //create a result object for each file in files - var imageResult = { - file: files[i], - url: URL.createObjectURL(files[i]) - }; - fileToDataURL(files[i]).then(function (dataURL) { - imageResult.dataURL = dataURL; + fileToDataURL(files[i]).then(function (object) { + var file = object.file; + var dataURL = object.data; + var imageResult = { + file: file, + url: URL.createObjectURL(file), + dataURL: dataURL + }; + + if(scope.resizeMaxHeight || scope.resizeMaxWidth) { //resize image + doResizing(imageResult, function(imageResult) { + addToImageResults(imageResult); + }); + } + else { //no resizing + addToImageResults(imageResult); + } }); - - if(scope.resizeMaxHeight || scope.resizeMaxWidth) { //resize image - doResizing(imageResult, function(imageResult) { - applyScope(imageResult); - }); - } - else { //no resizing - applyScope(imageResult); - } } }); } From e6da5d8c563453f7e5bb3b4648720db21ae93f7d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ege=20Sert=C3=A7etin?= Date: Tue, 20 Oct 2015 17:10:22 +0300 Subject: [PATCH 02/10] Updated dependencies --- bower.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/bower.json b/bower.json index ab65be3..737cfe5 100644 --- a/bower.json +++ b/bower.json @@ -10,6 +10,6 @@ "package.json" ], "dependencies": { - "angularjs-unstable": "~1.1.4" + "angular": "~1.4" } } From ba34111f17d758f591fc1e77f92641dced59e38d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ege=20Sert=C3=A7etin?= Date: Tue, 20 Oct 2015 17:18:34 +0300 Subject: [PATCH 03/10] Fixed digest error --- public/javascripts/imageupload.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/public/javascripts/imageupload.js b/public/javascripts/imageupload.js index 20a5592..da882ea 100644 --- a/public/javascripts/imageupload.js +++ b/public/javascripts/imageupload.js @@ -101,9 +101,7 @@ angular.module('imageupload', []) } } else { - scope.$apply(function() { - scope.image = imageResults[0]; - }); + scope.image = imageResults[0]; } }; From 142f1fb9c0ff42a24817210e95504ed9f80552db Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ege=20Sert=C3=A7etin?= Date: Mon, 7 Dec 2015 19:23:46 +0200 Subject: [PATCH 04/10] Made declaration pretty, and uglify friendly --- public/javascripts/imageupload.js | 256 +++++++++++++++--------------- 1 file changed, 131 insertions(+), 125 deletions(-) diff --git a/public/javascripts/imageupload.js b/public/javascripts/imageupload.js index da882ea..c986f56 100644 --- a/public/javascripts/imageupload.js +++ b/public/javascripts/imageupload.js @@ -1,152 +1,158 @@ -angular.module('imageupload', []) - .directive('image', function($q) { - 'use strict' - - var URL = window.URL || window.webkitURL; +function AngularjsImageUploadDirective($q) { + 'use strict' - var getResizeArea = function () { - var resizeAreaId = 'fileupload-resize-area'; + var URL = window.URL || window.webkitURL; - var resizeArea = document.getElementById(resizeAreaId); + var getResizeArea = function () { + var resizeAreaId = 'fileupload-resize-area'; - if (!resizeArea) { - resizeArea = document.createElement('canvas'); - resizeArea.id = resizeAreaId; - resizeArea.style.visibility = 'hidden'; - document.body.appendChild(resizeArea); - } + var resizeArea = document.getElementById(resizeAreaId); - return resizeArea; + if (!resizeArea) { + resizeArea = document.createElement('canvas'); + resizeArea.id = resizeAreaId; + resizeArea.style.visibility = 'hidden'; + document.body.appendChild(resizeArea); } - var resizeImage = function (origImage, options) { - var maxHeight = options.resizeMaxHeight || 300; - var maxWidth = options.resizeMaxWidth || 250; - var quality = options.resizeQuality || 0.7; - var type = options.resizeType || 'image/jpg'; + return resizeArea; + } - var canvas = getResizeArea(); + var resizeImage = function (origImage, options) { + var maxHeight = options.resizeMaxHeight || 300; + var maxWidth = options.resizeMaxWidth || 250; + var quality = options.resizeQuality || 0.7; + var type = options.resizeType || 'image/jpg'; - var height = origImage.height; - var width = origImage.width; + var canvas = getResizeArea(); - // calculate the width and height, constraining the proportions *** Edited by Ege - if(height / width < maxHeight / maxWidth) { - width = width * (maxHeight / height); - height = maxHeight; - } else { - height = height * (maxWidth / width); - width = maxWidth; - } + var height = origImage.height; + var width = origImage.width; - canvas.width = width; - canvas.height = height; + // calculate the width and height, constraining the proportions *** Edited by Ege + if(height / width < maxHeight / maxWidth) { + width = width * (maxHeight / height); + height = maxHeight; + } else { + height = height * (maxWidth / width); + width = maxWidth; + } - //draw image on canvas - var ctx = canvas.getContext("2d"); - ctx.drawImage(origImage, 0, 0, width, height); + canvas.width = width; + canvas.height = height; - // get the data from canvas as 70% jpg (or specified type). - return canvas.toDataURL(type, quality); - }; + //draw image on canvas + var ctx = canvas.getContext("2d"); + ctx.drawImage(origImage, 0, 0, width, height); - var createImage = function(url, callback) { - var image = new Image(); - image.onload = function() { - callback(image); - }; - image.src = url; - }; + // get the data from canvas as 70% jpg (or specified type). + return canvas.toDataURL(type, quality); + }; - var fileToDataURL = function (file) { - var deferred = $q.defer(); - var reader = new FileReader(); - reader.onload = function (e) { - deferred.resolve({ - data: e.target.result, - file: file + var createImage = function(url, callback) { + var image = new Image(); + image.onload = function() { + callback(image); + }; + image.src = url; + }; + + var fileToDataURL = function (file) { + var deferred = $q.defer(); + var reader = new FileReader(); + reader.onload = function (e) { + deferred.resolve({ + data: e.target.result, + file: file + }); + }; + reader.readAsDataURL(file); + return deferred.promise; + }; + + + return { + restrict: 'A', + scope: { + image: '=', + resizeMaxHeight: '@?', + resizeMaxWidth: '@?', + resizeQuality: '@?', + resizeType: '@?', + }, + link: function postLink(scope, element, attrs, ctrl) { + + var doResizing = function(imageResult, callback) { + createImage(imageResult.url, function(image) { + var dataURL = resizeImage(image, scope); + imageResult.resized = { + dataURL: dataURL, + type: dataURL.match(/:(.+\/.+);/)[1], + }; + callback(imageResult); }); }; - reader.readAsDataURL(file); - return deferred.promise; - }; - - return { - restrict: 'A', - scope: { - image: '=', - resizeMaxHeight: '@?', - resizeMaxWidth: '@?', - resizeQuality: '@?', - resizeType: '@?', - }, - link: function postLink(scope, element, attrs, ctrl) { - - var doResizing = function(imageResult, callback) { - createImage(imageResult.url, function(image) { - var dataURL = resizeImage(image, scope); - imageResult.resized = { - dataURL: dataURL, - type: dataURL.match(/:(.+\/.+);/)[1], - }; - callback(imageResult); - }); - }; - - var applyScope = function(imageResults) { - if(attrs.multiple) { - for(var i in imageResults) { - scope.image.push(imageResults[i]); - } - } - else { - scope.image = imageResults[0]; + var applyScope = function(imageResults) { + if(attrs.multiple) { + for(var i in imageResults) { + scope.image.push(imageResults[i]); } - }; + } + else { + scope.image = imageResults[0]; + } + }; - element.bind('change', function (evt) { - //when multiple always return an array of images - if(attrs.multiple) - scope.image = []; + element.bind('change', function (evt) { + //when multiple always return an array of images + if(attrs.multiple) + scope.image = []; - var files = evt.target.files; + var files = evt.target.files; - var imageResults = []; + var imageResults = []; - var addToImageResults = function(imageResult) { - imageResults.push(imageResult); - if(imageResults.length === files.length) { - applyScope(imageResults); - imageResults = []; - } + var addToImageResults = function(imageResult) { + imageResults.push(imageResult); + if(imageResults.length === files.length) { + applyScope(imageResults); + imageResults = []; } + } + + + for(var i = 0; i < files.length; i++) { + //create a result object for each file in files + fileToDataURL(files[i]).then(function (object) { + var file = object.file; + var dataURL = object.data; + var imageResult = { + file: file, + url: URL.createObjectURL(file), + dataURL: dataURL + }; - for(var i = 0; i < files.length; i++) { - //create a result object for each file in files - - fileToDataURL(files[i]).then(function (object) { - var file = object.file; - var dataURL = object.data; - var imageResult = { - file: file, - url: URL.createObjectURL(file), - dataURL: dataURL - }; - - if(scope.resizeMaxHeight || scope.resizeMaxWidth) { //resize image - doResizing(imageResult, function(imageResult) { - addToImageResults(imageResult); - }); - } - else { //no resizing + if(scope.resizeMaxHeight || scope.resizeMaxWidth) { //resize image + doResizing(imageResult, function(imageResult) { addToImageResults(imageResult); - } - }); - } - }); - } - }; - }); + }); + } + else { //no resizing + addToImageResults(imageResult); + } + }); + } + }); + } + }; +} + +AngularjsImageUploadDirective.$inject = [ + '$q' +]; + +angular.module('imageupload', []) + .directive('image', AngularjsImageUploadDirective); From 33cbcd2aac39dbc3ce8a3c02c557a038e0b5a902 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ege=20Sert=C3=A7etin?= Date: Mon, 7 Dec 2015 19:25:54 +0200 Subject: [PATCH 05/10] Fixed simple JS errors --- public/javascripts/imageupload.js | 44 ++++++++++++++++--------------- 1 file changed, 23 insertions(+), 21 deletions(-) diff --git a/public/javascripts/imageupload.js b/public/javascripts/imageupload.js index c986f56..7e741df 100644 --- a/public/javascripts/imageupload.js +++ b/public/javascripts/imageupload.js @@ -1,5 +1,5 @@ function AngularjsImageUploadDirective($q) { - 'use strict' + 'use strict'; var URL = window.URL || window.webkitURL; @@ -16,7 +16,7 @@ function AngularjsImageUploadDirective($q) { } return resizeArea; - } + }; var resizeImage = function (origImage, options) { var maxHeight = options.resizeMaxHeight || 300; @@ -104,6 +104,25 @@ function AngularjsImageUploadDirective($q) { } }; + var createResultObject = function (object) { + var file = object.file; + var dataURL = object.data; + var imageResult = { + file: file, + url: URL.createObjectURL(file), + dataURL: dataURL + }; + + if(scope.resizeMaxHeight || scope.resizeMaxWidth) { //resize image + doResizing(imageResult, function(imageResult) { + addToImageResults(imageResult); + }); + } + else { //no resizing + addToImageResults(imageResult); + } + }; + element.bind('change', function (evt) { //when multiple always return an array of images @@ -120,30 +139,13 @@ function AngularjsImageUploadDirective($q) { applyScope(imageResults); imageResults = []; } - } + }; for(var i = 0; i < files.length; i++) { //create a result object for each file in files - fileToDataURL(files[i]).then(function (object) { - var file = object.file; - var dataURL = object.data; - var imageResult = { - file: file, - url: URL.createObjectURL(file), - dataURL: dataURL - }; - - if(scope.resizeMaxHeight || scope.resizeMaxWidth) { //resize image - doResizing(imageResult, function(imageResult) { - addToImageResults(imageResult); - }); - } - else { //no resizing - addToImageResults(imageResult); - } - }); + fileToDataURL(files[i]).then(createResultObject); } }); } From 99d796d02e45b56ff15b459ddb2f5900d5c7f6c2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ege=20Sert=C3=A7etin?= Date: Mon, 7 Dec 2015 19:27:15 +0200 Subject: [PATCH 06/10] Version --- bower.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/bower.json b/bower.json index 737cfe5..4c4e8fd 100644 --- a/bower.json +++ b/bower.json @@ -1,7 +1,7 @@ { "name": "angularjs-imageupload-directive", "description": "imageupload Directive for AngularJS", - "version": "0.0.0", + "version": "v1.1.0", "main": "public/javascripts/imageupload.js", "ignore": [ "**/.*", From 0989256276dc26142d330094ccf4828016dd9fac Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ege=20Sert=C3=A7etin?= Date: Tue, 8 Dec 2015 09:32:02 +0200 Subject: [PATCH 07/10] Made function and variable definitions, uglify friendly. --- public/javascripts/imageupload.js | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/public/javascripts/imageupload.js b/public/javascripts/imageupload.js index 7e741df..c80a30a 100644 --- a/public/javascripts/imageupload.js +++ b/public/javascripts/imageupload.js @@ -123,25 +123,25 @@ function AngularjsImageUploadDirective($q) { } }; + var addToImageResults = function(imageResult) { + imageResults.push(imageResult); + if(imageResults.length === files.length) { + applyScope(imageResults); + imageResults = []; + } + }; + + var files; element.bind('change', function (evt) { //when multiple always return an array of images if(attrs.multiple) scope.image = []; - var files = evt.target.files; + files = evt.target.files; var imageResults = []; - var addToImageResults = function(imageResult) { - imageResults.push(imageResult); - if(imageResults.length === files.length) { - applyScope(imageResults); - imageResults = []; - } - }; - - for(var i = 0; i < files.length; i++) { //create a result object for each file in files From ded3012b896766750f9429e052192d1e95155751 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ege=20Sert=C3=A7etin?= Date: Tue, 8 Dec 2015 09:32:25 +0200 Subject: [PATCH 08/10] Uglify fix --- bower.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/bower.json b/bower.json index 4c4e8fd..d4950b3 100644 --- a/bower.json +++ b/bower.json @@ -1,7 +1,7 @@ { "name": "angularjs-imageupload-directive", "description": "imageupload Directive for AngularJS", - "version": "v1.1.0", + "version": "1.2.0", "main": "public/javascripts/imageupload.js", "ignore": [ "**/.*", From 51c918303b45290fc415a7e99f6202dbfdef7b32 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ege=20Sert=C3=A7etin?= Date: Tue, 8 Dec 2015 10:02:20 +0200 Subject: [PATCH 09/10] Uglify fix --- public/javascripts/imageupload.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/public/javascripts/imageupload.js b/public/javascripts/imageupload.js index c80a30a..ec68867 100644 --- a/public/javascripts/imageupload.js +++ b/public/javascripts/imageupload.js @@ -82,6 +82,9 @@ function AngularjsImageUploadDirective($q) { }, link: function postLink(scope, element, attrs, ctrl) { + var files, + imageResults = []; + var doResizing = function(imageResult, callback) { createImage(imageResult.url, function(image) { var dataURL = resizeImage(image, scope); @@ -131,8 +134,6 @@ function AngularjsImageUploadDirective($q) { } }; - var files; - element.bind('change', function (evt) { //when multiple always return an array of images if(attrs.multiple) From 2ce7ea3b320f313f8301fbe5d3b1ae41c99def54 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ege=20Sert=C3=A7etin?= Date: Tue, 8 Dec 2015 10:02:30 +0200 Subject: [PATCH 10/10] Uglify fix --- bower.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/bower.json b/bower.json index d4950b3..29479b0 100644 --- a/bower.json +++ b/bower.json @@ -1,7 +1,7 @@ { "name": "angularjs-imageupload-directive", "description": "imageupload Directive for AngularJS", - "version": "1.2.0", + "version": "1.2.1", "main": "public/javascripts/imageupload.js", "ignore": [ "**/.*",