image-file-uploader.js File Reference

Define WebComponent: ImageFileUploader, register it as <image-file-uploader /> More...

Detailed Description

Define WebComponent: ImageFileUploader, register it as <image-file-uploader />

Classes
class	ImageFileUploader
	WebComponent which displays an image, and also supports uploading a new image to Google Drive via drag n' drop, or a file picker window. More...

Variables
var	RetryHandler
RetryHandler prototype	retry
RetryHandler prototype	reset
RetryHandler prototype	nextInterval_
RetryHandler prototype	getRandomInt_
var	MediaUploader
MediaUploader prototype	upload
MediaUploader prototype	sendFile_
MediaUploader prototype	resume_
MediaUploader prototype	extractRange_
MediaUploader prototype	onContentUploadSuccess_
MediaUploader prototype	onContentUploadError_
MediaUploader prototype	onUploadError_
MediaUploader prototype	buildQuery_
MediaUploader prototype	buildUrl_

Variable Documentation

buildQuery_

MediaUploader prototype buildQuery_

Initial value:

= function(params) {
  params = params || {};
  return Object.keys(params)
    .map(function(key) {
      return encodeURIComponent(key) + "=" + encodeURIComponent(params[key]);
    })
    .join("&");
}

buildUrl_

MediaUploader prototype buildUrl_

Initial value:

= function(id, params, baseUrl) {
  var url = baseUrl || "https://www.googleapis.com/upload/drive/v2/files/";
  if (id) {
    url += id;
  }
  var query = this.buildQuery_(params);
  if (query) {
    url += "?" + query;
  }
  return url;
}

extractRange_

MediaUploader prototype extractRange_

Initial value:

= function(xhr) {
  var range = xhr.getResponseHeader("Range");
  if (range) {
    this.offset = parseInt(range.match(/\d+/g).pop(), 10) + 1;
  }
}

getRandomInt_

RetryHandler prototype getRandomInt_

Initial value:

= function(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min);
}

MediaUploader

var MediaUploader

Initial value:

= function(options) {
  var noop = function() {};
  this.file = options.file;
  this.contentType =
    options.contentType || this.file.type || "application/octet-stream";
  this.metadata = options.metadata || {
    title: this.file.name,
    mimeType: this.contentType,
  };
  this.token = options.token;
  this.onComplete = options.onComplete || noop;
  this.onProgress = options.onProgress || noop;
  this.onError = options.onError || noop;
  this.offset = options.offset || 0;
  this.chunkSize = options.chunkSize || 0;
  this.retryHandler = new RetryHandler();

  this.url = options.url;
  if (!this.url) {
    var params = options.params || {};
    params.uploadType = "resumable";
    this.url = this.buildUrl_(options.fileId, params, options.baseUrl);
  }
  this.httpMethod = options.fileId ? "PUT" : "POST";
}

nextInterval_

RetryHandler prototype nextInterval_

Initial value:

= function() {
  var interval = this.interval * 2 + this.getRandomInt_(0, 1000);
  return Math.min(interval, this.maxInterval);
}

onContentUploadError_

MediaUploader prototype onContentUploadError_

Initial value:

= function(e) {
  if (e.target.status && e.target.status < 500) {
    this.onError(e.target.response);
  } else {
    this.retryHandler.retry(this.resume_.bind(this));
  }
}

onContentUploadSuccess_

MediaUploader prototype onContentUploadSuccess_

Initial value:

= function(e) {
  if (e.target.status == 200 || e.target.status == 201) {
    this.onComplete(e.target.response);
  } else if (e.target.status == 308) {
    this.extractRange_(e.target);
    this.retryHandler.reset();
    this.sendFile_();
  } else {
    this.onContentUploadError_(e);
  }
}

onUploadError_

MediaUploader prototype onUploadError_

Initial value:

= function(e) {
  this.onError(e.target.response); 
}

reset

RetryHandler prototype reset

Initial value:

= function() {
  this.interval = 1000;
}

resume_

MediaUploader prototype resume_

Initial value:

= function() {
  var xhr = new XMLHttpRequest();
  xhr.open("PUT", this.url, true);
  xhr.setRequestHeader("Content-Range", "bytes */" + this.file.size);
  xhr.setRequestHeader("X-Upload-Content-Type", this.file.type);
  if (xhr.upload) {
    xhr.upload.addEventListener("progress", this.onProgress);
  }
  xhr.onload = this.onContentUploadSuccess_.bind(this);
  xhr.onerror = this.onContentUploadError_.bind(this);
  xhr.send();
}

retry

RetryHandler prototype retry

Initial value:

= function(fn) {
  setTimeout(fn, this.interval);
  this.interval = this.nextInterval_();
}

RetryHandler

var RetryHandler

Initial value:

= function() {
  this.interval = 1000; 
  this.maxInterval = 60 * 1000; 
}

sendFile_

MediaUploader prototype sendFile_

Initial value:

= function() {
  var content = this.file;
  var end = this.file.size;

  if (this.offset || this.chunkSize) {
    
    if (this.chunkSize) {
      end = Math.min(this.offset + this.chunkSize, this.file.size);
    }
    content = content.slice(this.offset, end);
  }

  var xhr = new XMLHttpRequest();
  xhr.open("PUT", this.url, true);
  xhr.setRequestHeader("Content-Type", this.contentType);
  xhr.setRequestHeader(
    "Content-Range",
    "bytes " + this.offset + "-" + (end - 1) + "/" + this.file.size
  );
  xhr.setRequestHeader("X-Upload-Content-Type", this.file.type);
  if (xhr.upload) {
    xhr.upload.addEventListener("progress", this.onProgress);
  }
  xhr.onload = this.onContentUploadSuccess_.bind(this);
  xhr.onerror = this.onContentUploadError_.bind(this);
  xhr.send(content);
}

upload

MediaUploader prototype upload

Initial value:

= function() {
  var self = this;
  var xhr = new XMLHttpRequest();

  xhr.open(this.httpMethod, this.url, true);
  xhr.setRequestHeader("Authorization", "Bearer " + this.token);
  xhr.setRequestHeader("Content-Type", "application/json");
  xhr.setRequestHeader("X-Upload-Content-Length", this.file.size);
  xhr.setRequestHeader("X-Upload-Content-Type", this.contentType);

  xhr.onload = function(e) {
    if (e.target.status < 400) {
      var location = e.target.getResponseHeader("Location");
      this.url = location;
      this.sendFile_();
    } else {
      this.onUploadError_(e);
    }
  }.bind(this);
  xhr.onerror = this.onUploadError_.bind(this);
  xhr.send(JSON.stringify(this.metadata));
}