FeedBackToolGithub.js

/* https://github.com/eisnerd/feedback-tool + github issues

Example:

$.feedbackGithub({
  token: "16222221222128357fab95ec80b56a43c9a1868b429",
  issues: {
    repository: "tokland/feedback-test",
    title: "feedback from user",
    renderBody: (body) => "my own data\n" + body,
  },
  snapshots: {
    repository: "your-user/snapshots",
    branch: "master",
  }
});
*/
class FeedBackToolGithub {
  constructor(options) {
    this.token = options.token;
    this.issues = options.issues;
    this.snapshots = options.snapshots;
  }
  
  init() {
    $.feedback({
      postFunction: this._sendReport.bind(this),
    });
  }
  
  _setAuthHeader(xhr) {
    xhr.setRequestHeader("Authorization", "token " + this.token);
  }
  
  _sendReport(data) {
    // data.post.img = "data:image/png;base64,iVBORw0KG..."
    const imgBase64 = data.post.img.split(",")[1];
    const uid = new Date().getTime() + parseInt(Math.random() * 1e6).toString();
     
    this._uploadFile("screenshot-" + uid + ".png", imgBase64)
      .then(url => this._postIssue(data, url))
      .then(data.success, data.error); 
  }

  _uploadFile(filename, contents) {
    const payload = {
      "message": "feedback.js snapshot",
      "branch": this.snapshots.branch,
      "content": contents,    
    };
    
    return $.ajax({
      url: 'https://api.github.com/repos/' + this.snapshots.repository + '/contents/' + filename,
      type: "PUT",
      beforeSend: this._setAuthHeader.bind(this),
      dataType: 'json',
      data: JSON.stringify(payload),
    }).then(res => res.content.download_url);
  }

  _postIssue(data, screenshotUrl) {
    const info = data.post;
    const browser = info.browser;
    const body = [
      "## Browser",
      "- Name: " + browser.appCodeName,
      "- Version: " + browser.appVersion,
      "- Platform: " + browser.platform,
      "## User report",
      info.note,
      "",
      "![screenshot](" + screenshotUrl + ")",
    ].join("\n")
    const payload = {
      "title": this.issues.title,
      "body": this.issues.renderBody ? this.issues.renderBody(body) : body, 
    };
    
    return $.ajax({
      type: "POST",
      url: 'https://api.github.com/repos/' + this.issues.repository + '/issues',
      beforeSend: this._setAuthHeader.bind(this),
      dataType: 'json',
      data: JSON.stringify(payload),
    });
  }
}

$.feedbackGithub = function(options) {
  const feedback = new FeedBackToolGithub(options);
  feedback.init();
  return feedback;
}

Thanks for sharing this brilliant idea. However, the image can't be view by others besides the first viewer. I made a fix for this at https://gist.github.com/maxisam/5c6ec10cc4146adce05d62f553c5062f

@tokland thanks! Love this solution and am using it for a project. However, I've ran into a problem: the download link has an auth0 token that expires after about 15 mins, causing the image to disappear from the issue. Am I missing something? Any solution to this?