<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>File</title>
<link rel="stylesheet" href="/static/style.css">
<style>
label {
display: block;
}
label, button, h4, p {
margin: 2em 2em 0 2em;
}
</style>
</head>
<body>
<p><a href="/"><< Back to main</a></p>
<p>There's a good article on <a href="https://www.ibm.com/docs/en/ibm-mq/8.0?topic=flows-example-sending-file-using-http-request">sending file</a> over HTTP.</p>
<p><b>Work In Progress</b></p>
<form>
<label>File:
<input type="file" name="file" id="input-file" />
</label>
</form>
<script>
const file_input = document.querySelector("#input-file");
const onchange = (ev) => {
const file_list = ev.target.files;
console.log(file_list);
for (const file of file_list) {
let start = 0;
let end = 10;
let blob = file.slice(start, end);
reader.readAsBinaryString(blob);
let search_params = new URLSearchParams();
search_params.set("name", encodeURIComponent(file.name));
search_params.set("lastModified", file.lastModified);
search_params.set("size", file.size);
let url = "/file-upload/initiate?" + search_params.toString();
const request = new XMLHttpRequest();
request.open("POST", url);
request.send();
console.log(url);
}
};
const reader = new FileReader();
reader.onload = (ev) => {
if (ev.target.readyState == FileReader.DONE) {
let result = ev.target.result;
console.log('FileReader done.');
console.log(result);
}
}
file_input.addEventListener('change', onchange);
</script>
</body>
</html>