file-uploader.html

<link rel="import" href="../polymer/polymer-element.html">
<link rel="import" href="file-uploader-progress-overlay.html">
<link rel="import" href="file-uploader-completed-overlay.html">

<!--
`file-uploader`

@demo demo/index.html
-->
<dom-module id="file-uploader">
  <template>

    <file-uploader-progress-overlay
      id="progressOverlay"
      on-stop="cancelUpload"
      uploading-files="[[uploadingFiles]]"
      on-overlay-close-animation-finish="_onProgressOverlayAnimatedOut"></file-uploader-progress-overlay>

    <file-uploader-completed-overlay
      id="completedOverlay"
      on-overlay-close-animation-finish="_uploadStart"></file-uploader-completed-overlay>

  </template>

  <script>
    
    class FileUploader extends Polymer.Element {

      static get is() {return 'file-uploader';}

      static get properties() {
        return {

          /**
          * Files that are currently being uploaded.
          * It's a Map where keys are files and values are upload details.
          */
          uploadingFiles: {
            type: Map,
            readOnly: true,
            value: _ => {
              return new Map();
            }
          },

          // @optional
          url: String,

          // @optional
          method: {
            type: String,
            value: 'POST',
          },

          // @optional
          headers: Object,

          uploading: {
            type: Boolean,
            readOnly: true,
            value: false,
            notify: true,
          },

          // Current XMLHTTPRequest
          _currentXHR: Object

        };
      }

      /**
      * Add a single file to the uploading queue.
      * 
      * @param {!File}
      */
      addFile(file, xhrParamsPromise) {
        if (file.constructor.name === 'FileList') {
          for (const f of file) {
            this.addFile(f);
          }
          return;
        }

        if (file && !this._isFileOnQueue(file)) {
          this.uploadingFiles.set(file, {xhrParamsPromise, state: 'queued'});

          if (!this.uploading) {
            this._uploadStart();
          }
        }
      }

      cancelUpload() {
        if (this.uploading) {
          if (this._currentXHR) {
            this._currentXHR.abort();
          }
          this._uploadEnd({canceled: true});
        }
      }

      _onProgressOverlayAnimatedOut() {
        this.$.completedOverlay.opened = true;
      }

      _uploadStart() {
        if (this.uploading || !this.uploadingFiles.size) {
          return;
        }

        if (this.$.completedOverlay.opened) {
          this.$.completedOverlay.opened = false;
        } else {
          this._setUploading(true);
          this.$.progressOverlay.opened = true;
          this._resumeQueue();
          this.dispatchEvent(new CustomEvent('upload-start'));
        }
      }

      _resumeQueue() {
        let nextQueued;

        for (const [file, detail] of this.uploadingFiles) {
          if (detail.state === 'queued') {
            nextQueued = {file, detail};
            break;
          }
        }
        
        if (nextQueued) {
          this._uploadFile(nextQueued.file, nextQueued.detail);
        } else {
          this._uploadEnd();
        }
      }

      _uploadFile(file, detail) {
        if (!this.uploading) {
          return;
        }

        this.$.progressOverlay.currentFile = file;

        (detail.xhrParamsPromise || Promise.resolve({})).then(xhrParams => {
          xhrParams.file = file;

          return this._xhr(xhrParams).then(response => {
            const data = {file, url: response.url};

            detail.state = 'uploaded';
            this.dispatchEvent(new CustomEvent('file-uploaded', {
              detail: {file, detail}
            }));
            return data;
          });
        }).catch(error => {
          detail.state = 'failed'; // failed
          detail.error = error;
          this.dispatchEvent(new CustomEvent('error', {
            detail: {file, detail}
          }));
          return error;
        }).then(_ => {
          this._resumeQueue();
        });
      }

      _uploadEnd(canceled = false) {
        if (!this.uploading) {
          return;
        }

        this._setUploading(false);
        const files = [];

        for (const [file, detail] of this.uploadingFiles) {
          if (detail.state === 'uploaded') {
            files.push(file);
          }
        }

        this.$.completedOverlay.addFiles(files); 
        this.uploadingFiles.clear();
        this.$.progressOverlay.opened = false;

        let eventName = canceled ? 'upload-canceled' : 'upload-end';
        this.dispatchEvent(new CustomEvent(eventName, {
          detail: {files}
        }));
      }

      _isFileOnQueue(file) {
        let result = false;

        for (let [f, detail] of this.uploadingFiles) {
          if (f.name === file.name && f.size === file.size) {
            result = true;
            break;
          }
        }

        return result;
      }

      _xhr({file, url = this.url, method = this.method, headers = this.headers} = {}) {
        return new Promise((resolve, reject) => {
          if (!url) {
            return reject(new Error('file-uploader requires an URL'));
          }

          if (!file) {
            return reject(new Error('file-uploader requires a file'));
          }

          const xhr = new XMLHttpRequest();

          xhr.addEventListener('loadend', _ => {
            if (xhr.status >= 200 && xhr.status < 300) {
              resolve({file, url});
            } else {
              reject(xhr.statusText);
            }
          });

          xhr.addEventListener('error', event => {
            reject(event.currentTarget.response);
          });

          xhr.open(method, url, true);

          if (headers) {
            const constructorName = headers.constructor.name;
            if (constructorName === 'Headers') {
              headers.forEach(xhr.setRequestHeader.bind(xhr));
            } else if (constructorName === 'Object') {
              Object.keys(headers).forEach(name => {
                xhr.setRequestHeader(name, headers[name]);
              });
            } else {
              return reject(
                new Error('Invalid headers. Object or Header instance allowed'));
            }
          }

          xhr.send(file);
          this._currentXHR = xhr;
        });
      }

    }

    customElements.define(FileUploader.is, FileUploader);

  </script>
</dom-module>