V4 - Serving blob from DB is sending Buffer object on prod (mysql). Working on dev (sqlite) though...

[ehni]

Hi, I want to provide the ability to upload and see images.

I'm sending the image as a Base64 encoded field in a JSON. Here's my controller code for creating the card with the image:

 async createCard ({ request, auth, response }) {
    try {
      const user = auth.current.user;

      const cardData = request.only(["frontSide", "backSide", "category_id", "imageFrontSide", "imageBackSide"]);

      const card = await Card.create({
        user_id: user.id,
        ...cardData,
      });

      return response.json({
        status: "success",
        data: card,
      });
    } catch (error) {
      Logger.error("Error creating card!\n", error);
      return response.status(400).json({
        status: "error",
        message:
          "There was a problem creating the card, please try again later.",
      });
    }
  }

And for retrieving the data:

async getCard ({ auth, response, params }) {
    try {
      const user = auth.current.user;

      const cards = await Card.query()
        .where({ user_id: user.id, id: params.id })
        .first();

      return response.json({
        status: "success",
        data: cards,
      });
    } catch (error) {
      console.log("Error getting card:", error);
      return response.status(400).json({
        status: "error",
        message:
          "There was a problem getting the card, please try again later.",
      });
    }
  }

Now on my local machine it works fine with an sqlite DB. The card gets stored and when I call api/card/<card-id> I get the following response:

{
    "status": "success",
    "data": {
        "id": 1,
        "user_id": 1,
        "category_id": 1,
        "frontSide": "<p>1</p>",
        "imageFrontSide": "data:image/png;base64,<long-base64-string-here>",
        "backSide": "<p>2</p>",
        "imageBackSide": "data:image/png;base64,<long-base64-string-here>",
        "created_at": "2020-08-20 19:49:47",
        "updated_at": "2020-08-20 19:54:05"
    }
}

So I can just use the imageFrontSide and put it as src of an <img> and the user can see the picture.

Now when I run the same code on my "production" system with an MySQL db I somehow get the following response for api/card/<card-id>:

{
    "status": "success",
    "data": {
        "id": 1,
        "user_id": 1,
        "category_id": 1,
        "frontSide": "<p>Vorderseite 1</p>",
        "imageFrontSide": {
            "type": "Buffer",
            "data": [<long int array>]
        },
        "backSide": "<p>Vorderseite 2</p>",
        "imageBackSide": {
            "type": "Buffer",
            "data": [<long int array>]
        },
        "created_at": "2020-06-21 17:43:15",
        "updated_at": "2020-06-22 15:30:04"
    }
}

Here's my Card schema:

"use strict";

/** @type {import('@adonisjs/lucid/src/Schema')} */
const Schema = use("Schema");

class CardSchema extends Schema {
  up () {
    this.create("cards", table => {
      table.increments();
      table.integer("user_id").notNullable();
      table.integer("category_id").notNullable();
      table.text("frontSide").notNullable();
      table.binary("imageFrontSide");
      table.text("backSide").notNullable();
      table.binary("imageBackSide");
      table.timestamps();
    });
  }

  down () {
    this.drop("cards");
  }
}

module.exports = CardSchema;

Can anyone help me out here?