-
-
Save genothomas/0250876b87832ad416caeb0f3186fb39 to your computer and use it in GitHub Desktop.
Render the contents of a text file on a web page; accept files drag-and-drop
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment