Upload blob file to Amazon s3

I am using ngCropImage to crop an image and want to load it after this link:

The NgCropImage directive returns the image dataURI to me, and I convert it to blob (after converting it, I get a blob object: which has size and type) converted by DataURI to blob using the following code:

/*html*/
<img-crop image="myImage" result-image="myCroppedImage" result-image-size="250"></img-crop>

$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 < 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 < 8; i++ ) {
    text += possible.charAt(Math.floor(Math.random() * possible.length));
  }
  return text;
}

//for uploading
$scope.handleSave = function(){
  $scope.upload(blob);
}

      

Now, I want to upload this blob to S3 using this one , but I cannot figure out how to upload this blob file to s3 (since I am not getting the "name" in the blob file)

Any help would be really appreciated. Thanks to

+3


source to share


2 answers


You can always create a file from blob. You can also pass the filename.

var file = new File([blob], "filename");

      

This is the same object file that you can use to upload to s3.



Modify the handleSave method as follows. The file name will now be abc.png

//for uploading
$scope.handleSave = function(){
  blob = dataURItoBlob($scope.myCroppedImage)
  $scope.upload(new File([blob], "abc.png"));
}

      

+3


source


It is not recommended to place the key

secretAccessKey: $ .trim ($ scope.creds.secret_key)



on the client side ... It's not done !, anyone can manipulate your bucket as they see fit.

0


source







All Articles