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(Upload) {
    const S3_BUCKET_URL = `/api/Containers/${yourS3bucketName}/upload`;

    this.files = [];

    this.submit = (files) => {
      const [file] = files;

      Upload.upload({ file, url: S3_BUCKET_URL })
        .then(res => {
          $log.debug(res.data.result.files); // log files uploaded
        })
        .catch($log.error);
    };
  });

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="ctrl.files"
        ng-disabled="ctrl.files.length">
  Browse Files
</button>

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

<button class="btn submit-btn" ng-click="ctrl.submit(ctrl.files)">Submit</button>