send image to server in binary

mozilla-services · Aug 28, 2017 · 9c558ce · 9c558ce
1 parent 1e7b2bb
commit 9c558ce
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 10 deletions.
diff --git a/addon/webextension/background/takeshot.js b/addon/webextension/background/takeshot.js
@@ -8,7 +8,7 @@ this.takeshot = (function() {
   const { sendEvent } = analytics;
 
   communication.register("takeShot", catcher.watchFunction((sender, options) => {
-    let { captureType, captureText, scroll, selectedPos, shotId, shot } = options;
+    let { captureType, captureText, scroll, selectedPos, shotId, shot, imageBlob } = options;
     shot = new Shot(main.getBackend(), shotId, shot);
     shot.favicon = sender.tab.favIconUrl;
     let capturePromise = Promise.resolve();
@@ -19,7 +19,7 @@ this.takeshot = (function() {
         shot.addClip({
           createdDate: Date.now(),
           image: {
-            url: dataUrl,
+            url: "data:",
             captureType,
             text: captureText,
             location: selectedPos,
@@ -31,6 +31,10 @@ this.takeshot = (function() {
         });
       });
     }
+    if (!imageBlob) {
+      imageBlob = base64ToBinary(shot.getClip(shot.clipNames()[0]).image.url);
+      shot.getClip(shot.clipNames()[0]).image.url = "";
+    }
     let shotAbTests = {};
     let abTests = auth.getAbTests();
     for (let testName of Object.keys(abTests)) {
@@ -45,7 +49,7 @@ this.takeshot = (function() {
       return browser.tabs.create({url: shot.creatingUrl})
     }).then((tab) => {
       openedTab = tab;
-      return uploadShot(shot);
+      return uploadShot(shot, imageBlob);
     }).then(() => {
       return browser.tabs.update(openedTab.id, {url: shot.viewUrl}).then(
         null,
@@ -108,10 +112,19 @@ this.takeshot = (function() {
     }));
   }
 
-  function uploadShot(shot) {
+  function base64ToBinary(url) {
+    const binary = atob(url.split(',')[1]);
+    const data = Uint8Array.from(binary, char => char.charCodeAt(0));
+    const blob = new Blob([data], {type: "image/png"});
+    return blob;
+  }
+
+  function uploadShot(shot, blob) {
     return auth.authHeaders().then((headers) => {
-      headers["content-type"] = "application/json";
-      let body = JSON.stringify(shot.asJson());
+      let formData = new FormData();
+      formData.append("shot", JSON.stringify(shot.asJson()));
+      formData.append("blob", blob);
+      let body = formData;
       sendEvent("upload", "started", {eventValue: Math.floor(body.length / 1000)});
       return fetch(shot.jsonUrl, {
         method: "PUT",

diff --git a/addon/webextension/selector/shooter.js b/addon/webextension/selector/shooter.js
@@ -29,6 +29,13 @@ this.shooter = (function() { // eslint-disable-line no-unused-vars
     return result;
   }
 
+  function base64ToBinary(url) {
+    const binary = atob(url.split(',')[1]);
+    const data = Uint8Array.from(binary, char => char.charCodeAt(0));
+    const blob = new Blob([data], {type: "image/png"});
+    return blob;
+  }
+
   catcher.registerHandler((errorObj) => {
     callBackground("reportError", sanitizeError(errorObj));
   });
@@ -80,6 +87,7 @@ this.shooter = (function() { // eslint-disable-line no-unused-vars
         catcher.unhandled(exc);
         return;
     }
+    let imageBlob;
     const uicontrol = global.uicontrol;
     let deactivateAfterFinish = true;
     if (isSaving) {
@@ -99,11 +107,12 @@ this.shooter = (function() { // eslint-disable-line no-unused-vars
     }
     let dataUrl = url || screenshotPage(selectedPos, captureType);
     if (dataUrl) {
+      imageBlob = base64ToBinary(dataUrl);
       shotObject.delAllClips();
       shotObject.addClip({
         createdDate: Date.now(),
         image: {
-          url: dataUrl,
+          url: "data:",
           captureType,
           text: captureText,
           location: selectedPos,
@@ -125,7 +134,8 @@ this.shooter = (function() { // eslint-disable-line no-unused-vars
       },
       selectedPos,
       shotId: shotObject.id,
-      shot: shotObject.asJson()
+      shot: shotObject.asJson(),
+      imageBlob
     }).then((url) => {
       return clipboard.copy(url).then((copied) => {
         return callBackground("openShot", { url, copied });

diff --git a/server/src/server.js b/server/src/server.js
@@ -52,6 +52,9 @@ const { errorResponse, simpleResponse, jsResponse } = require("./responses");
 const selfPackage = require("./package.json");
 const { b64EncodeJson, b64DecodeJson } = require("./b64");
 const { l10n } = require("./middleware/l10n");
+const multer = require("multer");
+const storage = multer.memoryStorage();
+const upload = multer({storage});
 
 const PROXY_HEADER_WHITELIST = {
   "content-type": true,
@@ -576,7 +579,7 @@ app.post("/api/login", function(req, res) {
   });
 });
 
-app.put("/data/:id/:domain", function(req, res) {
+app.put("/data/:id/:domain", upload.single('blob'), function(req, res) {
   let slowResponse = config.testing.slowResponse;
   let failSometimes = config.testing.failSometimes;
   if (failSometimes && Math.floor(Math.random() * failSometimes)) {
@@ -585,7 +588,16 @@ app.put("/data/:id/:domain", function(req, res) {
     res.end();
     return;
   }
-  let bodyObj = req.body;
+  let bodyObj = [];
+  if (req.body.shot && req.file) {
+    bodyObj = JSON.parse(req.body.shot);
+    let clipId = Object.getOwnPropertyNames(bodyObj.clips)[0];
+    let b64 = req.file.buffer.toString("base64");
+    b64 = "data:image/png;base64," + b64;
+    bodyObj.clips[clipId].image.url = b64;
+  } else if (req.body) {
+    bodyObj = req.body;
+  }
   if (typeof bodyObj != "object") {
     throw new Error(`Got unexpected req.body type: ${typeof bodyObj}`);
   }