I'm getting objects from s3 and now I want to show them as thumbnails in my react app, so how can I achieve it?
var params = {
Bucket: BUCKET_NAME,
Prefix: 'media',
};
s3.listObjects(params, function (err, data) {
if (err) console.log(err, err.stack);
else {
console.log('objects list', data); // successful response
}
});
I'm getting the contents in the response but the question is how can I display them in my app?
Note: the bucket is private
I had a similar issue where I had to show thumbnails from an API which was returning blobs since this endpoint was behind oAuth & I couldn't simply give the URL of the image resource. I'm assuming you are also receiving a octet-stream.
Here's how my axios call looked like
images(id: string, cancelToken?: CancelToken): Promise<FileResponse> {
let url_ = "pathtoendpoint/{id}";
let options_ = <AxiosRequestConfig>{
cancelToken,
responseType: "blob",
method: "GET",
url: url_,
headers: {
Accept: "application/octet-stream",
Authorization: "Bearer ezfsdfksf...."
},
};
return Axios.create().request(options_).then((_response: AxiosResponse) =>
{
return new Promise<FileResponse>(_response.data);
});
}
export interface FileResponse {
data: Blob;
status: number;
fileName?: string;
headers?: { [name: string]: any };
}
I then create an ephemeral DOM string containing a uri
let uri = URL.createObjectURL(data)
Once I have the uri then I can display it as so
<img src={uri} id="someId" alt="" />
If it helps my server side code likes like so,
[Produces("application/octet-stream")]
public async Task<ActionResult> GetImageById([FromRoute] Guid id)
{
var resource = await DatalayerService.GetImageAsync(id);
return File(resource.Filebytes, resource.ContentType);
}