This is an old revision of the document!
File Upload handling!

Make sure you have the '~/folk-uploads' created.
# File uploads - Arcade Jun 11 2024

Wish the web server handles route "/upload" with handler {
    html {
<html>

<body >
    <span id="status">Status</span>
    <input id="file" type="file"/>
    <button id="button"> UPLOAD!! </button>
</body>
<script>
 
const program = "file-upload-handler-" + ([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g, c => (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16));
 
document.getElementById('button').addEventListener('click', function() {
  var files = document.getElementById('file').files;
  if (files.length > 0) {
    getBase64(files[0]);
  }
});


let ws;
let send;

function getBase64(file) {
   var reader = new FileReader();
   reader.readAsDataURL(file);
   reader.onload = function () {
     let base64encoding = reader.result.split(",")[1];
     send(`Claim ${program} has a file ${base64encoding} with filename ${file.name}`);

   };
   reader.onerror = function (error) {
     console.log('Error: ', error);
   };
}
function wsConnect() {
	ws = new WebSocket(window.location.origin.replace("http", "ws") + "/ws");
	send = function(s) { ws.send(s); }
 
	ws.onopen = () => { document.getElementById('status').innerHTML = "<span style=background-color:seagreen;color:white;>Connnected</span>"; };
	ws.onclose = window.onbeforeunload = () => {
	    document.getElementById('status').innerHTML = "<span style=background-color:red;color:white;>Disconnnected</span>";
 
	    send(`Commit { Claim ${program} has no files }`);
	    setTimeout(() => { wsConnect(); }, 1000);
	};
	ws.onerror = (err) => {
	document.getElementById('status').innerText = "Error";
	console.error('Socket encountered error: ', err.message, 'Closing socket');
	ws.close();
	}
	ws.onmessage = (msg) => {
	if (msg.data.startsWith("Error:")) {
		const errorEl = document.getElementById("error");
		if (msg.data === "Error:") {
	errorEl.style.backgroundColor = "";
	errorEl.innerText = "";
		} else {
	errorEl.style.backgroundColor = "#f55";
	errorEl.innerText = msg.data;
		}
	}
	}
};
wsConnect();
 
</script>
</html>
 }
}

Wish $this is titled "File Upload Reciever"
Wish $this is outlined green

When /thing/ claims /thing2/ has a file /x/ with filename /fn/ {
   
   Commit {Wish $this is labelled $fn}

   set fp [open /home/folk/folk-uploads/$fn.base64 w]
   puts -nonewline $fp $x
   close $fp

   exec cat /home/folk/folk-uploads/$fn.base64 | base64 -d > /home/folk/folk-uploads/$fn
   exec rm /home/folk/folk-uploads/$fn.base64
}