cordova/phonegap image upload to Amazon s3

Question

I am trying to upload an image (as base64 format) from phone gap application to amazon s3. The image is uploaded successfully, but it's displayed as boxes when I try to view the image in Amazon server. I used the below link for my reference.

Uploading image to S3 using phonegap, how to?

I also tried to upload the image (as imageURI) using the below link, but it throws an error Body.params is required

https://github.com/ccoenraets/phonegap-s3-upload/blob/master/client/phonegap-s3-upload/www/app.js

Please find the snippets of code,

// take picture
var options =   {
          quality: 75,
          targetWidth: 320,
          targetHeight: 320,
          destinationType: 1, // 0 = base 64, 1 = imageURI
          sourceType: 1,      // 0:Photo Library, 1=Camera, 2=Saved Photo Album
          encodingType: 0     // 0=JPG 1=PNG
      };
    // Take picture using device camera and retrieve image as base64-encoded string
    navigator.camera.getPicture(onSuccess,onFail,options);


    ---------
uploading the image

var imageData = 'data:image/jpeg;base64,'+ $scope.lastPhoto;
         var params = {
              Key: 'test5.jpg', // for testing purpose 
              Body: imageData, // base64 data
              ContentEncoding: 'base64',
              ContentType: 'image/jpeg'
            };
            var fileName = "" + (new Date()).getTime() + ".jpg"; 
            console.log ('data params' + params.Body);
            bucket.upload(params, function(err, data){
              $scope.hide($ionicLoading);
              var result = err ? 'ERROR!' : 'UPLOADED SUCCESSFULLY...';
              var alertPopup = $ionicPopup.alert({
                 title: 'Amazon  Confirmation',
                 template: 'Result : ' + result
              });

Can you open the image URL in a browser? If you try that and it still shows as a box, the image my be corrupt. — Rodrigo Murillo, Jan 05 '16 at 23:49
It works fine in the browser. Just FYI.. I am testing on Android browser. — Ramesh Sangili, Jan 06 '16 at 18:30

score 1 · Accepted Answer · edited May 23 '17 at 12:07

1

Can you check this link how to save canvas data to file

var data = img.replace(/^data:image/\w+;base64,/, "");

edited May 23 '17 at 12:07

Community

1
1

answered Jan 06 '16 at 13:02

Sankar S

98
1
1
4

score 0 · Answer 2 · answered Mar 25 '16 at 07:19

AWS.config.update({

            accessKeyId : 'your-ACCESSKEYID',
            secretAccessKey : 'SECRETACCESSKEY'


       });

$cordovaCapture.captureVideo().then(function(videoData) {

          $scope.file=videoData[0].name;




             var first='file:/storage/sdcard0/DCIM/Camera/';

             $cordovaFile.readAsDataURL(first,$scope.file)
                  .then(function (success) {

                var bucket = new AWS.S3({params: { Bucket: 'your-bucket-name' }});

                  var params = {Key: videoData[0].name, ContentEncoding: 'base64', ContentType: 'video/mp4; charset=UTF-8' , Body: success};

                  bucket.upload(params).on('httpUploadProgress', function(evt) {
                    $scope.uploading = true;
                    $scope.progress = parseInt((evt.loaded * 100) / evt.total)+'%';
                    console.log("Uploaded :: " + $scope.progress );         
                    $scope.$apply();
                  }).send(function(err, data) {
                    $scope.uploading = false;
                    /*$scope.images.push(data.Location);*/

                    console.log(data.Location);
                    $scope.$apply();
                  });


                  }, function (error) {

                  console.log("==========error==========");
                  console.log(error);
                  })


            })

      }

cordova/phonegap image upload to Amazon s3

2 Answers2