s3-images

access all images from s3

by anil001ry

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.4.3/angular-ui-router.min.js?v=1.5"></script>
<script src="https://sdk.amazonaws.com/js/aws-sdk-2.654.0.min.js"></script>
 <div ng-app="app" ng-controller="mainController">
   Load Multiple Images From S3 From API using Keys
   <hr>
   <div ng-repeat="x in courseDetails">
     {{$index+1}}
     <p>
       {{x.CourseName}}
     </p>
     <image src="image({{x.CourseImage}})"></image>
     <hr>
   </div>
 </div>

JavaScript

var app = angular.module("app", ["ui.router"]);
app.factory("photo", function() {
  var photosFactory = {};
  photosFactory.getimages = function(val) {
    console.log("Getimage Service Invoked");

    AWS.config.update({
      accessKeyId: "AKIAINDKMTLNWYQ4PBAA",
      secretAccessKey: "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",
      region: "ap-south-1",
    });
    
    var s3 = new AWS.S3({
      apiVersion: "2006-03-01",
      params: {
        Bucket: 'alsresources'
      },
    });
    
    var pathname = new URL(val).pathname;
    var path = pathname.substring(1);
    var als;
    
    return new Promise((resolve, reject) => {
      s3.getObject({
        Key: path
      }, function(err, file) {
        if (err) {
          reject("Some Error With S3" + err);
        } else {
          console.log(file.Body);
          als = "data:image/jpeg;base64," + encode(file.Body);
          resolve(als);
        }
      });
    });

    function encode(data) {
      var str = data.reduce(function(a, b) {
        return a + String.fromCharCode(b);
      }, "");
      return btoa(str).replace(/.{76}(?=.)/g, "$&\n");
    }
  };
  return photosFactory;
});
app.controller("mainController", function($scope, $http, photo) {
  console.log("Image Controller");

  $scope.getAllCourse = function() {
    $http.get("https://alsback.immersionslabs.com" + "/alscourses/getallcourses", {
        transformRequest: angular.identity,
        headers: {
          "Content-Type": undefined
        }
      })
      .then(function(data) {

        $scope.courseDetails = data.data.Data
        console.log($scope.courseDetails)
        /* for(i= 0; i< 1 ;i++){
                   
               } */

      })
      .catch(function(data) {
        {
          console.log(data)
        }
      })
  }
  $scope.getAllCourse();


  $scope.image = (val) => {
    return photo.getimages(val)
  }




});