bwt-uploader.html

<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../paper-progress/paper-progress.html">
<link rel="import" href="../iron-icons/iron-icons.html">
<link rel="import" href="../iron-ajax/iron-ajax.html">
<link rel="import" href="../paper-dialog/paper-dialog.html">
<link rel="import" href="../paper-button/paper-button.html">
<link rel="import" href="bwt-progress.html">
<link rel="import" href="bwt-image-preview.html">
<link rel="import" href="bwt-upload-behavior.html">


<!--

`bwt-uploader` is a drag and drop upload component for images and pdfs file with support for preview of uploaded files.

### Styling

The following custom properties are available for styling:


Custom property | Description | Default
----------------|-------------|----------
`--preview-border` | Border of preview | `1px dahsed #dbdbdb`
`--preview-width` | Width of preview area | `250px`
`--preview-height` | Height of preview area | `250px`
`--progress-bar-color` | Progress bar color | `#03a9f4`
`--progress-bar-height` | Progress bar color | `5px`
`--primary-text-color` | Description text color | `#9b9b9b`
`--secondary-text-color`| Browse text color | `#1976d3`,
`--progress-error-color` | Progress bar error and error text color | `#f40303`

### Installation

Install with bower

    bower install bwt-uploader

If you want to save it in bower.json file, remember to add flag --save

    bower install --save bwt-uploader

@element bwt-uploader
@demo demo/index.html
-->


<dom-module id="bwt-uploader">
  <template>
    <style type="text/css" is="custom-style">
    :host {
        display: flex;
        font: normal 14px/20px "Helvetica Neue","Helvetica","Arial","Microsoft YaHei New","Microsoft Yahei","SimSun","STXihei",sans-serif;
        --primary-text-color:#9b9b9b;
        --secondary-text-color:#1976d3;
        color: #464440;
    }

    .template-div-droptext{
      align-self:center;
      order: 2;
      padding: .43em .57em;
      margin: 0 1em;
      color: #9b9b9b;
      font-size: 1.0em;
    }

    #UploadBorder {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
    }

    span.placeholder-text {
      color: var(--primary-text-color,var(--primary-text-color));
    }
    span.template-span-button {
      cursor: pointer;
      color: var(--secondary-text-color,var(--secondary-text-color));
    }
    div.template-div-delete:hover {
      cursor: pointer;
    }
    </style>
    <iron-ajax id="ajaxElement" url$="[[target]]" content-type="application/json" method$="[[method]]" handle-as="json" on-error="_handleError" headers$='[[headers]]' body$="[[body]]" on-response="_handleResponse"></iron-ajax>
    <paper-dialog id="dialog" modal>
         <h2>Are you sure ?</h2>
         <div class="buttons">
             <paper-button id="trueButton" on-tap="_confirmDelete" dialog-confirm autofocus>Yes</paper-button>
             <paper-button dialog-dismiss>No</paper-button>
         </div>
     </paper-dialog>
    <div id="UploadBorder">
          <bwt-image-preview id="preview"
                  error="{{error}}"
                  placeholder="[[placeholder]]"
                  theme="[[theme]]"
                  height$="[[height]]"
                  image="[[image]]"
                  file="[[file]]"
                  custom-class="[[customClass]]"
          >
          </bwt-image-preview>
          <div class="template-div-droptext">
              <span class="placeholder-text"> [[uploadText]] or <span class="template-span-button" on-click="_fileClick" alt="Upload" title="upload file" raised>Browse</span> it from your computer</span>
              <div  id="delete-button" class="template-div-delete" on-click="_deleteItem" hidden="[[_hideDelete]]">
                  <iron-icon icon="icons:clear" title="Remove Item"></iron-icon>
                  <span> Delete Item</span>
              </div>
              <bwt-progress-bar file="[[file]]" error="[[error]]"></bwt-progress-bar>
          </div>
          <input type="file" id="fileInput" on-change="_fileChange" hidden accept="[[acceptedFileTypes]]">
    </div>
  </template>

  <script>
    Polymer({
      is: 'bwt-uploader',

      /**
     * Fired when a response is received.
     *
     * @event bwt-uploader-response
     */

     /**
    * Fired when the confirm button is clicked on delete
    *
    * @event bwt-uploader-delete
    */

    /**
   * Fired when the whole component is reset to initial state
   *
   * @event bwt-uploader-reset
   */


      properties: {
        /**
         * Ajax end point where the file should upload to eg: /api/image/upload
         **/
        target: {
          type:String,
          value: ''
        },
        /**
        * Request type, PUT Method can be placed instead of POST
        **/
        method: {
          type:String,
          value: 'POST',
          reflectToAttribute:true
        },
        /**
        * Additional Headers, empty by default
        **/
        headers: {
          type:Object,
          value: {},
          notify:true,
          reflectToAttribute:true
        },
         // Object which contains the response as well as any other properties to be passed on to the api
        body:{
          type:Object,
          value:{},
          notify:true
        },
        /** Plceholder text, not a lot to do but we thought it might be nice to have something just in case **/
        uploadText: {
          type:String,
          value:'Drag your file to this area',
          notify:true
        },
        /**Accepted File Types, The uploader is meant only for images and documents */
        acceptedFileTypes: {
          type:String,
          value:'image/jpg,image/jpeg,image/png,image/bmp'
        },
        /** Maximum accepted File size in Kilo Bytes **/
        maxFileSize: {
          type:Number,
          value:1000
        },
        /**
        *  Set to true if the image uploaded is to be resized if the height is found to be greater than the height property below
        **/
        resize : {
            type:Boolean,
            value:false,
            notify:true
        },
        /**
        *
          Height of resized image in pixels, width will be adjusted proptionally
        **/
        height: {
          type:Number,
          value: null
        },
        /**
        * a value that the uploader expects to be data binded to
        **/
        value: {
          type:Object,
          value: {}
        },

        _hideDelete: {
          type:Boolean,
          reflectToAttribute:true,
          notify:true,
          value:true
        }
     },
     behaviors: [BwtUploadBehavior],
     ready:function() {
       var uploadBorder = this.$.UploadBorder;
       this._hideDelete = true;
       this.toggleClass('enabled', true, uploadBorder);
       this.ondragover = function(e) {
           e.stopPropagation();
           e.preventDefault();
           this.toggleClass('hover', true, uploadBorder);
           // Workaround for allowgin drop from Chome's download footer on OSX
           // See https://bugs.chromium.org/p/chromium/issues/detail?id=234931
           var effect = e.dataTransfer && e.dataTransfer.dropEffect;
           var effectAllowed = e.dataTransfer && e.dataTransfer.effectAllowed;
           if (effect === 'none' && effectAllowed !== 'none') {
               e.dataTransfer.dropEffect = effectAllowed === 'move' ? 'move' : 'copy'
           }
           // end of workaround
           return false;
       }

       this.ondragleave = function(e) {
           this.toggleClass('hover', false, uploadBorder);
           e.preventDefault();
       }
       this.ondrop = function(event) {
           event.preventDefault();
           this._removeImg();
           this.toggleClass('hover', false, uploadBorder);
          this._uploadFile(event.dataTransfer.files);
       }
     },
     _fileClick: function(){
       var elem = this.$.fileInput;
       if (elem && document.createEvent) {
           var evt = document.createEvent('MouseEvents');
           evt.initEvent('click', true, false);
           elem.dispatchEvent(evt);
       }
     },
     _deleteItem: function(e){
       window.document.body.appendChild(this.$.dialog);
       this.$.dialog.open();
     },
     _confirmDelete: function(e){
       this._removeImg();
     },
     _removeImg: function(e) { 
       this.$.preview.image="";
       this.set('file',{});
       this.error = '';
       this.set('body',{});
       this.notifyPath('file');
       this.notifyPath('body');
       this.notifyPath('error');
       this._hideDelete = true;
       this.fire('delete',{"deleted":true});
     },
     _fileChange: function(e) {
       this._hideDelete = true;
       var files = e.target.files;
       this._removeImg();
       if(files.length) this._uploadFile(files);
       this.$.fileInput.value = "";
     },
     _handleResponse:function(e){
        this.file.progress = 100;
        this.notifyPath('file.progress');
        this.set('body.response',e.detail.response);
        this.notifyPath('body');
        this.error = '';
        this.set('file.complete', true);
        this._hideDelete = false;
        this.fire('bwt-uploader-response',e.detail.response);
      },
     _handleError:function(e){
        this.file.progress = 80; // Means Error occured
        this.notifyPath('file.progress');
        this.file.error = true;
        this.notifyPath('file.error');
        this._hideDelete = false;
        this.error = e.detail.request.xhr.response ? e.detail.request.xhr.response.msg : "Error occured";
        this.fire('bwt-uploader-error',e.detail.request.xhr.response);
      },
      reset: function(){
        this._hideDelete = true;
        this.set('file', {});
        this.image = '';
        this.error = '';
        this.fire('bwt-uploader-reset',{ reset: true});
      }
    });
  </script>
</dom-module>