Skip to content

Instantly share code, notes, and snippets.

@reichert621
Last active May 21, 2019 07:57
Show Gist options
  • Save reichert621/e987545fdbc2bc071d37 to your computer and use it in GitHub Desktop.
Save reichert621/e987545fdbc2bc071d37 to your computer and use it in GitHub Desktop.
Upload files to Amazon S3 with loopback, loopback-component-storage, angular, ng-file-upload
// 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);
};
});
"amazonS3": {
"name": "amazonS3",
"connector": "loopback-component-storage",
"provider": "amazon",
"key": "your-key",
"keyId": "your-key-id"
}
// 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
}
}
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment