Angular File Uploader demo

<!DOCTYPE html>
<html data-ng-app='myApp'>
<head>
  <meta charset='utf-8'>
  <title>Index</title>
  <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js'></script>
  <script src='https://rawgit.com/ghostbar/angular-file-uploader/master/angular-file-uploader.js?v=5'></script>

  <script type="text/javascript" charset="utf-8">
    var app = angular.module('myApp', ['file-uploader']);

    app.controller('DemoCtrl', function ($scope, FileUploader) {
      function success (msg) {
        console.log('Success got fired!');
        console.log(msg);
      }
      
      function error (err) {
        if (err.statusText)
          $scope.error = err.statusText
        else
          $scope.error = err;
        console.log('Got an error!')
        console.log(err);
      }
      
      function errorE (err) {
        if (err.statusText)
          $scope.errorE = err.statusText;
        else
          $scope.errorE = err;
        
        console.log('Got an error!');
        console.log(err);
      }
      
      function errorM (err) {
        $scope.errorM = err.statusText;
      }
      
      function notify (percent) {
        $scope.percent = percent;
        console.log('Got notified the percent of upload is:' + percent);
      }
      
      function notifyE (percent) {
        $scope.percentE = percent;
        console.log('Got notified the percent of upload is:' + percent);
      }
      
      function notifyM (percent) {
        $scope.percentM = percent;
      }
      
      $scope.uploadSimple = function () {
        FileUploader.post(
          '/upload',
          document.getElementById('simple-file').files
        ).then(success, error, notify);
      };
        
      $scope.uploadExtra = function () {
        var config = {
          headers: {
            'Authentication': 'Bearer randombearerextra',
            'X-Im-So-Cool': 'I Know'
          },
          data: {
            'field1': 'RandomData',
            'field2': 'Another field with data'
          }
        };
        
        FileUploader.post(
          '/upload',
          document.getElementById('extra-file').files,
          config
        ).then(success, errorE, notifyE);
      };
      $scope.uploadMultiple = function () {
        FileUploader.post(
          '/upload',
          document.getElementById('multiple-file').files
        ).then(success, errorM, notifyM);
      }
        
    });
  </script> 
</head>
<body data-ng-controller='DemoCtrl'>

  <h1>angular-file-uploader</h1>
  <p>Here you can test <code>angular-file-uploader</code>, obviously is gonna throw a 500 error and the success wont run, in both cases, because plnkr does not allow uploads and we are using a random end-point for doing the push. Anyway, a file is going to be uploaded and if you use a big enough file you can see how the progress works (In my case a 1MB file was more than enough)</p>
  
  <p>If you like it, go grab the code at <a href='https://github.com/ghostbar/angular-file-uploader'>github</a> or bower (with <code>bower install angular-file-uploader</code>)!</p>

  <h2>Simple upload</h2>
  <span ng-if='error'>Errors: {{ error }}</span><br>
  <span ng-if='percent'>Percentage being uploaded: {{ percent }}</span>
  <form data-ng-submit='uploadSimple()'>
    <input type='file' id='simple-file'>
    <input type='submit' value='Upload only file'>
  </form>
  
  <h2>Upload call with special config</h2>
  <p>Go check <code>$scope.uploadExtra</code> function and see how to send special headers and even more data on the upload call. You should check the POST /upload call in the Network tab of your web console and should see the extra header "Authentication" with "Bearer randombearerextra" and "X-Im-So-Cool" with "I know" just to show off how to put several headers in the same object.</p>
  <span ng-if='errorE'>Errors?: {{ errorE }}</span>
  <span ng-if='percentE'>Percentage being uploaded: {{ percentE }}</span>
  <form data-ng-submit='uploadExtra()'>
    <input type='file' id='extra-file'>
    <input type='submit' value='Upload file + extra stuff'>
  </form>
  
  <h2>Can I upload multiple files?</h2>
  <p>Fuck yeah! And you don't need to do anything special, just add <code>multiple</code> to the file input!</p>
  <p>Percentage (This is the percentage combined of all the files, there's no way yet to make it individualized and it shouldn't care since all of them are in the same request, not in individualized requests):<br> {{ percentM }}</p>
  <form data-ng-submit='uploadMultiple()'>
    <input type='file' multiple id='multiple-file'>
    <input type='submit' value='Upload a bunch of files'>
  </form>
  
</body>
</html>

# angular-file-uploader

This is a simple service that can be used instead of `$http` for `PUT` and `POST` of files, it's very useful since it has progress report!

Code can be found at <https://github.com/ghostbar/angular-file-uploader> and installed with `bower install angular-file-uploader`.