CODEWITHSUNDEEP
javascriptangularjsamazon-web-servicesamazon-s3
simple user
simple user

Reputation: 403

Image from Amazon S3 Bucket didn't display in first request

I am facing a unique problem and I am not able to understand the reason behind this.

I have Amazon S3 account and I create bucket where I kept my uploaded images. I am using following code to retrieve the image. My issue is unique because when I am retrieving the image in first request then it is not showing anything on webpage but the image is getting retrieved after subsequent request and display to webpage.

I am not able to understand the reason.

Angular JS Code

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

    AWS.config.region = "BUCKET_REGION";

    var bucketInstance = new AWS.S3();
    var params = {
        Bucket: "BUCKET_NAME",
        Key: "FILE_NAME"
    }
    bucketInstance.getObject(params, function (err, file) {
        if (file) {
            $scope.imgSrc = "data:" + file.ContentType + ";base64," + encode(file.Body);           
        } else {
            console.log('error::', err);
        }
    });
}

function encode(data) {
    var str = data.reduce(function (a, b) { return a + String.fromCharCode(b) }, '');
    return btoa(str).replace(/.{76}(?=.)/g, '$&\n');
}

Upvotes: 0

Views: 352

Answers (2)

Brian Ogden
Brian Ogden

Reputation: 19232

The issue is probably with AngularJs, confirm that the image is retrieved outside of AngularJs or you could monitor network traffic with Chrome Developer tooling, you are likely to find the image is returned from Amazon S3 with each request and that your AngularJs view is just not refreshing correctly

Upvotes: 2

Bui Anh Tuan
Bui Anh Tuan

Reputation: 920

You should read more about S3 Data Consystency Model

Amazon S3 provides read-after-write consistency for PUTS of new objects in your S3 bucket in all regions with one caveat. The caveat is that if you make a HEAD or GET request to the key name (to find if the object exists) before creating the object, Amazon S3 provides eventual consistency for read-after-write.

Amazon S3 offers eventual consistency for overwrite PUTS and DELETES in all regions.

It means there are some lag/delay after you get put succeed code.

Upvotes: 1

Related Questions