petersirka/upload.html

## upload.html

<!DOCTYPE html>
<html>
<head>
	<title>Load all files from directory and upload</title>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=11" />
	<meta name="format-detection" content="telephone=no" />
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
	<meta name="robots" content="all,follow" />
	<link href="https://cdn.componentator.com/spa.min@19.css" rel="stylesheet" type="text/css" />
	<script src="https://cdn.componentator.com/spa.min@19.js"></script>
</head>
<body>

	<ui-component name="dropfiles" config="exec:dropfiles" class="hidden">
		Drag &amp; Drop files here
	</ui-component>

	<button onclick="loaddir()">Load</button>

	<script>

		async function readdir(dir, output) {

			if (!output)
				output = [];

			var tmp;

			for await (const entry of dir.values()) {

				var meta = {};
				meta.name = entry.name;
				meta.kind = entry.kind;
				meta.entry = entry;

				if (entry.kind === 'file') {
					tmp = await entry.getFile();
					meta.file = tmp;
					meta.type = tmp.type;
					meta.size = tmp.size;
					meta.sortindex = 2;
					output.push(meta);
				} else if (entry.kind === 'directory') {
					tmp = [];
					meta.items = tmp;
					meta.sortindex = 1;
					output.push(meta);
					await readdir(entry, tmp);
					output.quicksort('sortindex,name');
				}
			}

			output.quicksort('sortindex,name');
			return output;
		}

		async function loaddir() {
			var dir = await showDirectoryPicker();
			var output = await readdir(dir);

			var file = output.last();

			console.log(output);
			console.log(file);
			console.log(await file.file.text());
			console.log(file.file.createWritable)

			// var writer = await dir.getFile(file.file.name, { create: true });
			var writable = await file.entry.createWritable();
			await writable.write('KOKOTKO');
			await writable.close();
		}

		// e.originalEvent.dataTransfer
		function uploadfiles(datatransfer, upload, done) {

			var webkitupload = false;
			var draggedfiles = datatransfer.files;
			var items = datatransfer.items;
			var unuploaded = [];
			var arr = [];

			for (let m of items) {
				let item = m.webkitGetAsEntry();
				arr.push(item);
			}

			var traverse = function(entry, path, callback) {

				let directory = entry.createReader();
				let files = [];
				let dirs = [];

				directory.readEntries(function(entries) {
					for (let i = 0; i < entries.length; i++) {
						let item = entries[i];
						if (item.isDirectory)
							dirs.push(item);
						else
							files.push(item);
					}

					let data = new FormData();

					data.append('path', path);

					files.wait(function(item, next, index) {
						item.file(function(file) {
							data.append('file' + index, file);
							next();
						});
					}, function() {
						upload(data, function() {
							dirs.wait(function(entry, next) {
								traverse(entry, path + entry.name + '/', next);
							}, callback);
						});
					});
				});

			};

			arr.wait(function(entry, next) {

				if (entry == null) {
					webkitupload = true;
					next();
					return;
				}

				if (entry.isDirectory) {
					traverse(entry, '/' + entry.name + '/', next);
				} else {
					unuploaded.push(entry);
					next();
				}

			}, function() {

				let data = new FormData();
				let is = false;

				data.append('path', '/');

				unuploaded.wait(function(item, next, index) {
					item.file(function(file) {
						is = true;
						data.append('file' + index, file);
						next();
					});
				}, function() {
					if (is)
						upload(data, done);
					else
						done();
				});
			});

		}

		function dropfiles(files, evt) {
			uploadfiles(evt.originalEvent.dataTransfer, function(fd, next) {
				UPLOAD('/upload/', fd, next);
			}, () => console.log('DONE'));
		}

	</script>

</body>
</html>

	<!DOCTYPE html>
	<html>
	<head>
	<title>Load all files from directory and upload</title>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=11" />
	<meta name="format-detection" content="telephone=no" />
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
	<meta name="robots" content="all,follow" />
	<link href="https://cdn.componentator.com/spa.min@19.css" rel="stylesheet" type="text/css" />
	<script src="https://cdn.componentator.com/spa.min@19.js"></script>
	</head>
	<body>

	<ui-component name="dropfiles" config="exec:dropfiles" class="hidden">
	Drag & Drop files here
	</ui-component>

	<button onclick="loaddir()">Load</button>

	<script>

	async function readdir(dir, output) {

	if (!output)
	output = [];

	var tmp;

	for await (const entry of dir.values()) {

	var meta = {};
	meta.name = entry.name;
	meta.kind = entry.kind;
	meta.entry = entry;

	if (entry.kind === 'file') {
	tmp = await entry.getFile();
	meta.file = tmp;
	meta.type = tmp.type;
	meta.size = tmp.size;
	meta.sortindex = 2;
	output.push(meta);
	} else if (entry.kind === 'directory') {
	tmp = [];
	meta.items = tmp;
	meta.sortindex = 1;
	output.push(meta);
	await readdir(entry, tmp);
	output.quicksort('sortindex,name');
	}
	}

	output.quicksort('sortindex,name');
	return output;
	}

	async function loaddir() {
	var dir = await showDirectoryPicker();
	var output = await readdir(dir);

	var file = output.last();

	console.log(output);
	console.log(file);
	console.log(await file.file.text());
	console.log(file.file.createWritable)

	// var writer = await dir.getFile(file.file.name, { create: true });
	var writable = await file.entry.createWritable();
	await writable.write('KOKOTKO');
	await writable.close();
	}

	// e.originalEvent.dataTransfer
	function uploadfiles(datatransfer, upload, done) {

	var webkitupload = false;
	var draggedfiles = datatransfer.files;
	var items = datatransfer.items;
	var unuploaded = [];
	var arr = [];

	for (let m of items) {
	let item = m.webkitGetAsEntry();
	arr.push(item);
	}

	var traverse = function(entry, path, callback) {

	let directory = entry.createReader();
	let files = [];
	let dirs = [];

	directory.readEntries(function(entries) {
	for (let i = 0; i < entries.length; i++) {
	let item = entries[i];
	if (item.isDirectory)
	dirs.push(item);
	else
	files.push(item);
	}

	let data = new FormData();

	data.append('path', path);

	files.wait(function(item, next, index) {
	item.file(function(file) {
	data.append('file' + index, file);
	next();
	});
	}, function() {
	upload(data, function() {
	dirs.wait(function(entry, next) {
	traverse(entry, path + entry.name + '/', next);
	}, callback);
	});
	});
	});

	};

	arr.wait(function(entry, next) {

	if (entry == null) {
	webkitupload = true;
	next();
	return;
	}

	if (entry.isDirectory) {
	traverse(entry, '/' + entry.name + '/', next);
	} else {
	unuploaded.push(entry);
	next();
	}

	}, function() {

	let data = new FormData();
	let is = false;

	data.append('path', '/');

	unuploaded.wait(function(item, next, index) {
	item.file(function(file) {
	is = true;
	data.append('file' + index, file);
	next();
	});
	}, function() {
	if (is)
	upload(data, done);
	else
	done();
	});
	});

	}

	function dropfiles(files, evt) {
	uploadfiles(evt.originalEvent.dataTransfer, function(fd, next) {
	UPLOAD('/upload/', fd, next);
	}, () => console.log('DONE'));
	}

	</script>

	</body>
	</html>