use webkit file uploading to allow directories

navigator/components/NavDragDrop.js

@@ -18,6 +18,7 @@
  */
 
 import {FileUpload} from "./FileUpload.js";
+import { ModalPrompt } from "./ModalPrompt.js";
 import {NavWindow} from "./NavWindow.js";
 
 export class NavDragDrop {
@@ -33,56 +34,70 @@ export class NavDragDrop {
 		drop_area.addEventListener("drop", this, false);
 		this.drop_area = drop_area;
 		this.nav_window_ref = nav_window_ref;
+		this.modal_prompt = new ModalPrompt();
 	}
 
-	async handleEvent(e) {
+	/**
-		e.preventDefault();
+	 * 
-		e.stopPropagation();
+	 * @param {FileSystemEntry} item 
-		switch(e.type){
+	 * @param {string} path 
-			case "dragenter":
+	 * @returns {Promise<FileUpload[]>}
-				this.drop_area.classList.add("drag-enter");
+	 */
-				break;
+	async scan_files(item, path) {
-			case "dragover":
+		let new_uploads = [];
-				break;
+		if (item.isDirectory) {
-			case "dragleave":
+			if (!path && !await this.modal_prompt.confirm(`Copy whole directory: ${item.fullPath}?`, "", true))
-				this.drop_area.classList.remove("drag-enter");
+				return new_uploads;
-				break;
+			let directoryReader = item.createReader();
-			case "drop":
+			let promise = new Promise((resolve, reject) => {
-				let uploads = [];
+				directoryReader.readEntries(async (entries) => {
-				// console.log(e);
+					for (const entry of entries) {
-				// console.log(e.dataTransfer.files);
+						new_uploads.push(... await this.scan_files(entry, path + item.name + "/"));
-				// if (e.dataTransfer.items) {
-				// 	for (let item of e.dataTransfer.items) {
-				// 		if (item.kind === 'file') {
-				// 			var file = item.getAsFile();
-				// 			if (file.type === "" && file.size !== 0) {
-				// 				await this.nav_window_ref.modal_prompt.alert(file.name + ": Cannot upload folders.");
-				// 				continue;
-				// 			}
-				// 			if (file.size === 0) {
-				// 				var proc = cockpit.spawn(
-				// 					["/usr/share/cockpit/navigator/scripts/touch.py3", this.nav_window_ref.pwd().path_str() + "/" + file.name],
-				// 					{superuser: "try", err: "out"}
-				// 				);
-				// 				proc.done(() => {
-				// 					this.nav_window_ref.refresh();
-				// 				});
-				// 			} else {
-				// 				uploads.push(new FileUpload(file, this.nav_window_ref));
-				// 			}
-				// 		}
-				// 	}
-				// } else {
-					for (let file of e.dataTransfer.files) {
-						console.log(file);
-						// if (file.type === "")
-						// 	continue;
-						uploads.push(new FileUpload(file, this.nav_window_ref));
 					}
-				// }
+					resolve();
-				this.drop_area.classList.remove("drag-enter");
+				});
-				if (uploads.length === 0)
+			})
-					break;
+			await promise;
+		} else {
+			let promise = new Promise((resolve, reject) => {
+				item.file((file) => {
+					resolve(file);
+				})
+			});
+			new_uploads.push(new FileUpload(await promise, this.nav_window_ref, path));
+		}
+		return new_uploads;
+	}
+ 
+	/**
+	 * 
+	 * @param {DataTransferItemList} items 
+	 * @returns {Promise<DataTransferItemList>}
+	 */
+	handle_drop_advanced(items) {
+		return new Promise(async (resolve, reject) => {
+			let uploads = [];
+			for (let i = 0; i < items.length; i++) {
+				let item = items[i]?.webkitGetAsEntry?.() ?? items[i]?.getAsEntry?.() ?? null;
+				let path = "";
+				if (item) {
+					let new_uploads = await this.scan_files(item, path);
+					console.log(new_uploads);
+					uploads.push(... new_uploads);
+				} else {
+					reject();
+				}
+			}
+			resolve(uploads);
+		})
+	}
+
+	/**
+	 * 
+	 * @param {FileUpload[]} uploads 
+	 * @returns {FileUpload[]}
+	 */
+	async handle_conflicts(uploads) {
 		let keepers = [];
 		let requests = {};
 		for (let upload of uploads) {
@@ -102,13 +117,54 @@ export class NavDragDrop {
 				requests
 			)
 			if (responses === null)
-						break;
+				return null;
 			for (let key of Object.keys(responses)) {
 				if (responses[key])
 					keepers.push(key);
 			}
 		}
-				uploads = uploads.filter((upload) => {return keepers.includes(upload.filename)});
+		return uploads.filter((upload) => keepers.includes(upload.filename));
+	}
+	
+	/**
+	 * 
+	 * @param {Event} e 
+	 */
+	async handleEvent(e) {
+		switch(e.type){
+			case "dragenter":
+				e.preventDefault();
+				e.stopPropagation();
+				this.drop_area.classList.add("drag-enter");
+				break;
+			case "dragover":
+				e.preventDefault();
+				e.stopPropagation();
+				break;
+			case "dragleave":
+				e.preventDefault();
+				e.stopPropagation();
+				this.drop_area.classList.remove("drag-enter");
+				break;
+			case "drop":
+				let uploads;
+				let items = e.dataTransfer.items;
+				e.preventDefault();
+				e.stopPropagation();
+				try {
+					uploads = await this.handle_drop_advanced(items);
+				} catch {
+					uploads = [];
+					for (let file of e.dataTransfer.files) {
+						let uploader = new FileUpload(file, this.nav_window_ref);
+						uploader.using_webkit = false;
+						uploads.push(uploader);
+					}
+				}
+				this.drop_area.classList.remove("drag-enter");
+				if (uploads.length === 0)
+					break;
+				uploads = await this.handle_conflicts(uploads);
 				uploads.forEach((upload) => {upload.upload()});
 				break;
 			default: