Import files from Yawim

app/elements/file-sharing/file-drop-behavior.html

@@ -0,0 +1,37 @@
+<script>
+'use strict';
+Chat = window.Chat || {};
+Chat.FileDropBehavior = {
+    attached: function() {
+        var dropZone = this;
+
+        // Optional.   Show the copy icon when dragging over.  Seems to only work for chrome.
+        dropZone.addEventListener('dragover', function(e) {
+            e.stopPropagation();
+            e.preventDefault();
+            e.dataTransfer.dropEffect = 'copy';
+            this.style.transform = 'scale(1.2)';
+        });
+
+        // Get file data on drop
+        dropZone.addEventListener('drop', function(e) {
+            e.stopPropagation();
+            e.preventDefault();
+            var files = e.dataTransfer.files; // Array of all files
+            for (var i = 0; i < files.length; i++) {
+                var file = files[i];
+                var reader = new FileReader();
+                reader.onload = function(e2) {
+                    // finished reading file data.
+                    console.log('file dropped');
+                    this.fire('file-uploaded', {
+                        url: e2.target.result,
+                        name: file.name
+                    });
+                }.bind(this);
+                reader.readAsDataURL(file); // start reading the file data.
+            }
+        });
+    }
+}
+</script>

app/elements/file-sharing/file-sharing-button-behavior.html

@@ -0,0 +1,36 @@
+<script>
+'use strict';
+Chat.FileSharingButtonBehavior = {
+    properties: {
+        file: {
+            type: String
+        }
+    },
+    get fileInput(){
+        var fileInput=document.querySelector('input');
+    },
+    attached: function() {
+        this.$.file.onchange = function(value) {
+            this.file = this.$.file.value;
+            console.log(this.file);
+            var files = this.$.file.files;
+            for (var i = 0; i < files.length; i++) {
+                var file = files[i];
+                var reader = new FileReader();
+                reader.onload = function(e2) {
+                    // finished reading file data.
+                    console.log('file dropped');
+                    this.fire('file-uploaded', {
+                        url: e2.target.result,
+                        name: file.name
+                    });
+                }.bind(this);
+                reader.readAsDataURL(file); // start reading the file data.
+            }
+        }.bind(this);
+    },
+    _upload: function() {
+        this.$.file.click();
+    }
+};
+</script>

app/elements/file-sharing/file-sharing-button.html

@@ -0,0 +1,58 @@
+<link rel="import" href="../../../bower_components/paper-icon-button/paper-icon-button.html">
+<link rel="import" href="file-reader.html">
+<dom-module id="file-sharing-button">
+    <template>
+        <style>
+        :host {
+            display: inline-block;
+        }
+        
+        #file {
+            margin: 0;
+            opacity: 0;
+            padding: 0;
+            position: absolute;
+            top: -10000px;
+        }
+        </style>
+        <paper-icon-button id="btn" icon="chat:attach-file" on-tap="_upload"></paper-icon-button>
+        <input id="file" type="file" value="{{file::input}}">
+    </template>
+    <script>
+    'use strict';
+    Polymer({
+        is: 'file-sharing-button',
+        properties: {
+            file: {
+                type: String
+            }
+        },
+        attached: function() {
+            this.$.file.onchange = function(value) {
+                this.file = this.$.file.value;
+                console.log(this.file);
+
+                var files = this.$.file.files;
+                for (var i = 0; i < files.length; i++) {
+                    var file = files[i];
+                    var reader = new FileReader();
+                    reader.onload = function(e2) {
+                        // finished reading file data.
+                        console.log('file dropped');
+                        this.fire('file-uploaded', {
+                            url: e2.target.result,
+                            name: file.name
+                        });
+                    }.bind(this);
+                    reader.readAsDataURL(file); // start reading the file data.
+                }
+
+
+            }.bind(this);
+        },
+        _upload: function() {
+            this.$.file.click();
+        }
+    });
+    </script>
+</dom-module>

app/elements/file-sharing/file-sharing.html

@@ -0,0 +1,48 @@
+<link rel="import" href="../../../bower_components/paper-dialog/paper-dialog.html">
+<link rel="import" href="file-reader.html">
+<dom-module id="file-sharing">
+    <template>
+        <style>
+        :host {
+            display: block;
+            position: fixed;
+            z-index: 100;
+        }
+        </style>
+        <paper-dialog id="dialog" entry-animation="scale-up-animation" exit-animation="fade-out-animation" with-backdro>
+            <h2>File Received</h2>
+            <p>You received file {{file.name}}</p>
+            <div class="buttons">
+                <paper-button dialog-dismiss>Dismiss</paper-button>
+                <paper-button dialog-confirm on-tap="_download">Download</paper-button>
+            </div>
+        </paper-dialog>
+    </template>
+    <script>
+    'use strict';
+    Polymer({
+        is: 'file-sharing',
+        attached: function() {
+            document.querySelector('x-app').addEventListener('file-received', function(e) {
+                this.fileReceived(e.detail);
+            }.bind(this), false);
+        },
+        fileReceived: function(file) {
+            this.set('file', file);
+            this.$.dialog.open();
+        },
+        _download: function() {
+            var link = document.createElement('a');
+            link.download = this.file.name;
+            // Construct the uri
+            var uri = this.file.url;
+            link.href = uri;
+            document.body.appendChild(link);
+            link.click();
+            // Cleanup the DOM
+            document.body.removeChild(link);
+            //delete link;
+        }
+    });
+    </script>
+</dom-module>

app/elements/file-sharing/share-area.html

@@ -0,0 +1,18 @@
+<link rel="import" href="file-drop-behavior.html">
+<dom-module id="share-area">
+    <template>
+        <style>
+        :host {
+            display: block;
+        }
+        </style>
+        <content></content>
+    </template>
+    <script>
+    'use strict';
+    Polymer({
+        is: 'share-area',
+        behaviors: [Chat.FileDropBehavior]
+    });
+    </script>
+</dom-module>