Created
May 13, 2015 20:28
-
-
Save dacur/9a2d263178de7ec2606e to your computer and use it in GitHub Desktop.
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…
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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..... |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .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); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment