Merge pull request #9 from ebidel/polymer-file

Adding polymer-file
googlearchive · Jul 1, 2013 · d2c46e5 · d2c46e5
2 parents 63c81ac + 15612a0
commit d2c46e5
Show file tree

Hide file tree

Showing 5 changed files with 215 additions and 0 deletions.
diff --git a/polymer-file/index.html b/polymer-file/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>polymer-file</title>
+  <script src="../../polymer/polymer.js"></script>
+  <link rel="import" href="polymer-file.html">
+</head>
+<body>
+  <polymer-file auto readas="text"></polymer-file>
+
+  <p>Read result:</p>
+  <textarea cols="20" rows="5"></textarea>
+
+  <script>
+    document.addEventListener('WebComponentsReady', function() {
+      var pfile = document.querySelector('polymer-file');
+      pfile.blob = new Blob(['abc123'], {type: 'text/plain'});
+      //pfile.auto = true;
+      //pfile.read();
+
+      pfile.addEventListener('polymer-result', function(e) {
+        document.querySelector('textarea').value = e.detail.result;
+      });
+    });
+  </script>
+</body>
+</html>
diff --git a/polymer-file/polymer-file.html b/polymer-file/polymer-file.html
@@ -0,0 +1,138 @@
+<!--
+Copyright 2013 The Polymer Authors. All rights reserved.
+Use of this source code is governed by a BSD-style
+license that can be found in the LICENSE file.
+-->
+
+<!--
+/**
+ * @module Polymer Elements
+ */
+
+/**
+ * @class polymer-file
+ *
+ * polymer-file provides File API operations.
+ *
+ * Examples:
+ *
+ *     <polymer-file id="file" readas="dataurl" 
+                     on-polymer-result="handleResult"></polymer-file>
+ *     ...
+ *     this.$.file.blob = new Blob(['abc', {type: 'text/plain'}]);
+ *     this.$.file.read();
+ *
+ *     ---
+ *
+ *     <polymer-file id="file" readas="arraybuffer" auto
+ *                   result="{{result}}"></polymer-file>
+ *     ...
+ *     this.$.file.blob = new Blob(['abc', {type: 'text/plain'}]);
+ */
+ /**
+  * Fired when a file read has complete.
+  * 
+  * @event polymer-result
+  * @param {Object} detail
+  * @param {Object} detail.result The result of the read.
+  */
+  /**
+  * Fired if there is an error in the file read.
+  * 
+  * @event polymer-error
+  * @param {Object} detail
+  * @param {Object} detail.error Information on the error.
+  */
+-->
+<polymer-element name="polymer-file" attributes="blob result auto readas">
+<template>
+  <style>
+    @host {
+      :scope { display: none; }
+    }
+  </style>
+</template>
+<script>
+Polymer('polymer-file', {
+  /**
+   * Contains the result of a read operation.
+   *
+   * @attribute result
+   * @type Blob|File
+   * @default null
+   */
+  result: null,
+  /**
+   * The Blob-like object to read.
+   *
+   * @attribute blob
+   * @type Blob|File
+   * @default null
+   */
+  blob: null,
+  /**
+   * If true, automatically performs the file read (if a blob has been set).
+   *
+   * @attribute auto
+   * @type boolean
+   * @default false
+   */
+  auto: false,
+  /**
+   * The format the result should be returned as. One of 'arraybuffer', 'text',
+   * 'dataurl', 'binarystring'. 
+   *
+   * @attribute readas
+   * @type string
+   * @default 'text'
+   */
+  readas: 'text',
+  blobChanged: function() {
+    // result is set at end of microtask in read. This won't call resultChanged.
+    this.result = null;
+    if (this.auto) {
+      this.read();
+    }
+  },
+  resultChanged: function() {
+    this.fire('polymer-result', {result: this.result});
+  },
+  read: function() {
+    // Send back same result if blob hasn't changed.
+    if (this.result || !this.blob) {
+      // Wrap in asyncMethod for situations where read() is called immediately.
+      this.asyncMethod(function() {
+        this.fire('polymer-result', {result: this.result});
+      });
+      return;
+    }
+
+    // TODO: reader.abort() a in-flight read.
+    var reader = new FileReader();
+    reader.onload = function(e) {
+      this.result = e.target.result;
+    }.bind(this);
+    reader.onerror = function(e) {
+      this.fire('polymer-error', {error: e.target.error});
+    }.bind(this);
+
+    switch(this.readas) {
+      case 'dataurl':
+        reader.readAsDataURL(this.blob);
+        break;
+      case 'arraybuffer':
+        reader.readAsArrayBuffer(this.blob);
+        break;
+      case 'binarystring':
+        reader.readAsBinaryString(this.blob);
+        break;
+      case 'text':
+        // Default to text.
+      default:
+        reader.readAsText(this.blob);
+        break;
+    }
+  }
+});
+</script>
+</polymer-element>
diff --git a/test/html/polymer-file.html b/test/html/polymer-file.html
@@ -0,0 +1,40 @@
+<!doctype html>
+<html>
+  <head>
+    <title>polymer-file</title>
+    <script src="../../../polymer/polymer.js"></script>
+    <script src="../../../polymer/tools/test/htmltest.js"></script>
+    <script src="../../node_modules/chai/chai.js"></script>
+    <link rel="import" href="../../polymer-file/polymer-file.html">
+  </head>
+  <body>
+
+    <polymer-file auto readas="text"></polymer-file>
+
+    <script>
+      var assert = chai.assert;
+      document.addEventListener('WebComponentsReady', function() {
+        var DATA = 'abc123';
+
+        var pfile = document.querySelector('polymer-file');
+
+        assert.isNull(pfile.blob);
+        assert.isTrue(pfile.auto);
+        assert.equal(pfile.readas, 'text');
+        assert.isNull(pfile.result, ".auto doesn't start a read");
+
+        pfile.blob = new Blob([DATA], {type: 'text/plain'});
+
+        pfile.addEventListener('polymer-result', function(e) {
+          assert.isDefined(e.detail.result);
+          assert.isString(e.detail.result, 'Result is a text string');
+          assert.equal(e.detail.result, DATA, 'Result correct data');
+          assert.equal(pfile.result, DATA, '.result was set correctly');
+
+          done();
+        });
+        //pfile.read();
+      });
+    </script>
+  </body>
+</html>
diff --git a/test/js/polymer-file.js b/test/js/polymer-file.js
@@ -0,0 +1,9 @@
+/*
+ * Copyright 2013 The Polymer Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style
+ * license that can be found in the LICENSE file.
+ */
+
+htmlSuite('polymer-file', function() {
+  htmlTest('html/polymer-file.html');
+});
diff --git a/test/runner.html b/test/runner.html
@@ -29,6 +29,7 @@
     <script src="js/polymer-localstorage.js"></script>
     <script src="js/polymer-meta.js"></script>
     <script src="js/polymer-collapse.js"></script>
+    <script src="js/polymer-file.js"></script>
     <!-- -->
     <script>
       mocha.run();