Amplify-js: How do I convert S3 Storage key into image URL?

[wzup]

* Which Category is your question related to? *

S3 Storage

* What AWS Services are you utilizing? *

A lot.
I this question I need S3 Storage info

* Provide additional details e.g. code snippets *

Snippet below returns some cryptic string and not an image URL.

Storage.get('avatar.png', { level: 'protected' })
.then( crypticString => console.log('HOW TO GET IMAGE URL FROM => ', crypticString)  )

How do I convert that cryptic string into real image URL?

[richardzcode]

Hey @wzup Amplify returns a presigned S3 url, https://docs.aws.amazon.com/AmazonS3/latest/dev/ShareObjectPreSignedURL.html. It is a real image URL, just is time-limited.

The original S3 URL usually is like this: https://s3-$region$.amazonaws.com/$bucket$/$key$. Amplify prepend level (public/protected/private) to key. so in your example the original image url probably is https://s3-$region$.amazonaws.com/$bucket$/protected/avatar.png

[ivanji]

I have a similar question/issue regarding this as we need to provide the S3 Object Link to another AWS service, the pre-signed URL has a totally different structure, meaning that for now I've had to take it apart and move things around in order to create the s3 location. Is there any other approach?

[johanrin]

@richardzcode I tried to pass the original S3 url to the picture field of my cognito user but I have an 403 (Forbidden) error message when I load my picture.
Is it possible to get directly the url without making public the picture?

[rfdc]

Hey @wzup Amplify returns a presigned S3 url, https://docs.aws.amazon.com/AmazonS3/latest/dev/ShareObjectPreSignedURL.html. It is a real image URL, just is time-limited.

The original S3 URL usually is like this: https://s3-$region$.amazonaws.com/$bucket$/$key$. Amplify prepend level (public/protected/private) to key. so in your example the original image url probably is https://s3-$region$.amazonaws.com/$bucket$/protected/avatar.png

Hi @richardzcode,
It did not work for me cos the federated identity is on the url such as:
https://s3-ap-southeast-2.amazonaws.com/$bucket/private/$federated-identity/Logo.jpg

As explained on #2127, the url expires after while and the original url from Storage.get('Logo.jpg', { level: 'private'}) looks like this:
https://$bucket.s3.ap-southeast-2.amazonaws.com/private/$federated-identityLogo.jpg?AWSAccessKeyId=$KEY&Signature=$KEY&x-amz-security-token=$TOKEN

How do I extend the expiry time? Or get a different URL?
Thanks

[donaldev]

+1 for @rfdc question

My use-case:

Each user will have a profile, with which they can add a Profile image, but also the user could be in charge of a group which they will need to upload a Group Image. Thirdly, each user will be able to upload songs which will be contained in their own uploads folder, prepended with either mp3s/{sub} OR profile_img/{sub}. If I want to store information about the s3Upload (such as URL) in a database, how can this be achieved?
On each upload/delete the database will need to be updated via an API Gateway call, is this kind of functionality possible with Amplify or do I need to use the aws-sdk?

[jordanranz]

@rfdc, Amplify does not currently expose the ability to change the expiration. I'll go ahead and mark this as a feature request for now. To achieve this now you can use the aws-sdk S3 client.

@donaldev, for the statement "On each upload/delete the database will need to be updated" you can use amazon S3 Event Notifications:
https://docs.aws.amazon.com/AmazonS3/latest/dev/NotificationHowTo.html

For the other questions, this is more of a cloud backend configuration use case rather than something that can be done in amplify-js.

[stale[bot]]

This issue has been automatically closed because of inactivity. Please open a new issue if are still encountering problems.