Cordova FileTransfer: upload image to AWS s3

Am using ng-cordova [file-Transfer][1] plugin to upload images to my AWS s3 bucket.

but i run into two problems first it didn’t work, second i have no idea how to debug the problem while the App running on the emulater.

here is my code:

Am using ng-cordova file-Transfer plugin to upload images to my AWS s3 bucket.

but i run into two problems first it didn’t work, second i have no idea how to debug the problem while the App running on the emulater.

here is my code:

.controller('newItemCtrl', function($scope, $http, API_URL, me, $cordovaFileTransfer) {
       var s3URI = encodeURI("https://mybucketname.s3.amazonaws.com/"),
                policyBase64 = "MY_BASE64_ENCODED_POLICY_FILE",
                signature = "MY_BASE64_ENCODED_SIGNATURE",
                awsKey = 'my AWSAccessKeyId',
                acl = "public-read";

        var options = {
            fileKey: "avatar",
            fileName: "image.png",
            chunkedMode: false,
            mimeType: "image/png"
    //        params = {
    //            "key": fileName,
    //            "AWSAccessKeyId": awsKey,
    //            "acl": acl,
    //            "policy": policyBase64,
    //            "signature": signature,
    //            "Content-Type": "image/png"
    //        }
        };

        var imageURI = '../img/ionic.png';
        $scope.upload = function($cordovaFileTransfer) {

            $cordovaFileTransfer.upload(s3URI, imageURI, options)
                .then(function(result) {
                    console.log("SUCCESS: " + JSON.stringify(result.response));
                }, function(err) {
                    console.log("ERROR: " + JSON.stringify(err));
                }, function(progress) {
                    // constant progress updates
                });
        }
})

I also left the params code to ask another question it’s commented, but before i run my app and it gives me an error with the params but my question why i got the error even before invoke the template assosiated with that controller
[1]: http://ngcordova.com/docs/plugins/fileTransfer/

Im having similar issue. I dont get any response. Neither failure message nor pass message. Anyone out there who can provide us with a working example?

Sorry i wasn’t online lately here ill post the solution that worked for me.
what am going to post is based on this [solution][1] .
in this solution you store your AWS S3 bucket name , secret and, AWS key in your server, when you want to upload image form the ionic app it send a request to your server endpoint sign it with your AWS credentials returning policy, signature and, AWS key.
here is the code of this step:

function uploadToS3(imageURI) {

        var signingURI = API_URL + "s3signing";
        var fileName = $scope.item.vendorId + new Date().getTime() + ".jpg";
        $scope.item.picture = 'https://s3-eu-west-1.amazonaws.com/bucket-name/' + fileName;
        console.log('Uploading ' + fileName + ' to S3');

        $http.post(signingURI, {
            "fileName": fileName
        }).success(function(data, status, headers, config) {

            console.log('Got signed doc: ' + JSON.stringify(data));
            var Uoptions = {};
            Uoptions.fileKey = "file";
            Uoptions.fileName = fileName;
            Uoptions.mimeType = "image/jpeg";
            Uoptions.chunkedMode = false;
            Uoptions.headers = {
                connection: "close"
            };
            Uoptions.params = {
                "key": fileName,
                "AWSAccessKeyId": data.awsKey,
                "acl": "private",
                "policy": data.policy,
                "signature": data.signature,
                "Content-Type": "image/jpeg"
            };

second step is to use camera plugin to take a photo or select photo from gallery:

 $scope.selectPicture = function() {

        document.addEventListener('deviceready', function() {

            var options = {
                destinationType: Camera.DestinationType.FILE_URI,
                sourceType: Camera.PictureSourceType.CAMERA,
            };
            $cordovaCamera.getPicture(options).then(function(imageURI) {
                $scope.imageSrc = imageURI;
                $scope.img = imageURI;

            }, function(err) {
                alert(err);
            });

        }, false); // device ready
    }; // Select picture

third step is to upload the image or file to the AWS s3 using the File Transfer plugin:

    $cordovaFileTransfer.upload("https://" + data.bucket + ".s3.amazonaws.com/", imageURI, Uoptions)
        .then(function(result) {
            // Success!
            // Let the user know the upload is completed
            console.log('upload to s3 succeed ', result);

        }, function(err) {
            // Error
            // Uh oh!
            $ionicLoading.show({template : 'Upload Failed', duration: 3000});
            console.log('upload to s3 fail ', err);
        }, function(progress) {
            
            // constant progress updates
        });

})
    .error(function(data, status, headers, config) {

        console.log(' didnt Got signed doc: ' + JSON.stringify(data));
    });

} // upload to Amazon s3 bucket

Finally, and according to my previous question in this post i start debug my app on the chrome console after i implemented crosswalk in my app.
[1]: https://github.com/heroku/nibs

4 Likes

Hello Everyone!! I was also searching for the same and have done it somehow.I made blog on this.Please go through this block http://blogs.triffort.com/?p=466. It will definitely help you.
Best Regards.
Zeeshan Hafeez

Hey, can you guide me on how to form the signature required during upload?
I am setting policy to

var POLICY_JSON = { "expiration": "2020-12-01T12:00:00.000Z",
            "conditions": [
                {"bucket": '<bucketname>'},
                ["starts-with", "$key", ""],
                {"acl": 'public-read-write'},
                ["starts-with", "$Content-Type", ""]
            ]
        };

and calculating signature via
var signature = b64_hmac_sha1(accessSecretKey, btoa(JSON.stringify(POLICY_JSON)));

I get an error saying Signatures do not match, can you please help me understand what am I doing wrong?

Nothing useful thing is there in that site
regarding this problem
Its showing only
This is somewhat embarrassing, isn’t it?
It seems we can’t find what you’re looking for. Perhaps searching, or one of the links below, can help.