onchange событие не запускается, когда пользователь выбирает пустой каталог

Question

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

Здесь Вы можете найти код для того же HTML файл:

<div ng-app="myApp" ng-controller="myCtrl"> 
    <input id="folder" type="file" onchange="angular.element(this).scope().checkFiles(this.files)" webkitdirectory="" directory="" multiple="" /> 
</div> 

кода Javascript

var app = angular.module('myApp', []); 
app.controller('myCtrl', function($scope) { 

    $scope.checkFiles = function(files) { 
    console.log(files); 

    //add below line of code to trigger onchange event if user select same directory 
    angular.element(document.querySelector('#folder'))[0].value = null; 
    }; 
}); 

Plunker ссылка https://plnkr.co/edit/lDhoShIVgCXLd33mPtbh?p=preview

Письменное код работы, когда выбран каталог имеет какой-либо файл в Это. Но когда я выбираю пустой каталог, он вызывает событие onchange.

Я пробовал много, но не получил оснований для такого поведения.

Одна вещь, которую я заметил, что когда я удалить ниже строки кода

//add below line of code to trigger onchange event if user select same directory 
    angular.element(document.querySelector('#folder'))[0].value = null; 

и выберите папку с некоторыми файлами, а затем выберите пустую directoy OnChange событие становится triggred. Но событие onchange не запускается, если я сначала выбираю пустой каталог при первой попытке.

Необходимо знать, почему событие onchange не запускается для пустого каталога.

Примечание: Пожалуйста, попробуйте этот код на хромовую браузер не поддерживается для других браузеров

Answer 1

Это не выглядит очень «Угловая». Угловой способ состоял бы в том, чтобы манипулировать DOM в directive, а не в вашем контроллере. Поэтому вы можете попробовать директиву браузера файлов, как в этом jsfiddle. В идеале для вашей директивы on-change вы должны назначить ей функцию, например on-change="doSomething()", а затем в вашем контроллере вы можете добавить логику для этой функции. Дополнительный пример см. В разделе this post.

См. this cheat sheet о выполнении вещей Угловой путь.

HTML:

<div ng-controller="parentController"> 
    <p><a ng-click="load('one.tpl')">One</a> | <a ng-click="load('two.tpl')">Two</a></p> 
    <hr> 
    <div ng-include="tpl"></div> 
</div> 

<script type="text/ng-template" id="one.tpl"> 
    <p>Template One</p> 
    <div file-browser> 
     <input type="file" name="upload-file"> 
    </div> 
</script> 

JS:

angular.module('testapp').controller('parentController', function($scope) { 
    $scope.load = function(tpl) { 
     $scope.tpl = tpl; 
    }; 
    $scope.load('one.tpl'); 
}); 
angular.module('testapp').directive('fileBrowser', function() { 
    return { 
     restrict: 'A', 
     replace: true, 
     transclude: true, 
     scope: false, 
     template: 
      '<div class="input-prepend extended-date-picker">'+ 
       '<input type="button" class="btn" value="browse...">'+ 
       '<input type="text" readonly class="override">'+ 
       '<div class="proxied-field-wrap" ng-transclude></div>'+ 
      '</div>', 
     link: function($scope, $element, $attrs, $controller) { 
      var button, fileField, proxy; 
      fileField = $element.find('[type="file"]').on('change', function() { 
       proxy.val(angular.element(this).val()); 
      }); 
      proxy = $element.find('[type="text"]').on('click', function() { 
       fileField.trigger('click'); 
      }); 
      button = $element.find('[type="button"]').on('click', function() { 
       fileField.trigger('click'); 
      }); 
     } 
    }; 
}); 

Answer 2

вход файла ориентирован на выбор файлов. Когда вы выбираете каталог (в Chrome), это эквивалентно выбору всех файлов в дереве файлов (т. Е. Включая файлы каталогов внутри выбранного каталога).

Таким образом, если вы выбрали пустой каталог, это не означает, что нет выбора файла - и, как таковое, нет смысла в событии изменения.

Answer 3

Хром инициализирует объект FileList пустой папкой, по которой причина изменения события не запускается. Я поднял вопрос в хроме https://bugs.chromium.org/p/chromium/issues/detail?id=590715 и был объединен с существующей проблемой https://bugs.chromium.org/p/chromium/issues/detail?id=590715