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

<link rel="import" href="../../bower_components/paper-dialog/paper-dialog.html">
<link rel="import" href="../../bower_components/paper-button/paper-button.html">
<link rel="import" href="../../bower_components/neon-animation/animations/scale-up-animation.html">
<link rel="import" href="../../bower_components/neon-animation/animations/fade-out-animation.html">
<link rel="import" href="../../bower_components/iron-pages/iron-pages.html">
<link rel="import" href="../../bower_components/paper-spinner/paper-spinner.html">
<dom-module id="file-receiver">
    <template>
        <style>
        :host {
            display: block;
        }
        
        #dialog,
        #download {
            width: 300px;
            z-index: 101;
        }
        
        .filename {
            word-break: break-all;
            word-break: break-word;
        }
        </style>
        <paper-dialog id="dialog" entry-animation="scale-up-animation" exit-animation="fade-out-animation" with-backdrop modal>
            <h2>Download File</h2>
            <p><b class="filename">{{file.name}}</b></p>
            <div class="buttons">
                <paper-button dialog-dismiss on-tap="_decline">Discard</paper-button>
                <paper-button dialog-confirm on-tap="_accept" autofocus>Download</paper-button>
            </div>
        </paper-dialog>
        <paper-dialog id="download" entry-animation="scale-up-animation" exit-animation="fade-out-animation" with-backdrop modal>
            <h2>File Received</h2>
            <p>Open File or Right Click and "Save as"...</p>
            <div class="buttons">
                <paper-button dialog-dismiss>Discard</paper-button>
                <a href="{{dataUri}}" target="_blank">
                    <paper-button dialog-confirm autofocus>Open File</paper-button>
                </a>
            </div>
        </paper-dialog>
    </template>
    <script>
    'use strict';
    (function() {
        Polymer({
            is: 'file-receiver',
            attached: function() {
                this.async(function() {
                    app.conn.addEventListener('file-offer', function(e) {
                        this.file = e.detail;
                        this.$.dialog.open();
                    }.bind(this), false);
                    app.conn.addEventListener('file-received', function(e) {
                        this._fileReceived(e.detail);
                    }.bind(this), false);
                    app.conn.addEventListener('file-declined', function(e) {
                        app.displayToast('User declined file ' + e.detail.name);
                    }.bind(this), false);
                    app.conn.addEventListener('upload-complete', function(e) {
                        app.displayToast('User received file ' + e.detail.name);
                    }.bind(this), false);
                    app.conn.addEventListener('upload-error', function(e) {
                        app.displayToast('The other device did not respond. Please try again.');
                    }.bind(this), false);
                }, 200);
            },
            _fileReceived: function(file) {
                this.downloadURI(file);
            },
            _decline: function() {
                app.conn.decline(this.file);
            },
            _accept: function() {
                app.conn.accept(this.file);
            },
            downloadURI: function(file) {
                var link = document.createElement('a');
                var uri = (window.URL || window.webkitURL).createObjectURL(file.blob);
                if (typeof link.download !== 'undefined') {
                    //download attribute is supported
                    link.href = uri;
                    link.download = file.name || 'blank';
                    document.body.appendChild(link);
                    link.click();
                    document.body.removeChild(link);
                } else {
                    this.dataUri = uri;
                    this.$.download.open();
                }
            }
        });
    }());
    </script>
</dom-module>