Search code examples
javascriptamazon-web-servicesamazon-s3next.jsblob

Is posible get an Object from AWS S3 in Blob format with AWS SDK for JavaScript V3?

I am in a project with Next.js and I need upload photos to a Bucket S3, I want to use the last in tech, so I am using the SDK for JavaScript in the last version (3)

All fine for now, I have uploaded my first photo to my bucket after a lot struggles, but when I am gonna see the image I have get this error:

enter image description here

My goal is get the URL for set my src in <img /> element, this seems a permission problem with my bucket but my question is: Is possible use the GetObjectCommand for get the resource with the key and save in a Blob object, for after use URL.createObjectURL and link the image in my HTML?

I have tried this:

const BUCKET = 'bucket'

const client = new S3Client({
    region: 'us-east-1',
    credentials: {
        accessKeyId: 'accessKey',
        secretAccessKey: 'secretKey'
    }
})

const response = await client.send(new GetObjectCommand({
    Bucket: BUCKET,
    Key: 'folder/image.jpg'
}))

But the response.Body variable is of type ReadableStream not a Blob

After search in Internet how to convert the ReadableStream to Blob nothing has worked for me, because maybe all the approaches I have see, it speaks about download the resource (to the machine), like this in Node.js

I am not expert in JavaScript but is possible I am ignoring some concepts about streams and blobs, sorry for that.

As you can see I want to access in a secure way to the resource without make public my bucket (because I want to use the same bucket for save private files with a different key), is my approach bad? is possible get this or how to solve in a better way my problem?

Solution

  • It appears that you are wanting to provide public access to selective objects.

    This can be done in two ways:

    • If an object should be permanently 'public', then you can specify ACL=public-read when uploading the object to S3
    • If you wish to keep objects fully private, but selectively make an object accessible via URL then you can use an Amazon S3 pre-signed URL, which is a time-limited URL that provides temporary access to a private object -- basically, your back-end code generates the URL and inserts it into the HTML (<img src="..." />)