genothomas/file-to-html.html

## file-to-html.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SRT Reader</title>
    <!--    drag-n-drop: https://www.smashingmagazine.com/2018/01/drag-drop-file-uploader-vanilla-js/-->
</head>
<style>
    /**br hack from https://stackoverflow.com/a/28310011/191246**/
    br {
        content: "";
        margin: 2em;
        display: block;
        font-size: 24%;
    }

    form {
        margin: 1em auto;
        width: 100%;
    }

    .box {
        margin: 1em auto;
        width: 70%;
        max-width: 70%;
        -webkit-box-shadow: rgba(29, 36, 23, 0.386719) -2px 4px 17px 0px;
        -moz-box-shadow: rgba(29, 36, 23, 0.386719) -2px 4px 17px 0px;
        box-shadow: rgba(29, 36, 23, 0.386719) -2px 4px 17px 0px;
        -webkit-border-radius: 11px;
        -moz-border-radius: 11px;
        border-radius: 11px;
    }

    #rendered_markup {
        padding: 1em;
    }

    body {
        padding-left: 3em;
    }

    * {
        font-family: "Droid Sans", Helvetica, sans-serif;
        line-height: 1.2em;
    }

    textarea {
        margin: .5em;
        border: none;
        width: 95%;
        padding: .5em
    }

    .btn-submit {
        margin: 1em;
        text-align: right;
        background-color: #44c767;
        color: white;
        border-radius: 28px;
        border: 1px solid #18ab29;
        display: inline-block;
        cursor: pointer;
        font-size: 17px;
        padding: 16px 31px;
        text-decoration: none;
        text-shadow: 0px 1px 0px #2f6627;
    }

    .btn-submit:hover {
        background-color: #5cbf2a;
    }

    .btn-submit:active {
        position: relative;
        top: 1px;
    }

    #drop-area.highlight {
        border: 5px dotted green;
        background: lightgreen;
    }

    #fileUpload {
        display: none;
    }

    .hint {
        font-size: 70%;
        color: darkgray;
    }

</style>
<body>
<div class="box">
    <div id="rendered_markup">✍️</div>
</div>
<div class="box">
    <div id="drop-area">

        <form id="frm" name="frm" action="">
        <textarea id="txt" name="txt" rows="15" cols="100">
        </textarea>
            <br>
            <div style="text-align: center">
                <input type="file" id="fileUpload" multiple accept="*" onchange="handleFiles(this.files)">
                <input class="btn-submit" type="submit" value="Render" onclick="render(); return false;">
                <br><label class="hint" for="fileUpload">paste or drag a file..</label>
            </div>
        </form>
    </div>
</div>
<script>
    function render(e) {
        document.getElementById('rendered_markup').innerHTML = '<p>' + document.frm.txt.value.replace(/(?:\r\n|\r|\n)+/g, '<br>')
                .replace(/#ffffff/g, '#2c7cf4')
                .replace(/#00ffff/g, '#56aa03')
            + '</p>';
    }

    var dropArea = document.getElementById('drop-area');

    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
        dropArea.addEventListener(eventName, preventDefaults, false)
    })

    function preventDefaults(e) {
        e.preventDefault()
        e.stopPropagation()
    }

    ;['dragenter', 'dragover'].forEach(eventName => {
        dropArea.addEventListener(eventName, highlight, false)
    })

    ;['dragleave', 'drop'].forEach(eventName => {
        dropArea.addEventListener(eventName, unhighlight, false)
    })

    function highlight(e) {
        dropArea.classList.add('highlight')
    }

    function unhighlight(e) {
        dropArea.classList.remove('highlight')
    }

    dropArea.addEventListener('drop', handleDrop, false)

    function handleDrop(e) {
        var dt = e.dataTransfer
        var files = dt.files
        getFiles(files);
    }

    function getFiles(files) {
        if (files) {
            placeFileContent(
                document.getElementById('txt'),
                files.item(0))
        }
    }

    function placeFileContent(target, file) {
        readFileContent(file).then(content => {
            target.value = content
        }).then(() => {
            render();
        }).catch(error => console.log(error))
    }

    function readFileContent(file) {
        const reader = new FileReader()
        return new Promise((resolve, reject) => {
            reader.onload = event => resolve(event.target.result)
            reader.onerror = error => reject(error)
            reader.readAsText(file)
        })
    }

</script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>SRT Reader</title>
	<!-- drag-n-drop: https://www.smashingmagazine.com/2018/01/drag-drop-file-uploader-vanilla-js/-->
	</head>
	<style>
	/br hack from https://stackoverflow.com/a/28310011/191246/
	br {
	content: "";
	margin: 2em;
	display: block;
	font-size: 24%;
	}

	form {
	margin: 1em auto;
	width: 100%;
	}

	.box {
	margin: 1em auto;
	width: 70%;
	max-width: 70%;
	-webkit-box-shadow: rgba(29, 36, 23, 0.386719) -2px 4px 17px 0px;
	-moz-box-shadow: rgba(29, 36, 23, 0.386719) -2px 4px 17px 0px;
	box-shadow: rgba(29, 36, 23, 0.386719) -2px 4px 17px 0px;
	-webkit-border-radius: 11px;
	-moz-border-radius: 11px;
	border-radius: 11px;
	}

	#rendered_markup {
	padding: 1em;
	}

	body {
	padding-left: 3em;
	}

	* {
	font-family: "Droid Sans", Helvetica, sans-serif;
	line-height: 1.2em;
	}

	textarea {
	margin: .5em;
	border: none;
	width: 95%;
	padding: .5em
	}

	.btn-submit {
	margin: 1em;
	text-align: right;
	background-color: #44c767;
	color: white;
	border-radius: 28px;
	border: 1px solid #18ab29;
	display: inline-block;
	cursor: pointer;
	font-size: 17px;
	padding: 16px 31px;
	text-decoration: none;
	text-shadow: 0px 1px 0px #2f6627;
	}

	.btn-submit:hover {
	background-color: #5cbf2a;
	}

	.btn-submit:active {
	position: relative;
	top: 1px;
	}

	#drop-area.highlight {
	border: 5px dotted green;
	background: lightgreen;
	}

	#fileUpload {
	display: none;
	}

	.hint {
	font-size: 70%;
	color: darkgray;
	}

	</style>
	<body>
	<div class="box">
	<div id="rendered_markup">✍️</div>
	</div>
	<div class="box">
	<div id="drop-area">

	<form id="frm" name="frm" action="">
	<textarea id="txt" name="txt" rows="15" cols="100">
	</textarea>
	<br>
	<div style="text-align: center">
	<input type="file" id="fileUpload" multiple accept="*" onchange="handleFiles(this.files)">
	<input class="btn-submit" type="submit" value="Render" onclick="render(); return false;">
	<br><label class="hint" for="fileUpload">paste or drag a file..</label>
	</div>
	</form>
	</div>
	</div>
	<script>
	function render(e) {
	document.getElementById('rendered_markup').innerHTML = '<p>' + document.frm.txt.value.replace(/(?:\r\n\|\r\|\n)+/g, '<br>')
	.replace(/#ffffff/g, '#2c7cf4')
	.replace(/#00ffff/g, '#56aa03')
	+ '</p>';
	}

	var dropArea = document.getElementById('drop-area');

	['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
	dropArea.addEventListener(eventName, preventDefaults, false)
	})

	function preventDefaults(e) {
	e.preventDefault()
	e.stopPropagation()
	}

	;['dragenter', 'dragover'].forEach(eventName => {
	dropArea.addEventListener(eventName, highlight, false)
	})

	;['dragleave', 'drop'].forEach(eventName => {
	dropArea.addEventListener(eventName, unhighlight, false)
	})

	function highlight(e) {
	dropArea.classList.add('highlight')
	}

	function unhighlight(e) {
	dropArea.classList.remove('highlight')
	}

	dropArea.addEventListener('drop', handleDrop, false)

	function handleDrop(e) {
	var dt = e.dataTransfer
	var files = dt.files
	getFiles(files);
	}

	function getFiles(files) {
	if (files) {
	placeFileContent(
	document.getElementById('txt'),
	files.item(0))
	}
	}

	function placeFileContent(target, file) {
	readFileContent(file).then(content => {
	target.value = content
	}).then(() => {
	render();
	}).catch(error => console.log(error))
	}

	function readFileContent(file) {
	const reader = new FileReader()
	return new Promise((resolve, reject) => {
	reader.onload = event => resolve(event.target.result)
	reader.onerror = error => reject(error)
	reader.readAsText(file)
	})
	}

	</script>
	</body>
	</html>