<commit_before><!--

@Author: <NAME>

Inspirations : 
  - http://www.html5rocks.com/en/tutorials/file/dndfiles/
Colors :
  - http://www.flatuicolorpicker.com/
-->

<link rel="import" href="../polymer/polymer.html">

<dom-module id="file-reader">
  <template>
    <style>
      :host{
        display: block;
        text-align:center;
      }
      #dropzone{
        position:relative;
        padding:10px;
        background: repeating-linear-gradient(
          -45deg,
          #ECF0F1, /*PORCELAIN*/
          #ECF0F1 10px,
          #ececec 10px, /*WHITE SMOKE */
          #ececec 20px
        );
        border: dashed 1px gray;
      }
      #files{
        display:none
      }
      #NotSupportedCard{
        color: red;
        border-color:red;
        border-style: solid;
        border-width: 2px;
      }
      #uploadbutton {
        background: #4183D7; /*ROYAL BLUE*/
        color: white;
        margin-bottom:8px;
      }
      #uploadbutton:hover {
        background: #6BB9F0; /* MALIBU */
      }
    </style>
    
    <!--  
      * Message displayed if the web browser doesn't support the File API.
      * @param fileApiSupported Set into ready function.
    -->
    <div hidden$="{{fileApiSupported}}">
      <paper-card id="NotSupportedCard">
          <div class="card-content">
            <p>Your current browser does not support the W3C File API.</p>
          </div>
      </paper-card>
    </div>
    
    <!-- Content displayed if the web browser support the File API -->
    <div hidden$="{{!fileApiSupported}}">
      <div id="dropzone">  
        <center>
          <paper-button id="uploadbutton" raised />Upload</paper-button>
        </center>   
        <input type="file" id="files" name="files[]" multiple />
        <center> 
          <p>Or drop your file here.</p>
        </center>  
      </div>
    </div>
  </template>

  <script>
      /* global Polymer */
      
/**
`<file-reader>` is a graphical element that upload a file, via button or drag&drop, and read it as a text-file when asked to.

Example:

    <file-reader id="filereaderElem"></file-reader>
    <script>
      (function() {
        var reader = document.getElementById('filereaderElem');
        reader.returnFunction = function(){
          var callback = {
            onload: function(e){ console.log(e.target.result); },
            onprogress: function(){},
            onerror: function(){}  
          }  
          reader.getSample(0,callback);
        }
      })();
    <script>  
 
Source files: [file-reader](https://github.com/TaaabsElements/file-reader) 
 
@demo demo/index.html
*/
      Polymer({
        is: 'file-reader',
        
        listeners: {
          'files.change': '_handleFileSelect',
          'dropzone.dragover': '_handleFileDrag',
          'dropzone.drop': '_handleFileDrop',
          'uploadbutton.click': '_handleUploadClick'
        },
        
        properties: {
        
          /**
          * The list of files retrieved via the input `#file`.
          *
          * @attribute files
          * @type Array
          */
          files: {
            type: Array,
            notify: true,
            value : function(){<commit_msg>Documentation<commit_after><!--

@Author: <NAME>

Inspirations : 
  - http://www.html5rocks.com/en/tutorials/file/dndfiles/
Colors :
  - http://www.flatuicolorpicker.com/
-->

<link rel="import" href="../polymer/polymer.html">

<dom-module id="file-reader">
  <template>
    <style>
      :host{
        display: block;
        text-align:center;
      }
      #dropzone{
        position:relative;
        padding:10px;
        background: repeating-linear-gradient(
          -45deg,
          #ECF0F1, /*PORCELAIN*/
          #ECF0F1 10px,
          #ececec 10px, /*WHITE SMOKE */
          #ececec 20px
        );
        border: dashed 1px gray;
      }
      #files{
        display:none
      }
      #NotSupportedCard{
        color: red;
        border-color:red;
        border-style: solid;
        border-width: 2px;
      }
      #uploadbutton {
        background: #4183D7; /*ROYAL BLUE*/
        color: white;
        margin-bottom:8px;
      }
      #uploadbutton:hover {
        background: #6BB9F0; /* MALIBU */
      }
    </style>
    
    <!--  
      * Message displayed if the web browser doesn't support the File API.
      * @param fileApiSupported Set into ready function.
    -->
    <div hidden$="{{fileApiSupported}}">
      <paper-card id="NotSupportedCard">
          <div class="card-content">
            <p>Your current browser does not support the W3C File API.</p>
          </div>
      </paper-card>
    </div>
    
    <!-- Content displayed if the web browser support the File API -->
    <div hidden$="{{!fileApiSupported}}">
      <div id="dropzone">  
        <center>
          <paper-button id="uploadbutton" raised />Upload</paper-button>
        </center>   
        <input type="file" id="files" name="files[]" multiple />
        <center> 
          <p>Or drop your file here.</p>
        </center>  
      </div>
    </div>
  </template>

  <script>
      /* global Polymer */
      
/**
`<file-reader>` is a graphical element that upload a file, via button or drag&drop, and read it as a text-file when asked to.

Example:

    <file-reader id="filereaderElem"></file-reader>
    <script>
      (function() {
        var reader = document.getElementById('filereaderElem');
        reader.returnFunction = function(){
          var callback = {
            onload: function(e){ console.log(e.target.result); },
            onprogress: function(){},
            onerror: function(){}  
          }  
          reader.getSample(0,callback);
        }
      })();
    <script>  
 
Source files: <a href="https://github.com/TaaabsElements/file-reader" target="_blank">file-reader</a>
 
@demo demo/index.html
*/
      Polymer({
        is: 'file-reader',
        
        listeners: {
          'files.change': '_handleFileSelect',
          'dropzone.dragover': '_handleFileDrag',
          'dropzone.drop': '_handleFileDrop',
          'uploadbutton.click': '_handleUploadClick'
        },
        
        properties: {
        
          /**
          * The list of files retrieved via the input `#file`.
          *
          * @attribute files
          * @type Array
          */
          files: {
            type: Array,
            notify: true,
            value : function(){
{'fraction_non_alphanumeric': 0.1374223602484472, 'fraction_numerical': 0.008695652173913044, 'mean_word_length': 1.7466950959488272, 'pattern_counts': {'":': 0, '<': 79, '<?xml version=': 0, '>': 79, 'https://': 2, 'lorem ipsum': 0, 'www.': 4, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2707638', 'n_tokens_mistral': 1972, 'n_tokens_neox': 1906, 'n_words': 433}