Upload files to Amazon S3 with loopback, loopback-component-storage, angular, ng-file-upload

app.js

// bower dependency: "ng-file-upload"
// npm dependency: "loopback-component-storage"

'use strict';

angular.module('app', [
  'ngFileUpload'
])
.controller('UploadController', function($scope, Upload) {
  
  var S3_BUCKET_URL = '/api/Containers/' + yourS3bucketName + '/upload';

  $scope.data = {
    files: []
  };

  $scope.submit = function(data) {
    var files = data.files[0];
    
    Upload.upload({
      url: S3_BUCKET_URL,
      file: file
    }).then(function(res) {
      $log.debug(res.data.result.files); // log files uploaded
    });
  };

});

datasources.json

"amazonS3": {
  "name": "amazonS3",
  "connector": "loopback-component-storage",
  "provider": "amazon",
  "key": "your-key",
  "keyId": "your-key-id"
}

loopback-container-model

// container.js
module.exports = function(Container) {

};


// container.json
{
  "name": "Container",
  "base": "Model",
  "properties": {},
  "validations": [],
  "relations": {},
  "acls": [],
  "methods": []
}


// model-config.json
{
  "Container": {
    "dataSource": "amazonS3",
    "public": true
  }
}

uploader.html

<button type="file" 
        ngf-select
        accept=".pdf, .doc, .docx"
        class="btn upload-btn"
        ng-model="data.files"
        ng-disabled="data.files.length">
  Browse Files
</button>

<div class="file-preview" ng-show="data.files.length">
  {{ data.files[0].name }} 
  <span class="remove-file" ng-click="data.files = []">[X Remove File]</span>
</div>

<button class="btn submit-btn" ng-click="submit(data)">Submit</button>