Ordner Hochladen mit Angular Js

Modernen Browser unterstützen das Datei-und Verzeichnis-Einträge API die es ermöglicht die Handhabung von Verzeichnissen (Ordnern). Zu der Zeit des Schreibens, dieser funktioniert in Chrome, Firefox, Edge und Safari TP (kein alten IE-Unterstützung).

Haben Sie mindestens zwei Möglichkeiten, um dies zu implementieren (brownie-Punkte für beides, für die beste UX!).

Methode 1: Verwenden von Datei-Eingang

Geben die standard - input element, die macht zu handhaben, Verzeichnisse über die webkitdirectory Attribut:

<input
    #folderInput
    type="file"
    (change)="filesPicked(folderInput.files)"
    webkitDirectory
>

Hinweis: die oben genannten HTML-snippet davon ausgegangen, Gewinkelt 2+, aber man kann leicht tun die gleiche Sache in den Winkel-1

folderInput.files wird eine flache Liste aller Dateien innerhalb des Ordners, keine Notwendigkeit, um rekursiv zu Fuss den Baum oder etwas ähnliches. Einfach Durchlaufen und die Dateien in einer einfachen Schleife wie diese:

function filesPicked(files) {
    for (let i = 0; i < files.length; i++) {
        const file = files[i];
        const path = file.webkitRelativePath.split('/');
        //upload file using path
        ...
    }
}

Eigentum webkitRelativePath, wie der name schon sagt, enthält einen Pfad der Datei relativ zum Vorgänger-Verzeichnis der Benutzer ausgewählt hat.

Methode 2: Verwenden von drag & drop

Einem anderen Teil der gleichen Datei-und Verzeichnis-Einträge API ist DataTransferItem.webkitGetAsEntry() das gibt einen FileSystemFileEntry oder FileSystemDirectoryEntry. Wenn es ein directlry, Sie können es über eine FileSystemDirectoryReader abgerufen werden durch aufrufen von FileSystemDirectoryEntry.createReader(). Hier ist ein kurzes Beispiel für die Handhabung der drop-Ereignis:

function drop(event) {
    const items = event.dataTransfer.items;
    for (let i = 0; i < items.length; i++) {
        const item = items[i];
        if (item.kind === 'file') {
            const entry = item.webkitGetAsEntry();
            if (entry.isFile) {
                 return new Promise((resolve, reject) => {
                    entry.file( 
                        file => {
                            resolve(file);
                        },
                        err => {
                            reject(err);
                        }
                    );
                });
            } else if (entry.isDirectory) {
                const directoryReader = entry.createReader();
                return new Promise((resolve, reject) => {
                    directoryReader.readEntries(
                        entries => {
                            resolve(entries);
                        },
                        err => {
                            reject(err);
                        }
                    );
                });
            }
        }
    }
}

Mein Kollege schrieb ein kurzer Artikel erläutert den Ansatz im detail (disclaimer: ich arbeite für das Unternehmen).

Hier eine voll funktionsfähige Plunkr demo aus dem Artikel: https://plnkr.co/edit/rFC9Ln

InformationsquelleAutor Dmitry Pashkevich

ng-Datei-upload ist eine bekannte AngularJS Datei-upload-Modul.

Er spricht über mehrere Datei-uploads. Nicht sicher, ob seine genau, was Sie wollen.

Hier ist der link ...

https://github.com/danialfarid/ng-file-upload/blob/master/README.md#user-content--usage

InformationsquelleAutor danday74