Uploading images to s3 through stitch aws service fails

Question

Sorry I am a noob, but I am building a quasar frontend using mongodb stitch as backend.

I am trying to upload an image using the stitch javascript sdks and the AwsRequest.Builder.

Quasar gives me an image object with base64 encoded data.

I remove the header string from the base64 string (the part that says "data:image/jpeg;base64,"), I convert it to Binary and upload it to the aws s3 bucket.

I can get the data to upload just fine and when I download it again I get the exact bytes that I have uploaded, so the roundtrip through stitch to aws S3 and back seems to work.

Only, the image I upload can neither be opened in S3 nor cannot be opened once downloaded.

The difficulties seem to be in the conversion to binary of the base64 string and/or in the choice of the proper upload parameters for stitch.

Here is my code:

      var fileSrc = file.__img.src  // valid base64 encoded image with header string
      var fileData = fileSrc.substr(fileSrc.indexOf(',') + 1) // stripping out header string
      var body = BSON.Binary.fromBase64(fileData, 0) // here I get the BSON error

      const args = {
        ACL: 'public-read',
        Bucket: 'elever-erp-document-store',
        ContentType: file.type,
        ContentEncoding: 'x-www-form-urlencoded', // not sure about the need to specify encoding for binary file
        Key: file.name,
        Body: body
      }

      const request = new AwsRequest.Builder()
        .withService('s3')
        .withRegion('eu-west-1')
        .withAction('PutObject')
        .withArgs(args)

      aws.execute(request.build())
        .then(result => {
          alert('OK ' + result)
          return file
        }).catch(err => {
          alert('error ' + err)
        })

In the snippet above I try to use BSON.Binary.fromBase64 for the conversion to binary as per Haley's suggestion below, but I get following error:

boot_stitch__WEBPACK_IMPORTED_MODULE_3__["BSON"].Binary.fromBase64 is not a function.

I have also tried other ways to convert the base64 string to binary, like the vanilla atob() function and the BUFFER npm module, but with no joy.

I must be doing something stupid somewhere but I cannot find my way out.

score 1 · Answer 1 · answered Mar 31 '20 at 15:41

I had a similar issue, solved it by creating a buffer from the base64 data and then used new BSON.Binary(new Uint8Array(fileBuffer), 0) to create the BSON Binary Object.

Using the OP it would look something like this:

var fileSrc = file.__img.src  // valid base64 encoded image with header string
var fileData = fileSrc.substr(fileSrc.indexOf(',') + 1) // stripping out header string
var fileBuffer = new Buffer(fileData, 'base64');
var body = new BSON.Binary(new Uint8Array(fileBuffer), 0)

score 0 · Answer 2 · answered Apr 05 '19 at 16:58

0

You should be able to convert the base64 image to BSON.Binary and then upload the actual image that way (i have some of the values hard-coded, but you can replace those):

context.services.get("<aws-svc-name>").s3("<your-region>").PutObject({
    Bucket: 'myBucket',
    Key: "hello.png",
    ContentType: "image/png",
    Body: BSON.Binary.fromBase64("iVBORw0KGgoAA... (rest of the base64 string)", 0),
})

answered Apr 05 '19 at 16:58

haley

1,165
7
13

Thanks Haley. I understand from your post that I need to transform the base64 into a BSON object. Unfortunately the BSON implementation I have (node.js) does not seem to have a Binary.fromBase64 function. Will look deeper into it in the next few days. Thanks again. – Bruno Ronchetti Apr 07 '19 at 16:47
So, I have tried to import BSON like that from the mongodb-stitch-browser-core package: `import { stitchClient, RemoteMongoClient, AwsServiceClient, AwsRequest, BSON } from 'boot/stitch' but I still get `TypeError: boot_stitch__WEBPACK_IMPORTED_MODULE_3__["BSON"].Binary.fromBase64 is not a function.` – Bruno Ronchetti Apr 08 '19 at 09:08
Ah, could you show me how you're passing args in? The answer I gave you would be if you were using a Stitch function. – haley Apr 08 '19 at 17:10
Thanks Haley for following up and sorry for any confusion. I have edited my question above for clarity and to have the possibility to paste more code. – Bruno Ronchetti Apr 09 '19 at 11:38
Try: `new BSON.Binary(fileData, 0x00)` – haley Apr 12 '19 at 21:01
Thanks Haley. In the end I have given up using the javascript SDKs. Using the stitch service and the Stitch functions instead it works as advertised. – Bruno Ronchetti Apr 13 '19 at 16:58
Well, nearly as advertised. The upload works ok with the snippet from the docs. The download also works as binary, but when I try to get the base64 encoded string using the BSON.Binary.tobase64 (documented here: https://docs.mongodb.com/stitch/functions/utilities/#bson) I get an error: "StitchError: TypeError: 'toBase64' is not a function". – Bruno Ronchetti Apr 16 '19 at 09:00

Uploading images to s3 through stitch aws service fails

2 Answers2