0
Я использовал часть из сообщения здесь, на SO (я не могу вспомнить об этом), чтобы анализировать файлы и папки в Chrome, но я не могу заставить его работать на Firefox (и, честно говоря, я не пробовал это на других, хотя я думаю, что он тоже не работает на сафари).Выбор и удаление файлов и/или папок для разбора
Вот 2 директивы, ngDrop и ввод.
angular.module('myApp').directive("ngDrop", function($rootScope) {
var link = function($scope, elements, attr, ngModel) {
var parseInput = function(event) {
var list = [];
$scope.count = 0;
var toParse = [];
for (var i = 0; i < event.dataTransfer.items.length; i++) {
toParse.push(event.dataTransfer.items[i].webkitGetAsEntry());
}
var traverse_directory = function(entry) {
var reader = entry.createReader();
// Resolved when the entire directory is traversed
return new Promise(function executer(resolve_directory) {
var iteration_attempts = [];
(function read_entries() {
// According to the FileSystem API spec, readEntries() must be called until
// it calls the callback with an empty array. Seriously??
reader.readEntries(function(entries) {
if (!entries.length) {
// Done iterating this particular directory
resolve_directory(Promise.all(iteration_attempts));
} else {
// Add a list of promises for each directory entry. If the entry is itself
// a directory, then that promise won't resolve until it is fully traversed.
iteration_attempts.push(Promise.all(entries.map(function(entry) {
if (entry.isFile) {
list.push(entry);
return entry;
} else {
return traverse_directory(entry);
}
})));
// Try calling readEntries() again for the same dir, according to spec
read_entries();
}
});
})();
});
};
var updateNgModel = function() {
var files = [], count = 0;
for (var i = 0; i < list.length; i++) {
list[i].file(function(file) {
files.push(file);
count++;
if (count === list.length) {
ngModel.$setViewValue(files);
}
});
}
};
for (var j = 0; j < toParse.length; j++) {
if (toParse[j].isFile) {
list.push(toParse[j]);
} else if (toParse[j].isDirectory) {
$scope.count++;
traverse_directory(toParse[j]).then(function() {
$scope.count--;
if ($scope.count == 0) {
updateNgModel();
}
});
}
}
if ($scope.count == 0) {
updateNgModel();
}
}
elements[0].ondrop = function(event) {
event.stopPropagation();
event.preventDefault();
// ... styling
parseInput(event);
};
elements[0].ondragover = function(event) {
event.preventDefault();
};
};
return {
restrict: 'A',
require:"^ngModel",
link: link
};
});
// select file on input
angular.module('myApp').directive("input", function($rootScope) {
var link = function($scope, elements, attr, ngModel) {
if (attr.type && attr.type.toLowerCase() === 'file') {
elements[0].onchange = function(event) {
var list = event.__files_ || (event.target && event.target.files);
var files = [];
for (var i = 0; i < list.length; i++) {
files.push(list[i]);
}
ngModel.$setViewValue(files);
};
}
};
return {
restrict: 'E',
require:"^ngModel",
link: link
};
});
О реализации, это то, как я использую их:
<div class="dropzone" ng-model="files" ng-drop>
<input type="file" ng-model="files" webkitdirectory multiple>
<h2><i class="fa fa-upload"></i> Drop Images Here !</h2>
<div>Or just click to select files.</div>
</div>
Обе директивы в основном используются для заполнения ngModel.
Теперь, когда я перетащить/падение в FF: TypeError: event.dataTransfer.items is undefined и когда я выбираю: TypeError: list is null
Что я могу изменить, чтобы заставить его работать как на Chrome и Firefox, и почему нет, также в других браузерах одновременно?
Не уверен 'angularjs' частей; [этот ответ] (http://stackoverflow.com/a/36828612) должен разрешить чтение каталогов и файлов частей Вопроса. – guest271314