<!--
  - Image source and width, as well as button width, height and colour can be set

{# - Usage -
<file-uploader id="label-uploader" image_src="{{ url_for('static', filename='img/file.svg') }}" image_width="30px" button_width="137px" button_height="50px" button_color="hsl(217, 20%, 35%)">
	<span slot="description">or upload file</span>
</file-uploader>
#}

To get the data from the file upload into your jinja file, subscribe to the `file-upload` event in the js script part:

let textarea = document.getElementById("address_labels_data")
document.addEventListener('file-upload', e => {
	let result = e.detail.result;
	textarea.value = result
	})
-->

<template id="file-uploader">
	<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='output.css') }}">
	<input class="hidden" type="file" id="input-file"/>
	<label class="flex items-center cursor-pointer" for="input-file">
		<img>
		<slot name="description">Choose file</slot>
		<slot name="tool-tip"></slot>
	</label> 
</template>

<script type="module">

class FileUploaderElement extends HTMLElement {
	constructor() {
		super();
		const shadowRoot = this.attachShadow({mode: 'open'});
		const template = document.getElementById('file-uploader');
		const clone = template.content.cloneNode(true);
		this.img = clone.querySelector('img')
		this.img.src = this.getAttribute("image_src");
		this.img.style.width = this.getAttribute("image_width");
		this.uploadButton = clone.querySelector('label')
		this.uploadButton.style.width = this.getAttribute("button_width");
		this.uploadButton.style.height = this.getAttribute("button_height");
		this.uploadButton.style.background = this.getAttribute("button_color")

		let el = clone.getElementById("input-file");

		el.addEventListener("click", (e) => {
			// Needed for Chrome to ensure change event is triggered if the same file is uploaded more than once
			el.value = '';
		})

		el.addEventListener("change", (e) => {
			// Only one file can be selected
			let file = e.currentTarget.files[0];
			var result
            let reader = new FileReader();
            reader.onload = (e) => {
                result = reader.result;
                // if raw bytes
                if(reader.result.startsWith("psbt") || reader.result.startsWith("pset")){
                    result = btoa(reader.result);
                }
                this.dispatchReadResult(result);
            }
            reader.readAsBinaryString(file);
		})

		shadowRoot.appendChild(clone);
	}
	dispatchReadResult(result) {
		this.dispatchEvent(new CustomEvent('file-upload', {
  		bubbles: true,
  		composed: true, // not necessary here, only if the event was dispatched from an element within the FileUploaderElement 
  		detail: {result},
		}));
	}
}	
customElements.define('file-uploader', FileUploaderElement);
</script>
