ng-file-upload

Angular files upload directive

by Yakir Perlin

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/danialfarid-angular-file-upload/12.0.1/ng-file-upload-shim.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/danialfarid-angular-file-upload/12.0.1/ng-file-upload.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div ng-app="fileUpload" ng-controller="MainController">
	<div ng-if="progress">
  <div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="{{progress}}" aria-valuemin="0" aria-valuemax="100" style="width: {{progress}};">
      {{progress}}
    </div>
  </div>
  <hr>
  <ul>
    <li ng-repeat="f in gFiles" style="font:smaller">{{f.name}}</li>
  </ul>
	</div>

  <div class="dropzone" ng-hide="progress" ngf-drop ngf-select ng-model="gFiles" ngf-pattern="'image/*'" ngf-multiple="true" ngf-drag-over-class="'dragover'">
    <div class="sm-hidden">
      <h3>Drag photos here</h3>
      <h3>or</h3>
    </div>
    <p><span class="btn btn-primary">Select photots from your computer</span></p>
    <p ngf-no-file-drop>File Drag/Drop is not supported for this browser</p>
    <p><small>Accepts jpgs up to 500MB each</small></p>

  </div>
  <!-- end .dropzone -->


</div>

SCSS

body {
  padding: 15px;
}

.dropzone {
  padding-top: 120px;
  padding-bottom: 95px;
  position: relative;
  overflow: hidden;
  background-color: #f4f2ef;
  border: 1px dashed #b8b8b8;
  text-align: center;
  color: #656d78;
  &.dragover {
    border-color: blue;
  }
}

.btn-primary {
  color: #fff;
  background-color: #60b8d4;
  border-color: #60b8d4;
}

JavaScript

(function(angular) {
  'use strict';
  angular
    .module('fileUpload', ['ngFileUpload'])
    .controller('MainController', MainController);

  MainController.$inject = ['$scope', 'Upload', '$timeout'];
  function MainController($scope, Upload, $timeout) {
    $scope.$watch('gFiles', function() {
      $scope.upload($scope.gFiles);
    });
    $scope.upload = function(gFiles) {
      if (gFiles && gFiles.length) {
        for (var i = 0; i < gFiles.length; i++) {
          var file = gFiles[i];
          if (!file.$error) {
            Upload.upload({
                url: 'https://api.cloudinary.com/v1_1/yakir/upload',
                data: {
                  file: file,
                  upload_preset : "unsigned"
                },
                headers: {
                x_usertoken : "testt34d62346a23476a2343264r" 
                }
                
              })
              .then(function(response) {
                $timeout(function() {});
              }, function(response) {
                console.log('Error status: ' + response.status);
              }, function(evt) {
                var progressPercentage = parseInt(100.0 *
                  evt.loaded / evt.total);
                $scope.progress = progressPercentage + '% ';
              });
          }
        }
      }
    }
  }
})(window.angular);