separate configs

uqee · May 13, 2016 · 6244f47 · 6244f47
1 parent a98b066
commit 6244f47
Show file tree

Hide file tree

Showing 3 changed files with 240 additions and 161 deletions.
diff --git a/example/index.html b/example/index.html
@@ -9,13 +9,22 @@
   <body ng-app="app">
 
     <div ng-controller="AppCtrl">
-      <div ng-hide="evaData.ready">upload is not available</div>
-      <div ng-show="evaData.ready">
-        <input type="file" multiple="multiple" evaporate eva-model="evaData">
+      <div ng-hide="evaModel.supported">upload is not available</div>
+      <div ng-show="evaModel.supported">
+        <input
+          type="file"
+          multiple="multiple"
+          evaporate
+          eva-config-init="evaConfigInit"
+          eva-config-add="evaConfigAdd"
+          eva-config-name="evaConfigName"
+          eva-model="evaModel"
+        />
         <ul>
-          <li ng-repeat="file in evaData.files">
+          <li ng-repeat="file in evaModel.files">
             <span>{{file.name}}</span>
             <span ng-show="file.completed"> uploaded, <a ng-href="{{file.url}}" target="_blank">open it</a> in new tab</span>
+            <button ng-click="file.cancel()" ng-hide="file.completed">cancel</button>
             <div class="progress" ng-hide="file.completed">
               <div class="progress-indicator" style="width: {{file.progress}}%;"></div>
               <div class="progress-value">
@@ -35,7 +44,7 @@
     <script src="/bower_components/evaporatejs/evaporate.js"></script>
 
     <!-- angular-evaporate module -->
-    <script src="/lib/angular-evaporate.min.js"></script>
+    <script src="/lib/angular-evaporate.js"></script>
 
     <!-- your app module -->
     <script src="/example/index.js"></script>

diff --git a/example/index.js b/example/index.js
@@ -2,59 +2,72 @@
 'use strict';
 angular
   .module('app', ['evaporate'])
+  .controller('AppCtrl', ['$scope',
+    function ($scope) {
 
-  // it's absolutely essential to config the module beforehand
-  // these options are passed directly into EvaporateJS itself
-  // for details look at: https://github.com/TTLabs/EvaporateJS
-  .config(['evaProvider', function (evaProvider) {
-    evaProvider.config({
-      signerUrl: '/signer',
-      aws_key: 'AKIAI6HJQ7BXS3WOAP5A',
-      bucket: 'motoroller',
-      logging: false
-    });
-  }])
-
-  .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);
-      }
-    };
-  }]);
+      // it's absolutely essential to config the module beforehand
+      // these options are passed directly into EvaporateJS itself
+      // for details look at: https://github.com/TTLabs/EvaporateJS
+      $scope.evaConfigInit = {
+        bucket: 'motoroller',
+        aws_key: 'AKIAI6HJQ7BXS3WOAP5A',
+        signerUrl: '/signer',
+        logging: false
+      };
+
+      $scope.evaConfigAdd = {
+
+        // 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
+        notSignedHeadersAtInitiate: {
+          'Cache-Control': 'max-age=3600'
+        },
+        xAmzHeadersAtInitiate: {
+          'x-amz-acl': 'public-read'
+        },
+
+        // custom callbacks for onProgress and onComplete events
+        info: function (msg) { console.log(msg); }
+        /*
+        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);
+        }
+        */
+      };
+
+      // this variable is used like a model for particular directive
+      // all parameters here are optional
+      $scope.evaConfigName = {
+
+        // bucketUrl
+
+        // 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)
+        directoryName: '/tmp/',
+
+        useTimestamp: true,
+        useFilename: true,
+
+        // 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: '-'
+      };
+
+      //
+      $scope.evaModel = {};
+    }
+  ]);