Downloading images form AWS S3 via Lambda and API Gateway--using fetch class

I'm trying to use the JavaScript fetch API, AWS API Gateway, AWS Lambda, and AWS S3 to create a service that allows users to upload and download media. Server is using NodeJs 8.10; browser is Google Chrome Version 69.0.3497.92 (Official Build) (64-bit).

In the long term, allowable media would include audio, video, and images. For now, I'd be happy just to get images to work.

The problem I'm having: my browser-side client, implemented using fetch, is able to upload JPEG's to S3 via API Gateway and Lambda just fine. I can use curl or the S3 Console to download the JPEG from my S3 bucket, and then view the image in an image viewer just fine.

curl

But, if I try to download the image via the browser-side client and fetch, I get nothing that I'm able to display in the browser.

Here's the code from the browser-side client:

fetch(
'path/to/resource',

method: 'post',
mode: "cors",
body: an_instance_of_file_from_an_html_file_input_tag,
headers:
Authorization: user_credentials,
'Content-Type': 'image/jpeg',
,

).then((response) =>
return response.blob();
).then((blob) =>
const img = new Image();
img.src = URL.createObjectURL(blob);
document.body.appendChild(img);
).catch((error) =>
console.error('upload failed',error);
);


Here's the server-side code, using Claudia.js:

const AWS = require('aws-sdk');
const ApiBuilder = require('claudia-api-builder');
const api = new ApiBuilder();

api.corsOrigin(allowed_origin);
api.registerAuthorizer('my authorizer',
providerARNs: ['arn of my cognito user pool']
);

api.get(
'/media',
(request) =>
'use strict';

const s3 = new AWS.S3();
const params =
Bucket: 'name of my bucket',
Key: 'name of an object that is confirmed to exist in the bucket and to be properly encoded as and readable as a JPEG',
;
return s3.getObject(params).promise().then((response) =>
return response.Body;
)
;

);

module.exports = api;


Here are the initial OPTION request and response headers in Chrome's Network Panel:

OPTION

Here's the consequent GET request and response headers:

GET

What's interesting to me is that the image size is reported as 699873 (with no units) in the S3 Console, but the response body of the GET transaction is reported in Chrome at roughly 2.5 MB (again, with no units).

The resulting image is a 16x16 square and dead link. I get no errors or warnings whatsoever in the browser's console or CloudWatch.

I've tried a lot of things; would be interested to hear what anyone out there can come up with.

Thanks in advance.

EDIT: In Chrome:

1 Answer
1

Claudia requires that the client specify which MIME type it will accept on binary payloads. So, keep the 'Content-type' config in the headers object client-side:

'Content-type'

headers

fetch(
'path/to/resource',

method: 'post',
mode: "cors",
body: an_instance_of_file_from_an_html_file_input_tag,
headers:
Authorization: user_credentials,
'Content-Type': 'image/jpeg', // <-- This is important.
,

).then((response) =>
return response.blob();
).then((blob) =>
const img = new Image();
img.src = URL.createObjectURL(blob);
document.body.appendChild(img);
).catch((error) =>
console.error('upload failed',error);
);


Then, on the server side, you need to tell Claudia that the response should be binary and which MIME type to use:

const AWS = require('aws-sdk');
const ApiBuilder = require('claudia-api-builder');
const api = new ApiBuilder();

api.corsOrigin(allowed_origin);
api.registerAuthorizer('my authorizer',
providerARNs: ['arn of my cognito user pool']
);

api.get(
'/media',
(request) =>
'use strict';

const s3 = new AWS.S3();
const params =
Bucket: 'name of my bucket',
Key: 'name of an object that is confirmed to exist in the bucket and to be properly encoded as and readable as a JPEG',
;
return s3.getObject(params).promise().then((response) =>
return response.Body;
)
;
,
/** Add this. **/

success:
contentType: 'image/jpeg',
contentHandling: 'CONVERT_TO_BINARY',
,

);

module.exports = api;


Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.