Cordova FileTransfer: upload image to AWS s3

cordova
3

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