This code is intended to make an awesome EvaporateJS library work as AngularJS module. Inspired by sourcec0de's example, which is currently using jQuery.
Install:
bower install --save angular-evaporate
Include files:
<script src="/bower_components/angular/angular.min.js"></script>
<script src="/bower_components/evaporatejs/evaporate.js"></script>
<script src="/bower_components/angular-evaporate/lib/angular-evaporate.min.js"></script>
Add the evaporate
dependency to your angular
project:
var app = angular.module('<your app name>', ['evaporate']);
Configure EvaporateJS
:
app.config(['evaProvider', function (evaProvider) {
evaProvider.config({
signerUrl: '<path to your server\'s route, which will sign requests with your private aws_secret_key>',
aws_key: '<your public aws_access_key>',
bucket: '<your s3 bucket name>',
logging: false|true // logs to console
// ... other parameters if accepted by the EvaporateJS
});
}])
Configure angular-evaporate
:
app.controller('AppCtrl', ['$scope', function ($scope) {
// this variable is used like a model for particular directive
// all parameters here are optional
$scope.evaData = {
// every file will get the following link on s3:
// http://<your_bucket>.s3.amazonaws.com/<this_value>/<upload_datetime>$<filename_with_extension>
// if you want to put the files into nested folder, just use dir: 'path/to/your/folder'
// if not specified, default value being used is: '' (matches bucket's root directory)
dir: 'tmp',
// You can pick a different separator string that goes in between upload_datetime and filename_with_extension:
// http://<your_bucket>.s3.amazonaws.com/<dir>/<upload_datetime><this_value><filename_with_extension>
// if not specified, the default value being used is: '$'
timestampSeparator: '_',
// headers which should (headersSigned) and should not (headersCommon) be signed by your private key
// for details, visit http://docs.aws.amazon.com/AmazonS3/latest/API/RESTObjectPUT.html
headersCommon: {
'Cache-Control': 'max-age=3600'
},
headersSigned: {
'x-amz-acl': 'public-read'
},
// custom callbacks for onProgress and onComplete events
onFileProgress: function (file) {
console.log(
'onProgress || name: %s, uploaded: %f%, remaining: %d seconds',
file.name,
file.progress,
file.timeLeft
);
},
onFileComplete: function (file) {
console.log('onComplete || name: %s', file.name);
},
onFileError: function (file, message) {
console.log('onError || message: %s', message);
}
};
}]);
Add file input with the evaporate
directive using previously mentioned evaData
model:
<input type="file" multiple="multiple" evaporate eva-model="evaData">
- Clone the repo:
git clone https://github.com/uqee/angular-evaporate.git
- Navigate into the project folder:
cd ./angular-evaporate
- Install frontend deps:
bower install
- Navigate into the example folder:
cd ./example
- Install backend deps:
npm install
- Update credentials:
- Set up your AWS S3 bucket: follow instructions at EvaporateJS
- Update the module's config in
./index.js
according to your own info from the previous step - Run the server:
- If you have foreman installed then:
* Set environment: create an
.env
file with this data:PORT=<tcp port number (must match the one you have provided to AWS CORS)> AWS_SECRET_KEY=<your private aws_secret_key>
* Run:npm start
- If you do not then:
* Set environment: manually, e.g.
export PORT=<...>; export AWS_SECRET_KEY=<...>;
* Run:node server.js
- In browser navigate to:
localhost:<PORT>/example
Always use server-side validation for incoming requests to the config.signerUrl
, because in this simple example anyone could send you anything he wanted and just get it signed with your secret key.