Skip to content

Instantly share code, notes, and snippets.

@dacur
Last active July 12, 2024 00:18
Show Gist options
  • Save dacur/a767a76b65ffdeecc7f4 to your computer and use it in GitHub Desktop.
Save dacur/a767a76b65ffdeecc7f4 to your computer and use it in GitHub Desktop.
Using AngularJS with Amazon AWS:S3 image uploads. Create new Amazon bucket. Under permissions, grant 'Everyone': List and Upload/Delete privileges. Be sure to set up Amazon bucket permissions below, as well. The image URL, when returned from Amazon, is being saved in $scope.imageURL. Now you can pass the image URL to your API from another functi…
Add under Permissions in your Amazon bucket:
{
"Version": "2008-10-17",
"Statement": [
{
"Sid": "AllowPublicRead",
"Effect": "Allow",
"Principal": {
"AWS": "*"
},
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::change-this-to-your-bucket's-name/*"
}
]
}
Add under Permissions in your Amazon bucket:
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<AllowedMethod>PUT</AllowedMethod>
<AllowedMethod>POST</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>
<div class="panel panel-default" data-ng-controller="whatever_controller">
<div class="row">
<div id="status"></div>
<ul id="objects"></ul>
<input type="file" id="file-chooser" />
<br />
<button ng-click="uploadImage()" id="upload-button">Upload Image</button>
<div id="results"></div>
</div>
</div>
Add this script to your index.html file:
<script src="https://sdk.amazonaws.com/js/aws-sdk-2.1.24.min.js"></script>
AWS.config.update({accessKeyId: 'PUT YOUR KEY ID HERE', secretAccessKey: 'put your secret key here'});
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.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) {
results.innerHTML = err ? 'There was a problem uploading your image. Please try again.' : 'Image was uploaded.';
$scope.imageURL = data.Location;
});
} else {
results.innerHTML = 'Nothing to upload.';
}
};
@meghaarora099
Copy link

how to delete image from folder inside the bucket ?

@SRIKOT
Copy link

SRIKOT commented Jan 14, 2020

thank you bro

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment