file-drop/file-drop.html at master · chadliu23/file-drop · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!--
    @license
    Copyright (c) 2014 Chad Liu. All rights reserved.
-->
<link rel="import" href="../polymer/polymer.html">

<!--
Element providing file drop event notify.

##### Example

    <file-drop></file-drop>

@element file-drop
@blurb Element providing file drop event notify.
@status alpha
@homepage http://chadliu23.github.io/file-drop
@demo demo/index.html
-->
<dom-module id="file-drop">

  <template>
  <content></content>
  </template>

  <script>

    Polymer({

      is: "file-drop",
      /**
       * The `file-dropped` event is fired whenever file dropped inside
       * <file-drop> element.
       *
       * @event file-dropped
       * @detail {{files: Files}}
       */
      ready: function(){
        this.ondragover = function (e) {
            e.stopPropagation();
            this.progressInvisible = true;
            if( !this.classList.contains("hover") ) {
              this.classList.add("hover");
            }
            return false;
          }
          this.ondragleave = function () {
            if( this.classList.contains("hover") ) {
              this.classList.remove("hover");
            }
            return false;
          }
          this.ondrop = function(event){
            event.preventDefault();
            if( this.classList.contains("hover") ) {
              this.classList.remove("hover");
            }
            this.fire('file-dropped', {files:event.dataTransfer.files});

          }
      },


    });

  </script>

</dom-module>