File upload to v86

[Darin755]

How do you code a file upload to v86? I have the following code so far:

document.getElementById("upload_files").onchange = function() {
	var file = document.getElementById("upload_files").files;
	for(var i = 0;i<file.length;i++) {
		emulator.create_file("/user/"+file[i].name, DATA HERE);
		console.log("uploaded "+file[i].name);
	}
}

I need to figure out how to get the data from file.
Please help . . .

UPDATE 1
So I now have the following code:

document.getElementById("upload_files").onchange = function() {
	var file = document.getElementById("upload_files").files;
	for(var i = 0;i<file.length;i++) {
		var reader = new FileReader();
		reader.onload = function(file) {
			window.testing = file;
			emulator.create_file("/user/"+file.name, file.currentTarget.result);
		
		};
		reader.readAsArrayBuffer(file[i]);
	
		console.log("uploaded "+file[i].name);
	}
}

I don't know how to get the file name and the file itself seems to be garbled.

Update 2
Here's my code:

document.getElementById("upload_files").onchange = function() {
	var file = document.getElementById("upload_files").files;
	for(var i = 0;i<file.length;i++) {
	
		var reader = new FileReader();
		reader.onload = function(file) {
			window.testing = file;
			var encoder = new TextEncoder('UTF-8');
			var f = encoder.encode(file.currentTarget.result);
			emulator.create_file("/user/file", f);
		};
		reader.readAsText(file[i]);
	
		console.log("uploaded "+file[i].name);
	}


}

It works for file upload now I need to figureout a way to get the filename

[Darin755]

So here's my final solution. It a little janky but it works.

	document.getElementById("upload_files").onchange = function() {
		var file = document.getElementById("upload_files").files;
		for(var i = 0;i<file.length;i++) {
			window.filename = file[i].name; //a global variable
			var reader = new FileReader();
			reader.onload = function(file) {
				var encoder = new TextEncoder('UTF-8');
				var f = encoder.encode(file.currentTarget.result);
				emulator.create_file("/user/"+window.filename, f);
				window.filename = undefined; //unset it
			};
			reader.readAsText(file[i]);
			console.log("uploaded "+file[i].name);
		}
	}

}

[Darin755]

If some has a better answer please let me know as this only works for single files

[hello-smile6]

@Darin755 Use showDirectoryPicker if you're using Chromium; that'll let you share entire directories with v86.

[ethanaobrien]

There were some bugs in your code. I just patched it up. ```js document.getElementById("upload_files").onchange = function(e) { var files = e.target.files; for(var i=0;i<files.length;i++) { var reader = new FileReader(); reader.onload = function(file) { return function(e) { var data = (new TextEncoder('UTF-8')).encode(e.target.result); emulator.create_file("/user/"+file.name, data); console.log("uploaded "+file.name); } }(files[i]); reader.readAsText(files[i]); } } ```

Use showDirectoryPicker if you're using Chromium; that'll let you share entire directories with v86.

Or [webkitdirectory](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/webkitdirectory). It’s on everything except internet explorer.

[Darin755]

Thank was the answer I was looking for, Thank You

[hello-smile6]

webkitdirectory seems like it'd be even easier for entire directories.

[Darin755]

It only seems to be in chromium

[Darin755]

@ethanaobrien So I have added it to my project. You can see the exact spot here. Please let me know if you have any issues with me doing this as I can always revert the commit.