Image is not getting uploaded to s3, it did but file is not opening


#1
$scope.getPictures = function(){
		var options = { quality : 50,
			  destinationType : Camera.DestinationType.DATA_URL,
			  sourceType : Camera.PictureSourceType.PHOTOLIBRARY,
			  allowEdit : true,
			  encodingType: Camera.EncodingType.JPEG,
			  targetWidth: 100,
			  targetHeight: 100,
			  popoverOptions: CameraPopoverOptions,
			  saveToPhotoAlbum: false };

		navigator.camera.getPicture(onSuccess, onFail, options);

		function onSuccess(imageURI) {
		    $scope.data.file = "data:image/jpeg;base64," + imageURI;
		    $scope.upload();
		}

		function onFail(message) {

		}

	}

	$scope.creds = {
		  bucket: 'taXXXXa',
		  access_key: 'AXXXXXXXXXXXXXXA',
		  secret_key: 'BJXXXXXXXXXXXXXXXXXXXXXXXXXXAD'
	}
		 
	$scope.upload = function() {
	  // Configure The S3 Object 
	  AWS.config.update({ accessKeyId: $scope.creds.access_key, secretAccessKey: $scope.creds.secret_key });
	  AWS.config.region = 'us-east-1';
	  var bucket = new AWS.S3({ params: { Bucket: $scope.creds.bucket } });
	 
	  if($scope.data.file) {
	    var params = { 
	    	Key: $scope.data.userguid + '.jpg', 
	    	ContentType: $scope.data.filetype, 
	    	Body: $scope.data.file,
	    	ACL: "public-read",
	    	ContentEncoding: 'base64',
	    };
	 
	    bucket.putObject(params, function(err, data) {
	      if(err) {
	        // There Was An Error With Your S3 Config
	        console.log(err);
	        return false;
	      }
	      else {
	        // Success!
	        $scope.data.profileImg = $scope.data.file;
	        window.localStorage.profileImg = $scope.data.profileImg;
	        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');
	  }
	}

and I get “Upload Done”, and I see the file in S3 Management Console (link below)

https://s3.amazonaws.com/talkipia/214867dc-3898-4e09-dfed-8c442dcda098_profileImg.jpg

but the image is somehow not the format that can’t be read? its not opening…

I don’t know what I am missing.
according to this post “http://stackoverflow.com/questions/31844586/uploading-image-to-s3-using-phonegap-how-to”, everything seems good, but where it went wrong?

My S3 's view permission and open/download is for everyone as well.


#2

I am having the same problem.
Could you solve it ?


#3

yeah, i missed step to making blob out of base64 image file.

now its working. here is sample code.

// boilerplate function to create a Blob
	$scope.dataURItoBlob = function(dataURI) {
	  var binary = atob(dataURI.split(',')[1]);
	  var array = [];
	  for (var i = 0; i < binary.length; i++) {
	    array.push(binary.charCodeAt(i));
	  }

	  var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
	  return new Blob([new Uint8Array(array)], {
	    type: mimeString
	  });
	}
		 
	$scope.upload = function(imageURI) {
	  // Configure The S3 Object 
	  AWS.config.update({ 
	  	accessKeyId: $scope.creds.access_key, 
	  	secretAccessKey: $scope.creds.secret_key 
	  });
	  /*AWS.config.region = 'us-east-1';*/
	  var bucket = new AWS.S3({ params: { Bucket: $scope.creds.bucket } });
	 
	  if(imageURI) {
	  	var data = $scope.dataURItoBlob(imageURI);

	    var params = { 
	    	Key: $scope.guid + '/' + 'profileImg.jpg',
	    	ContentType: 'image/jpeg',
	    	Body: data,
	    	ACL: "public-read",
	    };
	 	
	    bucket.putObject(params, function(err, data) {
	      if(err) {
	        // There Was An Error With Your S3 Config
	        //console.log("THIS ERROR:", err);
	        return false;
	      }
	      else {
	        // Success!
	        $scope.data.profileImg = imageURI;
	        $scope.$digest();
	        window.localStorage.profileImg = $scope.data.profileImg;
	        /*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');
	  }
	}

#4

Awesome kkcloud!

Thx for the method dataURItoBlob, it’s perfect for converting a cordova base64 picture to something able to be uploaded thru http … save my day


#5

There is error i think. please fix it. http://www.traininginmarathahalli.in/java-training-in-bangalore/


#6

I am able to upload an Image but the size is showing in Bytes please help me to solve
I Working on Ionic 2 framework so
Thanks in advance.