display images fetched from s3

You don't "fetch" the images to display. You just point the image URL to the location where they are stored (S3 in your case). So instead of pulling individual object, pull the list of files in that bucket (bucket.listObjects) and then add them to the source of the thumbnails/images.

<section data-ng-controller="myCtrl">
    <img ng-src="{{s3Url}}{{image.Key}}" width="200px" height="200px" ng-repeat="image in allImageData">
</section>

$scope.s3Url = 'https://s3-<region>.amazonaws.com/myBucket/';
var bucket = new AWS.S3({params: {Bucket: 'myBucket'}});
  bucket.listObjects(function (err, data) {
    if (err) {
      console.log(err);
    } else {
      console.log(data);
      $scope.allImageData = data.Contents;
    }
  });

Assuming here that the files have read permission. They won't be accessible without public read permission for obvious reasons.

EDIT: Based on the comment, the question is seeking to load the actual image on the page. Here's how to do it:

function myCtrl($scope, $timeout) {    
    AWS.config.update({
        accessKeyId: 'YOUR_ACCESS_TOKEN', 
        secretAccessKey: 'YOUR_SECRET'
    });
    AWS.config.region = "YOUR_REGION";
    
    var bucket = new AWS.S3({params: {Bucket: 'YOUR_BUCKET'}});
    
    bucket.getObject({Key: 'happy-face.jpg'}, function(err,file){
        $timeout(function(){
            $scope.s3url = "data:image/jpeg;base64," + encode(file.Body);
        }, 1);
    });
}

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

The data you get from the S3 is a byte array. You need to convert it into the base64encoded data URI. The encode function is borrowed from here. Here's one working jsFiddle with credentials removed.


Full implementation of getting an image from s3 with promise - enjoy!

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="https://sdk.amazonaws.com/js/aws-sdk-2.179.0.min.js"></script>
</head>
<body>
  <img height="200" width="200">
  <script>

    var mimes = {
        'jpeg': 'data:image/jpeg;base64,'
    };

      AWS.config.update({
          signatureVersion: 'v4',
          region: 'us-east-1',
          accessKeyId: '',
          secretAccessKey: ''
      });

      var bucket = new AWS.S3({params: {Bucket: 'xxx'}});

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

      function getUrlByFileName(fileName,mimeType) {
          return new Promise(
              function (resolve, reject) {
                  bucket.getObject({Key: fileName}, function (err, file) {
                      var result =  mimeType + encode(file.Body);
                      resolve(result)
                  });
              }
          );
      }

      function openInNewTab(url) {
          var redirectWindow = window.open(url, '_blank');
          redirectWindow.location;
      }

      getUrlByFileName('sprites.png', mimes.jpeg).then(function(data) {
          //openInNewTab(data);
          document.querySelector('img').src = data;
      });

  </script>
</body>
</html>

Tags:

Javascript

Amazon S3

Filereader

Aws Sdk

Angularjs

Recent Posts