Ich habe einen Teil eines Posts hier auf SO verwendet (ich kann mich aber nicht daran erinnern), um Dateien und Ordner auf Chrome zu analysieren, aber ich kann nicht dafür sorgen, dass er auf Firefox funktioniert (und um ehrlich zu sein, habe ich es nicht ausprobiert auf anderen, obwohl ich denke, dass es auf Safari auch nicht funktioniert).

Hier sind die 2 Direktiven, ngDrop und input.

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) {
                                // Don,e 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
    };
});

Über die Implementierung, so benutze ich sie:

<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>

Beide Direktiven werden hauptsächlich verwendet, um das ngModel zu füllen.

Hier ist ein Plunkr

Jetzt wenn ich FF ziehe / ablege:TypeError: event.dataTransfer.items is undefined und wenn ich wähle:TypeError: list is null

Was kann ich ändern, damit es auf Chrome und Firefox funktioniert, und warum nicht auch auf anderen Browsern gleichzeitig?