File drag and drop functionality in Angular js/MVC not working


I am trying to implement a simple file drag and drop functionality in Angular js/MVC.

I created a directive for the drag and drop.

(function (angular, undefined) {
    'use strict';

    angular.module('fileupload', [])
     .directive("myDirective", function ($parse) {
         return {
             restrict: 'A',
             link: fileDropzoneLink
         function fileDropzoneLink(scope, element, attrs) {
             element.bind('dragover', processDragOverOrEnter);
             element.bind('dragenter', processDragOverOrEnter);
             element.bind('dragend', endDragOver);
             element.bind('dragleave', endDragOver);
             element.bind('drop', dropHandler);

             var onImageDrop = $parse(attrs.onImageDrop);

             //When a file is dropped
             var loadFile = function (files) {
                 scope.uploadedFiles = files;

             function dropHandler(angularEvent) {
                 var event = angularEvent.originalEvent || angularEvent;
                 var files = event.dataTransfer.files;

             function processDragOverOrEnter(angularEvent) {
                 var event = angularEvent.originalEvent || angularEvent;
                 if (event) {
                 event.dataTransfer.effectAllowed = 'copy';
                 return false;

             function endDragOver() {

This is the template

<div class="dropzone" data-my-Directive on-image-drop="$ctrl.fileDropped()">
Drag and drop pdf files here

This is my component code

(function (angular, undefined) {
    'use strict';

    angular.module('test', [])
        .component('contactUs', contactUs());

    function contactUs() {
        ContactUs.$inject = ['$scope', '$http'];
        function ContactUs($scope, $http) {
            var ctrl = this;
            ctrl.files = [];
   = {
                $scope: $scope,
                $http: $http,

        //file dropped
        ContactUs.prototype.fileDropped = function () {
            var ctrl = this;
            var files =$scope.uploadedFiles;
            angular.forEach(files, function (file, key) {

        return {
            controller: ContactUs,
            templateUrl: 'partials/home/contactus/'

Sometimes the drag and drop works absolutely fine without any issue. But some times I get the below issue and the drag and drop does not work and I get the black invalid cursor.

enter image description here

This issue is random and i do not see any errors in the console.

And I also tried other third party components like angular-file-upload and I am seeing the exact same issue with that component also.



Answer updated for pdf preview. The code is available in the same plunker.

References : Excellent solution by @Michael at

In the example above, the response from the http POST is used in “new Blob([response]”. In angular-file-upload library, the “response” would be “fileItem._file” property in “uploader.onAfterAddingFile” function. You can console log to check the data these have , so as to understand it better.

Also please note that if PDf viewer is not enabled in chrome, it has to be enabled using this:


Since you mentioned that you tried with angular-file-upload library, i have created a plunker with it:


<!DOCTYPE html>
    <html ng-app="plunker">
        <meta charset="utf-8" />
        <title>AngularJS Plunker</title>
        <script>document.write('<base href="' + document.location + '" />');</script>
           <link rel="stylesheet" href="" />
        <link rel="stylesheet" href="style.css" />
          <script src=""></script>
        <script data-require="angular.js@1.5.x" src="" data-semver="1.5.11"></script>
        <script src=""></script>
        <script src=""></script>
        <script src="app.js"></script>

      <body ng-controller="MainCtrl">
                      <div class="col-sm-4">

                        <h3>Select files</h3>

                        <div ng-show="uploader.isHTML5">
                            <!-- 3. nv-file-over uploader="link" over-class="className" -->
                          <div class="well my-drop-zone" style="width:300px" nv-file-drop nv-file-over="" uploader="uploader" 
                              Click here or Drag and Drop file
                                 <input type="file" style="visibility:hidden;" nv-file-select nv-file-over="" uploader="uploader" 
                                 filters="syncFilter" multiple/>
                                  <div class="progress" style="margin-bottom: 0;">
                                  <div class="progress-bar" role="progressbar" ng-style="{ 'width': uploader.queue[0].progress + '%' }"></div>

                                  <div ng-show="showAlert" class="alert alert-warning alert-dismissable">
                                    <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
                                     <strong>Clear the existing file before uploading again!!</strong> 





var app = angular.module('plunker', ['angularFileUpload']);

app.controller('MainCtrl', function($scope,FileUploader) {
var uploader = $scope.uploader = new FileUploader();

        // FILTERS

        // a sync filter
            name: 'syncFilter',
            fn: function(item /*{File|FileLikeObject}*/, options) {
                console.log('syncFilter' + this.queue.length);
                return this.queue.length < 1;

        // an async filter
            name: 'asyncFilter',
            fn: function(item /*{File|FileLikeObject}*/, options, deferred) {
                setTimeout(deferred.resolve, 1e3);

uploader.allowNewFiles = true;
  fn: function() {
    return this.allowNewFiles;

        // CALLBACKS

        uploader.onWhenAddingFileFailed = function(item /*{File|FileLikeObject}*/, filter, options) {
  'onWhenAddingFileFailed', item, filter, options);

        uploader.onAfterAddingFile = function(fileItem) {


It is pretty straight forward and i dont get the error you mentioned. We are actually using this library in one of our Projects. I have also added a filter to restrict upload to only 1 file.

Please check this and let me know how it goes or if you have any doubts in the code.

Answered By – Vijay Venugopal Menon

Answer Checked By – Clifford M. (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.