title: Uploading blob file to Amazon s3
body: <p>I am using ngCropImage to crop an image and want to upload it following <a href="http://www.cheynewallace.com/uploading-to-s3-with-angularjs/" rel="noreferrer">this</a> link: </p>
  
  <p>NgCropImage directive is returning me dataURI of the image and I am converting it to a blob (after converting it I get a blob object: which has size and type), Converted DataURI to blob using following code:</p>
  
  <pre><code>/*html*/
  &lt;img-crop image="myImage" result-image="myCroppedImage" result-image-size="250"&gt;&lt;/img-crop&gt;
  
  $scope.myImage='';
  $scope.myCroppedImage = {image: ''}
  var blob;
  
  //called when user crops 
  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;
      });
    };
    console.log($scope.myCroppedImage)
    reader.readAsDataURL(file);
    var link = document.createElement('link');
  
    blob = dataURItoBlob($scope.myCroppedImage)
    console.log(blob)
  };
  
  angular.element(document.querySelector('#fileInput')).on('change',handleFileSelect);
  
  
  function dataURItoBlob(dataURI) {
    // convert base64/URLEncoded data component to raw binary data held in a string
    var binary = atob(dataURI.split(',')[1]);
    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
  
    var array = [];
    for(var i = 0; i &lt; binary.length; i++) {
      array.push(binary.charCodeAt(i));
    }
    return new Blob([new Uint8Array(array)], {type: mimeString});
  }
  
  $scope.upload = function(file) {
    //var file = new File(file, "filename");
    // Configure The S3 Object 
    console.log($scope.creds)
    AWS.config.update({ accessKeyId: $.trim($scope.creds.access_key), secretAccessKey: $.trim($scope.creds.secret_key) });
    AWS.config.region = 'us-east-1';
    var bucket = new AWS.S3({ params: { Bucket: $.trim($scope.creds.bucket) } });
  
    if(file) {
      //file.name = 'abc';
      var uniqueFileName = $scope.uniqueString() + '-' + file.name;
      var params = { Key: file.name , ContentType: file.type, Body: file, ServerSideEncryption: 'AES256' };
  
      bucket.putObject(params, function(err, data) {
        if(err) {
          // There Was An Error With Your S3 Config
          alert(err.message);
          return false;
        }
        else {
          // Success!
          alert('Upload Done');
        }
      })
      .on('httpUploadProgress',function(progress) {
            // Log Progress Information
            console.log(Math.round(progress.loaded / progress.total * 100) + '% done');
          });
    }
    else {
      // No File Selected
      alert('No File Selected');
    }
  } 
  
  $scope.uniqueString = function() {
    var text     = "";
    var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
  
    for( var i=0; i &lt; 8; i++ ) {
      text += possible.charAt(Math.floor(Math.random() * possible.length));
    }
    return text;
  }
  
  //for uploading
  $scope.handleSave = function(){
    $scope.upload(blob);
  }
  </code></pre>
  
  <p>Now, I want to upload this blob on S3 using <a href="http://www.cheynewallace.com/uploading-to-s3-with-angularjs/" rel="noreferrer">this</a>, but I am not able to figure out how to upload this blob file to s3 (as I am not getting 'name' in the blob file)</p>
  
  <p>Any help would be really appreciated. Thanks</p>