简体   繁体   中英

Retrieve image from Amazon S3 private bucket using Angular JS

I am using Angular JS and WEB API for one of my website. As per requirement of website I am using Amazon S3 to store image in the bucket.

I am using WEB API to upload image dynamically in my Amazon S3 Bucket using accesskey and secretaccess key.

But now I want to display those uploaded images(not all at once) in website using Angular JS. Please note that bucket is not public.

Can anyone please share the exact code with step by step guidelines to retrieve the image from Amazon S3 using Angular JS?

Edited(New Addition)

Based on the response I have added the below code:-

$scope.retrieveImage = function()
{
   AWS.config.update({
            accessKeyId: "MyAccessKey", secretAccessKey: "MySecretKey"
        });

   var bucket = new AWS.S3({ params: { Bucket: "MyBucket" } });

   bucket.getObject({ Key: 'Datetime.png' }, function (err, file) {
     $scope.imgUrl = "";
   });
}

I am getting the below error now:-

Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin ' http://localhost:PortNumber ' is therefore not allowed access. The response had HTTP status code 403.

I have added the following CORS configuration inside permission of MyBucket:-

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>Authorization</AllowedHeader>
</CORSRule>
</CORSConfiguration>

Please let me know what to be done on this?

Solution:- Amending the following CORS tag to <AllowedHeader>*</AllowedHeader> works like charm. Thanks for all your responses.

AWS has a complete example on mantaing photo album in a website using S3. It includes adding, removing images and albums.

http://docs.aws.amazon.com/sdk-for-javascript/v2/developer-guide/s3-example-photo-album.html

Hope it helps.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM