This code will allow you to upload images from an AngularJS app to Amazon AWS / S3. Be sure to find a secure way to store your Amazon secret keys! When the page loads, there is a button whose title is 'Choose Image'. When you click it, the file explorer opens. Choose an image. When the file explorer closes, this button's title becomes the name o…

controller.js

function addLeagueCtrl($scope, $rootScope, $location, $http, DashboardService) {
  AWS.config.update({accessKeyId: 'YOURACCESSID', secretAccessKey: 'YOURSECRETKETY'});
  AWS.config.region = 'us-west-2';
  var bucket = new AWS.S3({params: {Bucket: 'ezsportsadmin'}});

  var fileChooser = document.getElementById('file-chooser');
  var results = document.getElementById('results');
  var imageURL = "";
  $scope.fileChooser = fileChooser;

  $scope.picTitle = "Choose Image";

  var picTitle = $scope.picTitle;

  $('input:file').change(
      function(e){
          var name = e.target.files[0].name;
          $scope.picTitle = name;
          $scope.$apply();
      });

  $scope.uploadImage = function() {
      var file = fileChooser.files[0];
      if (file) {
          results.innerHTML = '';
          var params = {Key: file.name, ContentType: file.type, Body: file};                
          bucket.upload(params, function (err, data) {
              err ? ShowError("There was a problem uploading your image. Please try again.") : ShowSuccess("Image was uploaded.");
              $scope.imageURL = data.Location;
          });
      } else {
          results.innerHTML = 'Nothing to upload.';
      }
  }
  
  // ETC.....

page.html

<div class="row">
    <div class="btn btn-lg btn-secondary fileUpload">
    <i class="fa fa-picture-o fa-2x pull-left"></i><span id="picTitle"> {{picTitle}}</span>
    <input type="file" id="file-chooser" class="upload"/></div>
    <br />
    <button class="btn btn-lg btn-success" ng-click="uploadImage()" id="upload-button">Upload!</button>
    <div id="results"></div>
</div>

style.css

.fileUpload {
    position: relative;
    overflow: hidden;
    margin: 10px;
}
.fileUpload input.upload {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
}