Функция перетаскивания файлов в Angular JS /MVC не работает

Question

Я пытаюсь реализовать простую функцию перетаскивания файлов в Angular JS /MVC.

Я создал директиву для перетаскивания.

(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;
                 scope.$apply(onImageDrop(scope));
             };

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

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

             function endDragOver() {
                 element.removeClass('dragging');
             }
         }
     });
}(angular));

Это шаблон

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

Это мой код компонента

(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 = [];
         
            ctrl.services = {
                $scope: $scope,
                $http: $http,
            };
        }

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


        return {
            controller: ContactUs,
            templateUrl: 'partials/home/contactus/'
        };
    }
}(angular));

Иногда перетаскивание работает абсолютно без проблем. Но иногда я получаю проблему ниже, и перетаскивание не работает, и я получаю черный недействительный курсор.

Эта проблема является случайной, и я не вижу никаких ошибок в консоли.

И я также попробовал другие сторонние компоненты, такие как angular-file-upload https://github.com/nervgh/angular-file-upload и я вижу точно такую ​​же проблему с этим компонентом.

Answer 1

РЕДАКТИРОВАТЬ:

Ответ обновлен для предварительного просмотра в формате PDF. Код доступен в том же плункере.

Ссылки: Отличное решение от @Michael на /questions/23374951/pokazyivat-blob-pdf-v-uglovom-prilozhenii/23374967#23374967

В приведенном выше примере ответ из http POST используется в "new Blob([response]"). В библиотеке angular-file-upload "response" будет свойством "fileItem._file" в функции "uploader.onAfterAddingFile" Вы можете консоль журнала, чтобы проверить данные, которые они имеют, чтобы лучше понять.

Также обратите внимание, что если просмотрщик PDf не включен в Chrome, его необходимо включить с помощью этого: https://support.google.com/chrome/answer/6213030?hl=en

КОНЕЦ РЕДАКТИРОВАНИЯ

Так как вы упомянули, что пытались использовать библиотеку angular-file-upload, я создал с ней плункер:

http://plnkr.co/edit/jeYg5fIRaC9wuEYSNOux?p=info

HTML:

<!DOCTYPE html>
    <html ng-app="plunker">
      <head>
        <meta charset="utf-8" />
        <title>AngularJS Plunker</title>
        <script>document.write('<base href="' + document.location + '" />');</script>
           <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
        <link rel="stylesheet" href="style.css" />
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script data-require="angular.js@1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
        <script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-file-upload/2.5.0/angular-file-upload.min.js"></script>
        <script src="app.js"></script>
      </head>

      <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" 
                          filters="syncFilter">
                               <label>
                              Click here or Drag and Drop file
                                 <input type="file" style="visibility:hidden;" nv-file-select nv-file-over="" uploader="uploader" 
                                 filters="syncFilter" multiple/>
                                </label> 
                                  <div class="progress" style="margin-bottom: 0;">
                                  <div class="progress-bar" role="progressbar" ng-style="{ 'width': uploader.queue[0].progress + '%' }"></div>
                                  </div>
                                <div>{{uploader.queue[0].file.name}}</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> 
                                  </div>
                          </div>

                        </div>
                      </div>

      </body>

    </html>

JS:

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

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

        // FILTERS

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

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


uploader.allowNewFiles = true;
uploader.filters.push({
  name:'csvfilter',
  fn: function() {
    return this.allowNewFiles;
}
});

        // CALLBACKS

        uploader.onWhenAddingFileFailed = function(item /*{File|FileLikeObject}*/, filter, options) {
            console.info('onWhenAddingFileFailed', item, filter, options);
            $scope.showAlert=true;
        };


        uploader.onAfterAddingFile = function(fileItem) {

  };
});

Это довольно просто, и я не понимаю ошибку, которую вы упомянули. На самом деле мы используем эту библиотеку в одном из наших проектов. Я также добавил фильтр, чтобы ограничить загрузку только одним файлом.

Пожалуйста, проверьте это и дайте мне знать, как это происходит, или если у вас есть какие-либо сомнения в коде.