title: File drag & drop function sample codes seem not to work with IE and FireFox?
body: <p>I am a newbie to ng-file-upload library and trying using it. From the GitHub site at <a href="https://github.com/danialfarid/ng-file-upload" rel="nofollow">https://github.com/danialfarid/ng-file-upload</a>, I picked one of samples named as "<strong>Drop and upload with $watch</strong>: ..." to see how the drop and drop file feature works.  </p>
  
  <p><em>1) If I click on the box containing "Drop pdfs or images here or click to upload" text with titled "Drop File:" <strong>first</strong>: (Note: clicking on this box will open Windows File Explorer dialog automatically).</em></p>
  
  <p>At the pointed  <code>http://jsfiddle.net/danialfarid/s8kc7wg0/400/</code> site, for my Windows laptop, by clicking the box containing "Drop pdfs or images here or click to upload" text with titled "Drop File:", I was able to drag, hold and drop (release mouse) a file with Chrome browser version 48. My target file <strong>did land</strong> on the box after I released the mouse. Upload task did happened afterwards.</p>
  
  <p>However, with FireFox version 44 and IE version 11, I was able to select a file, drag and drop it onto the box. But my target file <strong>did not land</strong> on the box after my drop action. No upload task happened after that.</p>
  
  <p><em>2) If I open Windows File Explorer <strong>first</strong>, and performed select and drag files from that File Explorer dialog first, then sample codes (Drag and Drop functions) work OK with FireFox and IE, but not with Chrome.</em></p>
  
  <p>Please advise. Thank you.</p>
  
  <p>The following are codes I copy exactly given at the above jsfiddle site
  HTML codes:</p>
  
  <pre><code>&lt;div ng-app="fileUpload" ng-controller="MyCtrl"&gt;Username
      &lt;input type="text" ng-model="username"&gt;&lt;br/&gt;&lt;br/&gt;
      watching model:
      &lt;div class="button" ngf-select ng-model="file" ngf-multiple="false"&gt;Select File&lt;/div&gt;
      on file change multiple:
      &lt;div class="button" ngf-select="upload($files)" ngf-multiple="true"&gt;Select File&lt;/div&gt;
      Drop File:
      &lt;div ngf-drop ngf-select ng-model="files" class="drop-box" 
          ngf-drag-over-class="'dragover'" ngf-multiple="true" ngf-allow-dir="true"
          accept="image/*,application/pdf" 
          ngf-pattern="'image/*,application/pdf'"&gt;Drop pdfs or images here or click to upload&lt;/div&gt;
      &lt;div ngf-no-file-drop&gt;File Drag/Drop is not supported for this browser&lt;/div&gt;
      Files:
      &lt;ul&gt;
          &lt;li ng-repeat="f in files" style="font:smaller"&gt;{{f.name}} {{f.$error}} {{f.$errorParam}}&lt;/li&gt;
      &lt;/ul&gt;
      Upload Log:
      &lt;pre&gt;{{log}}&lt;/pre&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS codes:</p>
  
  <pre><code>//inject angular file upload directives and services.
  var app = angular.module('fileUpload', ['ngFileUpload']);
  
  app.controller('MyCtrl', ['$scope', 'Upload', '$timeout', function ($scope, Upload, $timeout) {
      $scope.$watch('files', function () {
          $scope.upload($scope.files);
      });
      $scope.$watch('file', function () {
          if ($scope.file != null) {
              $scope.files = [$scope.file]; 
          }
      });
      $scope.log = '';
  
      $scope.upload = function (files) {
          if (files &amp;&amp; files.length) {
              for (var i = 0; i &lt; files.length; i++) {
                var file = files[i];
                if (!file.$error) {
                  Upload.upload({
                      url: 'https://angular-file-upload-cors-srv.appspot.com/upload',
                      data: {
                        username: $scope.username,
                        file: file  
                      }
                  }).then(function (resp) {
                      $timeout(function() {
                          $scope.log = 'file: ' +
                          resp.config.data.file.name +
                          ', Response: ' + JSON.stringify(resp.data) +
                          '\n' + $scope.log;
                      });
                  }, null, function (evt) {
                      var progressPercentage = parseInt(100.0 *
                              evt.loaded / evt.total);
                      $scope.log = 'progress: ' + progressPercentage + 
                          '% ' + evt.config.data.file.name + '\n' + 
                        $scope.log;
                  });
                }
              }
          }
      };
  }]);
  </code></pre>
  
  <p>CSS codes:</p>
  
  <pre><code>.button {
      -moz-appearance: button;
      /* Firefox */
      -webkit-appearance: button;
      /* Safari and Chrome */
      padding: 10px;
      margin: 10px;
      width: 70px;
  }
  .drop-box {
      background: #F8F8F8;
      border: 5px dashed #DDD;
      width: 200px;
      height: 65px;
      text-align: center;
      padding-top: 25px;
      margin: 10px;
  }
  .dragover {
      border: 5px dashed blue;
  }
  </code></pre>