Amazon S3 upload image - using angular js directly from browser

Question

I am trying to upload images from my browser to Amazon S3 directly, using angular js.

Below is my code.

function _upload($files) {
                $scope.file = $files[0];
                $scope.creds = {
                    access_key: '***',
                    secret_key: '***',
                    bucket: 'sabari-test'
                };

                var bucket = new AWS.S3({
                    params: {
                        Bucket: $scope.creds.bucket
                    }
                });
                AWS.config.accessKeyId = $scope.creds.access_key;
                AWS.config.secretAccessKey = $scope.creds.secret_key;
                AWS.config.region = 'us-west-2';

                // AWS.

                if ($scope.file) {
                    // Perform File Size Check First
                    var fileSize = Math.round(parseInt($scope.file.size));
                    if (fileSize > $scope.sizeLimit) {
                        console.log('Sorry, your attachment is too big.');
                        return false;
                    }
                    // Prepend Unique String To Prevent Overwrites
                    var uniqueFileName = 'hai' + '-' + $scope.file.name;

                    var params = {
                        Key: uniqueFileName,
                        ContentType: $scope.file.type,
                        Body: $scope.file,
                        ServerSideEncryption: 'AES256'
                    };

                    bucket.putObject(params, function(err, data) {
                        if (err) {
                            console.log(err.message);
                            return false;
                        } else {
                            // Upload Successfully Finished
                            console.log('File Uploaded Successfully');
                        }
                    })
                } else {
                    // No File Selected
                    console.log('Please select a file to upload');
                }
            }

I get the below error:

"Missing credentials in config"

Please let me know what is the missing credential?

Thanks.

Out of curiosity: you have this in your JS file where anyone can see it? Are you aware that anyone would have access to your Amazon S3 credentials? Don't you want to do this in the back-end instead? — Josep
– Josep, Commented Sep 20, 2014 at 7:05
Yes I am .Thanks. I am doing this to achieve the flow working. I will route through node js, later. — sabari
– sabari, Commented Sep 20, 2014 at 7:46

Josep · Accepted Answer · 2014-09-20 08:15:11Z

3

You need to replace these lines:

            var bucket = new AWS.S3({
                params: {
                    Bucket: $scope.creds.bucket
                }
            });
            AWS.config.accessKeyId = $scope.creds.access_key;
            AWS.config.secretAccessKey = $scope.creds.secret_key;
            AWS.config.region = 'us-west-2';

With this:

            var bucket = new AWS.S3({
                region = 'us-west-2',
                credentials: new AWS.Credentials($scope.creds.access_key, $scope.creds.secret_key)
            });

And then move the Bucket to your var params

                var params = {
                    Bucket: $scope.creds.bucket,
                    Key: uniqueFileName,
                    ContentType: $scope.file.type,
                    Body: $scope.file,
                    ServerSideEncryption: 'AES256'
                };

edited Sep 20, 2014 at 8:15

answered Sep 20, 2014 at 7:17

Josep

13.1k2 gold badges44 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

sabari Over a year ago

Still I get the same error. Should I assign this AWS.Config to some variable as pass it as param to bucket param.. in some way? Because upto my knowledge , I dont see AWS.Config getting connected to the bucket.putObject

Josep Over a year ago

@sabari I just updated the answer, sorry about that, please try my new suggestion, I think that this should work now. Thanks!

sabari Over a year ago

Tried this Josep. I get the same error 'Missing credentials in config'

sabari Over a year ago

Can I defined something like this : AWS.config.credentials = ...; as said in docs.aws.amazon.com/AWSJavaScriptSDK/guide/…

Josep Over a year ago

@sabari sorry, I'm sleepy, I just made another update, please try that, I'm pretty sure that this will get rid of that error.

Collectives™ on Stack Overflow

Amazon S3 upload image - using angular js directly from browser

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related