Skip to content

Instantly share code, notes, and snippets.

Last active Aug 29, 2021
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")
<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="//"></script>
<link href="//" rel="stylesheet">
<script src="//"></script>
<script src="code.js"></script>
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;
<div class="divPageBody">
<h1>Open File Dialog</h1>
<p><a onclick="openTextFile ()">Click here to choose a file</a>.</p>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment