file-constructor/index.html

<!doctype html>
<!--
Copyright 2014 Google Inc. All Rights Reserved.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="description" content="Sample illustrating the use of the File Constructor.">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>File Constructor Sample</title>

    <!-- Add to homescreen for Chrome on Android -->
    <meta name="mobile-web-app-capable" content="yes">
    <link rel="icon" sizes="192x192" href="../images/touch/chrome-touch-icon-192x192.png">

    <!-- Add to homescreen for Safari on iOS -->
    <meta name="apple-mobile-web-app-title" content="File Constructor Sample">

    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="apple-touch-icon-precomposed" href="../images/apple-touch-icon-precomposed.png">

    <!-- Tile icon for Win8 (144x144 + tile color) -->
    <meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png">
    <meta name="msapplication-TileColor" content="#3372DF">

    <link rel="icon" href="../images/favicon.ico">

    <link rel="stylesheet" href="../styles/main.css">
  </head>

  <body>
    <h1>File Constructor Sample</h1>
    <p>Available in <a href="https://www.chromestatus.com/feature/5731244088229888">Chrome 38+</a></p>

    <p>
      This demo illustrates the use of the
      <a href="http://dev.w3.org/2006/webapi/FileAPI/#file"><code>File constructor</code></a>
      to create references to
      <a href="http://dev.w3.org/2006/webapi/FileAPI/#dfn-file"><code>File</code></a> objects.
    </p>

    <p>
      It also makes use of <code>&lt;a&gt;</code> elements with the
      <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#downloading-resources"><code>download</code></a>
      attribute to provide links to the generated files for download.
    </p>

    <div class="output">
      <p>Download these auto-generated files:</p>
      <ul id="files"></ul>
    </div>

    <!-- // [START code-block] -->
    <script>
      var filesElement = document.querySelector('#files');

      // Some in-memory attributes of the new File objects that will be constructed.
      var fileData = {
        'sample.xml': {
          data: '<test>Hello!</test>',
          type: 'application/xml'
        },
        'sample.csv': {
          data: 'Test1,Test2\nHello1,Hello2',
          type: 'text/csv'
        },
        'sample.json': {
          data: JSON.stringify({test: 'Hello!'}),
          type: 'application/json'
        }
      };

      Object.keys(fileData).forEach(function(name) {
        // This example passes in an array of string data as the first argument to File().
        // The array can also contain ArrayBuffer, ArrayBufferView, Blob, and File instances.
        var file = new File([fileData[name].data], name, {
          type: fileData[name].type,
          lastModified: Date.now()
        });
        // See http://docs.webplatform.org/wiki/apis/file/URL/createObjectURL
        var url = URL.createObjectURL(file, {
          oneTimeOnly: true
        });

        var aElement = document.createElement('a');
        aElement.href = url;
        aElement.download = name;
        aElement.textContent = name;

        var liElement = document.createElement('li');
        liElement.appendChild(aElement);
        filesElement.appendChild(liElement);
      });
    </script>
    <!-- // [END code-block] -->

    <script>
      /* jshint ignore:start */
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
      ga('create', 'UA-53563471-1', 'auto');
      ga('send', 'pageview');
      /* jshint ignore:end */
    </script>
    <!-- Built with love using Web Starter Kit -->
  </body>
</html>