Upload Image Directly From Browser Using AngularJS Amazon S3

Question

I am trying to upload images from my browser to Amazon S3 directly, but getting the error of AWS not being defined:

   public/modules/users/controllers/settings.client.controller.js
 16 |      var bucket = new AWS.S3({ 
                            ^ 'AWS' is not defined.
 18 |          credentials: new AWS.Credentials($scope.creds.access_key, $scope.creds.secret_key)
                                ^ 'AWS' is not defined.

Below is my code:

'use strict';

    angular.module('users').controller('SettingsController', ['$scope', '$http', '$location', 'Users', 'Authentication',
function($scope, $http, $location, Users, Authentication) {
    $scope.user = Authentication.user;

        $scope.profpic = '';
        $scope.creds = {
            bucket: 'bucket_name',
            access_key: '',
            secret_key: ''
        };

        $scope.upload = function() {
  // Configure The S3 Object 
  var bucket = new AWS.S3({ 
    region : 'us-east-1',
    credentials: new AWS.Credentials($scope.creds.access_key, $scope.creds.secret_key)
  });

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

    bucket.putObject(params, function(err, data) {
        if(err) {
        // There Was An Error With Your S3 Config
        alert(err.message);
        return false;
    }
    else {
        // Success!
        alert('Upload Done');
    }
})
    .on('httpUploadProgress',function(progress) {
          // Log Progress Information
          console.log(Math.round(progress.loaded / progress.total * 100) + '% done');
      });
  }
  else {
    // No File Selected
    alert('No File Selected');
}
};

    // If user is not signed in then redirect back home
    if (!$scope.user) $location.path('/');

    // Check if there are additional accounts 
    $scope.hasConnectedAdditionalSocialAccounts = function(provider) {
        for (var i in $scope.user.additionalProvidersData) {
            return true;
        }

        return false;
    };

    // Check if provider is already in use with current user
    $scope.isConnectedSocialAccount = function(provider) {
        return $scope.user.provider === provider || ($scope.user.additionalProvidersData && $scope.user.additionalProvidersData[provider]);
    };

    // Remove a user social account
    $scope.removeUserSocialAccount = function(provider) {
        $scope.success = $scope.error = null;

        $http.delete('/users/accounts', {
            params: {
                provider: provider
            }
        }).success(function(response) {
            // If successful show success message and clear form
            $scope.success = true;
            $scope.user = Authentication.user = response;
        }).error(function(response) {
            $scope.error = response.message;
        });
    };

    // Update a user profile
    $scope.updateUserProfile = function(isValid) {
        if (isValid) {
            $scope.success = $scope.error = null;
            var user = new Users($scope.user);

            user.$update(function(response) {
                $scope.success = true;
                Authentication.user = response;
            }, function(response) {
                $scope.error = response.data.message;
            });
        } else {
            $scope.submitted = true;
        }
    };

    // Change user password
    $scope.changeUserPassword = function() {
        $scope.success = $scope.error = null;

        $http.post('/users/password', $scope.passwordDetails).success(function(response) {
            // If successful show success message and clear form
            $scope.success = true;
            $scope.passwordDetails = null;
        }).error(function(response) {
            $scope.error = response.message;
        });
    };
}
    ])
    .directive('fileread', [function(){
        return {
            scope: {
                fileread: '='
            },
            link: function(scope, element, attributes) {
                element.bind('change', function(changeEvent) {
                    var reader = new FileReader();
                    reader.onload = function(loadEvent) {
                        scope.$apply(function() {
                    scope.fileread = loadEvent.target.result;
                        });
                    };
                    reader.readAsDataURL(changeEvent.target.files[0]);
                });
            }
         };
    }]);

Not sure what th eproblem is, as this is my very first time using Angular & dealing wi/ S3.

Forget about angular for a sec. Just try out some code for s3 and see if that works. Then add on Angular. Then you'll know if the problem is with Angular or S3. — Yahya Uddin
– Yahya Uddin, Commented Mar 16, 2015 at 20:40
If AWS is not defined then it probably means that you forgot to add the script regarding s3. make sure the script tag that defines AWS is above the Angular scripts. — Yahya Uddin
– Yahya Uddin, Commented Mar 16, 2015 at 20:42
I haven't used AWS before but if you are using AWS.S3, then obviously AWS.S3 must be defined before using it. AWS is not a built in feature in the browser. I'm not sure how the script looks like, but I'll assume you would have to write something like this: <script src="path/to/aws.js"></script> in the head tage. Like I said remove the angular stuff and see if you got the S3 stuff correct first! — Yahya Uddin
– Yahya Uddin, Commented Mar 16, 2015 at 20:48

Yahya Uddin · Accepted Answer · 2015-03-17 00:05:16Z

1

Are you sure you added the AWS script.

From looking at this: https://github.com/aws/aws-sdk-js

I believe you may have forgot this in your HTML file:

<head>
    ....
    <script src="https://sdk.amazonaws.com/js/aws-sdk-2.1.17.min.js"></script>
    ....
</head>

Or if it is stored locally:

<head>
    ....
    <script src="path/to/file/aws-sdk-2.1.17.min.js"></script>
    ....
</head>

Or something similar

If you are using aws in the backend & a Node server then you'll need use require it like this (however looking at your code it looks like you are doing it in the frontend):

var AWS = require('aws-sdk');

http://docs.aws.amazon.com/AWSJavaScriptSDK/guide/node-intro.html

edited Mar 17, 2015 at 0:05

answered Mar 16, 2015 at 20:50

Yahya Uddin

29.3k40 gold badges159 silver badges250 bronze badges

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

6 Comments

RayMontez Over a year ago

Where is that exactly supposed to go? In my file that I posted above? or in the HTML file?

Yahya Uddin Over a year ago

This is meant to go in the head tag before your angular script tags. I'm assuming this is front end scripts right. You not using Node.js for your server right?

Yahya Uddin Over a year ago

Edited the post. But looking at your post it looks like your using aws on the frontend, so you'll just use the first thing I suggested.

RayMontez Over a year ago

So this resolved it. But now I am getting the error saying 'require' is not defined & the picture is still not being uploaded.

Scorpion-Prince Over a year ago

There are a couple of angular modules which wrap the AWS functionality, and provide services and directives to directly upload to your S3 bucket. If you are interested, you can see the 2 packages here

|

Collectives™ on Stack Overflow

Upload Image Directly From Browser Using AngularJS Amazon S3

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related