googlearchive · frankiefu · Jul 1, 2013 · Jun 29, 2013 · Jun 29, 2013 · Jun 29, 2013
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/polymer-view-source-link/index.html b/polymer-view-source-link/index.html
@@ -12,9 +12,9 @@
     <!-- load polymer -->
     <script src="../../polymer/polymer.js"></script>
     <!-- import element-->
-		<link rel="import" href="polymer-view-source-link.html">
+    <link rel="import" href="polymer-view-source-link.html">
   </head>
   <body>
-  	<a is="polymer-view-source-link">View Source</a>
+    <a is="polymer-view-source-link" href="http://example.com">View Source</a>
   </body>
 </html>
diff --git a/polymer-view-source-link/polymer-view-source-link.html b/polymer-view-source-link/polymer-view-source-link.html
@@ -5,9 +5,10 @@
 -->
 <polymer-element name="polymer-view-source-link" target="_blank" extends="a">
   <script>
-		Polymer('polymer-view-source-link', {
+    Polymer('polymer-view-source-link', {
       ready: function() {
-        this.setAttribute('href', 'view-source:' + window.location); 
+        var href = this.getAttribute('href') || window.location;
+        this.setAttribute('href', 'view-source:' + href); 
       }
     });
   </script>

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();