CODEWITHSUNDEEP
angularjs
Sujithrao
Sujithrao

Reputation: 785

How to upload a angularjs ng-crop resulted cropped image to server?

By using following program am getting the resulted cropped image.I will get the result image in ng-src="{{myCroppedImage}}" this image i need to upload.how can i upload that image to my server by using jsp action.please help me out 

<html>
                <head><script src="js/angular.min.js"></script>
                <script src="js/angular-route.min.js"></script>
                  <script src="js/ng-img-crop.js"></script>
                  <script src="js/init.js"></script>
                  <link rel="stylesheet" type="text/css" href="css/ng-img-crop.css">
                  <style>
                    .cropArea {
                  background: #E4E4E4;
                  overflow: hidden;
                  width:200px;
                  height:200px;
                }
                  </style>
                  <script>
                  angular.module('app', ['ngImgCrop'])
                  .controller('Ctrl', function($scope) {
                    $scope.myImage='';
                    $scope.myCroppedImage='';

                    var handleFileSelect=function(evt) {
                      var file=evt.currentTarget.files[0];
                      var reader = new FileReader();
                      reader.onload = function (evt) {
                        $scope.$apply(function($scope){
                          $scope.myImage=evt.target.result;
                        });
                      };
                      reader.readAsDataURL(file);
                    };            angular.element(document.querySelector('#fileInput')).on('change',handleFileSelect);
    });
    </script>
                </head>
    <form action="upload.jsp" method="post>
                <body ng-app="app" ng-controller="Ctrl">
                  <div>Select an image file: <input type="file" id="fileInput" /></div>
                  <div class="cropArea">
                    <img-crop image="myImage" area-type="rectangle" result-image="myCroppedImage" result-image-size="400"></img-crop>
                  </div>
                  <div>Cropped Image:</div>
                  <div><img ng-src="{{myCroppedImage}}" /></div>
                </body></form>
                </html>

Upvotes: 1

Views: 1839

Answers (1)

falomir
falomir

Reputation: 1169

I know that you might have already figured it out by now, but for future reference for others coming here for an answer, here is a quick sample of how I did it. One thing to take into consideration is that it doesn't work in old browsers without the latest HTML5 support. Anyway, it did the trick for me.

By the way, here are some references that helped me out https://gist.github.com/brianfeister/56a1c6c77cd5928a1c53 and https://uncorkedstudios.com/blog/multipartformdata-file-upload-with-angularjs

// Assuming we have the crop result in myCroppedImage
// Get the mime part of it
var mimeString = $scope.myCroppedImage.split(',')[0].split(':')[1].split(';')[0];
// Get the data part and decode it
var dataString = window.atob($scope.myCroppedImage.split(',')[1]);
var dataArray = [];

for(var i = 0; i < dataString.length; i++)
{
	dataArray.push(dataString.charCodeAt(i));
}

var imageData = new Blob([new Uint8Array(dataArray)], {type: mimeString});
var fd = new FormData();

fd.append('file', imageData);

$http({
  url: 'your/upload/script/url',
  method: 'POST',
  data: fd,
  transformRequest: angular.identity,
  headers: {'Content-Type': undefined}
})
  .success(yourSuccessCallback)
  .error(yourErrorCallback);

Upvotes: 1

Related Questions