scinote-web/app/assets/javascripts/direct-upload.js

(function (exports) {

  function generateThumbnail(origFile, type, max_width, max_height, cb) {
    var img = new Image;
    var canvas = document.createElement("canvas");
    var ctx = canvas.getContext("2d");
    // todo allow for different x/y ratio

    canvas.width = max_width;
    canvas.height = max_height;
    img.src = URL.createObjectURL(origFile);

    img.onload = function () {
      var size;
      var offsetX = 0;
      var offsetY = 0;
      
      if (this.width > this.height) {
        size = this.height;
        offsetX = (this.width - this.height) / 2;

      } else {
        size = this.width;
        offsetY = (this.height - this.width) / 2;
      }

      if(type === "image/jpeg") {
        type = "image/jpg";
      }

      ctx.drawImage(this, offsetX, offsetY, size, size, 0, 0, canvas.width, canvas.height);

      canvas.toBlob(function (blob) {
        cb(blob);
      }, type, 0.8)
    };
  }


  function fetchUploadSignature(file, origId, signUrl, cb) {
    var csrfParam = $("meta[name=csrf-param]").attr("content");
    var csrfToken = $("meta[name=csrf-token]").attr("content");
    var xhr = new XMLHttpRequest;
    var data = [];

    data.push("file_name=" + file.name);
    data.push("file_size=" + file.size);
    data.push(csrfParam + "=" + encodeURIComponent(csrfToken));
    

    if (origId) {
      data.push("asset_id=" + origId);
    }

    xhr.open("POST", signUrl);
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");
    xhr.send(data.join("&"));

    xhr.onload = function () {
      try {
        var data = JSON.parse(xhr.responseText);
        cb(data);
      } catch (e) {
        cb();
       }
    };
  }


  function uploadData(data, cb) {
    var xhr = new XMLHttpRequest;
    var fd = new FormData();
    var fields = data.fields;
    var url = data.url;

    for (var k in fields) {
      fd.append(k, fields[k]);
    }

    fd.append("file", data.file, data.fileName);
    xhr.open("POST", url);
    xhr.send(fd);

    xhr.onload = function () {
      cb();
    };
    xhr.onerror = function (error) {
      cb(I18n.t("errors.upload"));
    };
  }


  var styleOptionRe = /(\d+)x(\d+)/i;

  function parseStyleOption(option) {
    var m = option.match(styleOptionRe);

    return {
      width: m && m[1] || 150,
      height: m && m[2] || 150
    };
  }


  exports.directUpload = function (form, origId, signUrl, cb, cbErr, errKey) {
    var fileInputs = $(form).find("input[type=file]");
    var file = fileInputs.get(0).files[0];

    var isValid = checkFilesValidity(fileInputs);

    if (!isValid) {
      cbErr();
      return;
    }

    fetchUploadSignature(file, origId, signUrl, function (data) {

      function processPost(error) {
        var postData = posts[postPosition];

        if (error) {
          var errObj = {};
          errKey = errKey|| "asset.file";
          errObj[errKey] = [error];

          cbErr(errObj);
          return;
        }
        if (!postData) {
          cb(data.asset_id);
          return;
        }

        postData.fileName = file.name;
        postPosition += 1;
        var styleSize;

        if (postData.style_option) {
          styleSize = parseStyleOption(postData.style_option);

          generateThumbnail(file, postData.mime_type, styleSize.width,
            styleSize.height, function (blob) {

            postData.file = blob;
            uploadData(postData, processPost);
          });

        } else {
          postData.file = file;
          uploadData(postData, processPost);
        }
      }

      if (!data || data.status === 'error') {
        cbErr(data && data.errors);
        return;
      }

      var posts = data.posts;
      var postPosition = 0;

      processPost();
    });
  };

}(this));