Cordova/Ionic app uploading base64 image to S3 via server signed url

Question

I can't seem to get the photo to upload on S3. Looked at a lot of resources online and I can't seem to find a definite answer to this. Here's what I have so far. I always get Error code: 3 as my failed message.

Client side:

$scope.uploadTopicPhoto = function(imageData) {
    var image2save = "data:image/jpeg;base64," + imageData;
    $http({
      url: 'http://api.example.io/signS3upload', 
      method: "GET"
     }).then(function (success) {
        var options = new FileUploadOptions();
        options.fileKey = "file";
        options.fileName = success.data.key
        options.mimeType = "image/jpeg";    
        options.chunkedMode = false;
        options.httpMethod = 'PUT';

        function win(r) {
            console.log("Code = " + r.responseCode);
        }

        function fail(error) {
            alert("An error has occurred: Code = " + error.code);
        }

        var uri = encodeURI(success.data.signed_request);

        var ft = new FileTransfer();
        ft.upload(image2save, uri, win, fail, options);
     });
}

Server side:

var s3 = new aws.S3();
    var bucketName = 'testimages';
    var s3_params = {
        Bucket: bucketName,
        Key: uuid.v4() + '.jpg',
        Expires: 60,
        ContentEncoding: 'base64',
        ContentType: 'image/jpeg',
        ACL: 'public-read'
    };

    s3.getSignedUrl('putObject', s3_params, function(err, data){
        if (err) {
            console.log(err);
        } else {
        var return_data = {
            signed_request: data,
            key: s3_params.Key
        };
        res.json(return_data);
        }
});

CORS:

<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedMethod>PUT</AllowedMethod>
        <AllowedMethod>POST</AllowedMethod>
        <AllowedMethod>DELETE</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>Content-*</AllowedHeader>
        <AllowedHeader>Authorization</AllowedHeader>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

Answer 1

it works for me, i send out the image file to REST API and API uploads the image in s3 bucket and credentials are get from other file[save credential].

(function() {
function execute(rqst, q, fwk) {
    console.log('called api')
    var uploadedFile = rqst.files['image'];
    console.log(rqst.files['image']);
    var newId = fwk.uuid.v4();
    console.log('.........', rqst);
    if (rqst.body.data) {
        var image_type = rqst.body.data;
    } else {
        var image_type = rqst.body.image_type;
    }
    console.log('type', image_type, newId);
    if (image_type && uploadedFile) {
        if (!uploadedFile.extension) {
            uploadedFile.extension = "png";
            console.log('not ex');
        }
        var newPath = "images/food-images" + "/" + newId + '.' + uploadedFile.extension;
        fwk.getAwsS3Client(function(err, awsS3Client) {
            var params = {
                localFile: uploadedFile.path,
                s3Params: {
                    Bucket: fwk.config.awsS3.bucketName,
                    Key: newPath,
                },
            };
            var uploader = awsS3Client.uploadFile(params);
            uploader.on('error', function(err) {
                console.error('Unable to upload' + image_type + 'photo:' + err.toString());
                q.resolve({
                    status: 200,
                    data: {
                        code: 1,
                        error_message: 'Unable to upload' + image_type + 'photo.'
                    }
                });
            });
            uploader.on('progress', function() {
                console.log(uploader.progressAmount);
            });
            uploader.on('end', function() {
                console.log("upload" + image_type + "photo done.");
                fwk.getAwsS3PublicUrl(newPath, function(err, publicUrl) {
                    if (err) {
                        console.error('Error getting public url: ' + err.toString());
                        q.resolve({
                            status: 200,
                            data: {
                                code: 1,
                                error_message: 'Error getting public url.'
                            }
                        });
                    } else {
                        // console.log('ho gya upload',newPath,publicUrl)
                        q.resolve({
                            status: 200,
                            data: {
                                code: 0,
                                photo_url: newPath,
                                public_photo_url: publicUrl
                            }
                        });
                    }
                })
            });
        });
    } else {
        console.error('Error key parameter missing');
        q.resolve({
            status: 200,
            data: {
                code: 1,
                error_message: 'Error Missing required key in params.'
            }
        });
    }
}
exports.execute = execute;
  })();