current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
stack overflow careers
Sign up ×
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other. Join them; it only takes a minute:
up vote 0 down vote favorite

i am using angularjs file upload angularjs-file-upload to upload file to server side. in the following process, i am checking the image size width and height and html5 file reader and canvas to create different size from the same file. but, i have some problem with onloadend event. 

$scope.onFileSelect = function ($files) {
    file = $files[0];
    $scope.loading = true;
    //$files: an array of files selected, each file has name, size, and type.

    img = new Image();
    img.onload = function () {
        var self = this;
        if (self.width > sizes.width && self.height > sizes.height) {
            var i, len = Images.channel.length;
            for (i = 0; i < len; i++) {
                var size = Images.channel[i];
                var reader = new FileReader();
                reader.readAsDataURL(file);
                reader.onloadend = function () {
                    var tempImg = new Image();
                    tempImg.src = reader.result;
                    tempImg.onload = function () {
                        var canvas = document.createElement('canvas');
                        canvas.width = size.width;
                        canvas.height = size.height;
                        var ctx = canvas.getContext("2d");
                        ctx.drawImage(this, 0, 0, size.width, size.height);
                        var dataURL = canvas.toDataURL("image/jpeg");
                        //extract data from urlString
                        var n = dataURL.indexOf(",");
                        var data = dataURL.toString().substring(n); //we skip the ',' symbol used by navigator to detect canvas text
                        var imageFile = new Blob([data], { type: "plain/text"});
                        $scope.$apply(function () {
                            $uploadWrapper(pinholeAdminServerRoutes.image.upload,
                                imageFile,
                                {   "operationType": size.operationType,
                                    "objectId": $scope.channel.id,
                                    "size": size.label
                                }, function (response) {
                                    $scope.loading = false;
                                }, function (error) {
                                    $scope.loading = false;
                                });
                        });
                    };
                };
            }
        } else {
            $scope.$apply(function () {
                $scope.imageSizeNotValid = true;
                $scope.loading = false;
            });
        }
    };
    img.src = _URL.createObjectURL(file);
};

the final result is that the following code will just upload the final image.

share|improve this question

1 Answer 1

up vote 0 down vote

There seems to be no question and I am not able to understand where you exactly fail but at first glance I see that blob type should be 'image/png'.

In any case here is how I crop and resize images before upload:

uploader.onAfterAddingFile = function(item) {
    var reader = new FileReader();
    reader.onload = function (event) {
        var max_size = 150;
        var tempImg = new Image();
        tempImg.src = reader.result;
        tempImg.onload = function () {
            if(this.width>max_size || this.height>max_size) {
                var canvas = document.createElement('canvas');
                canvas.width = max_size;
                canvas.height = max_size;
                var dimRatio = this.width / this.height;
                var padLeft = 0;
                var padTop = 0;
                if(dimRatio > 1) {
                    cropHeight = this.height;
                    cropWidth  = this.height;
                    padLeft = (this.width - this.height)/2;
                }
                if(dimRatio < 1) {
                    cropHeight = this.width;
                    cropWidth  = this.width;
                    padLeft = (this.height - this.width)/2;
                }

                document.body.appendChild(canvas);
                var ctx = canvas.getContext("2d");
                ctx.drawImage(this, padLeft, padTop, cropWidth, cropHeight, 0, 0, max_size, max_size);

                var dataURL = canvas.toDataURL("image/png", 1);
                //extract data from urlString
                var n = dataURL.indexOf(",");
                var data = dataURL.toString().substring(n+1);

                $scope.$apply(function () {
                    //check extension type
                    var ext = item.file.type.split("/")[1];
                    if (['jpg', 'jpeg', 'gif', 'png', 'pdf'].indexOf(ext) >= 0) {
                        $scope.user.avatar = dataURL;
                        var imgFile = b64toBlob(data,'image/png')
                        item._file = imgFile;
                        item.upload();
                    } else {
                        // invalid type
                    }
                });                    
            }
        };

    };
    reader.readAsDataURL(item._file);
};
share|improve this answer
    
This is a nice answer, but be aware the question is a year old, so this may be of limited relevance. – Claies Feb 28 at 5:36
    
@alpdeniz where do you place this code so angularjs-file-upload could upload the resized image? – afarazit Aug 10 at 14:48
    
@afarazit It is on the current scope after declaring var uploader = $scope.uploader = new FileUploader(); but it goes with any file object. – alpdeniz Sep 21 at 15:07

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.