1

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?

Julián
  • 1,238
  • 1
  • 12
  • 24

1 Answers1

0

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="..." />)
John Rotenstein
  • 241,921
  • 22
  • 380
  • 470
  • Hi John, thanks a lot, but i have another question, in the first option I have tried with the `ACL=public-read` but I got the `The bucket does not allow ACLs` error, do you know what this mean and how to enable it? – Julián Jul 20 '22 at 16:18
  • Nevermind I have solve it in the AWS Dashboard, activating the ACL for my bucket :) now I can upload public resources with the flag `ACL: 'public-read'` if I need, otherwise will be private access, thanks! – Julián Jul 20 '22 at 16:23