---
title: "Reading a local file with the File API"
layout: default
section: example
---

<ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active">
        <a href="#load-result" aria-controls="load-result" role="tab" data-toggle="tab">
            result
        </a>
    </li>
    <li role="presentation">
        <a href="#load-js" aria-controls="load-js" role="tab" data-toggle="tab">
            js code
        </a>
    </li>
    <li role="presentation">
        <a href="#load-html" aria-controls="load-html" role="tab" data-toggle="tab">
            html code
        </a>
    </li>
</ul>
<div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="load-result">
        <div class="show-example">
            {% include_relative read-local-file-api.inc/read.html %}
        </div>
    </div>
    <div role="tabpanel" class="tab-pane" id="load-js">
{% highlight js %}
{% include_relative read-local-file-api.inc/read.js %}
{% endhighlight %}
    </div>
    <div role="tabpanel" class="tab-pane" id="load-html">
{% highlight html %}
{% include_relative read-local-file-api.inc/read.html %}
{% endhighlight %}
    </div>
</div>

<div id="error_block" class="alert alert-danger hidden">
  You will need a recent browser to use this demo :(
</div>
<script type="text/javascript">
(function () {
  if (!window.FileReader || !window.ArrayBuffer) {
    $("#error_block").removeClass("hidden").addClass("show");
    return;
  }

{% include_relative read-local-file-api.inc/read.js %}

})();
</script>