Skip to content

Instantly share code, notes, and snippets.

@scripting
Last active Aug 29, 2021
Embed
What would you like to do?
Local file-chooser dialog in HTML and JavaScript. This app opens a text file on the local computer and displays the file text in the JavaScript console.
function readFile (file) {
var url = window.URL.createObjectURL (file);
var reader = new FileReader ();
reader.onload = function (e) {
var filetext = reader.result;
console.log (filetext);
}
reader.readAsText (file);
}
function openDialogCommand (fileTypes) {
var theDialog = $("<input type=\"file\" accept=\"" + fileTypes + "\" style=\"display: none;\">");
$(theDialog).change (function (event) {
if (this.files.length > 0) {
readFile (this.files [0]);
}
});
$("body").append (theDialog);
$(theDialog).trigger ("click");
}
function openTextFile () {
openDialogCommand (".html,.txt,.xml,.json,.opml")
}
<html>
<head>
<title>Open File Dialog</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="//s3.amazonaws.com/scripting.com/code/includes/jquery-1.9.1.min.js"></script>
<link href="//s3.amazonaws.com/scripting.com/code/includes/bootstrap.css" rel="stylesheet">
<script src="//s3.amazonaws.com/scripting.com/code/includes/bootstrap.min.js"></script>
<script src="code.js"></script>
<style>
body {
font-family: Ubuntu;
font-size: 18px;
background-color: whitesmoke;
}
.divPageBody {
width: 60%;
margin-top: 50px;
margin-left: auto;
margin-right: auto;
margin-bottom: 400px;
}
p {
margin-top: 25px;
line-height: 140%;
}
a {
cursor: pointer;
}
</style>
</head>
<body>
<div class="divPageBody">
<h1>Open File Dialog</h1>
<p><a onclick="openTextFile ()">Click here to choose a file</a>.</p>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment