title: Upload Image Directly From Browser Using AngularJS Amazon S3
body: <p>I am trying to upload images from my browser to Amazon S3 directly, but getting the error of AWS not being defined:</p>
  
  <pre><code>   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.
  </code></pre>
  
  <p>Below is my code:</p>
  
  <pre><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 &amp;&amp; $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]);
                  });
              }
           };
      }]);
  </code></pre>
  
  <p>Not sure what th eproblem is, as this is my very first time using Angular &amp; dealing wi/ S3.</p>