Angularjs upload file and file reader to resize image?

Question

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.

Answer 1

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);
};