How to load protected S3 images with Next.js Image component? - amazon-s3

I'm trying to make a photo gallery app that gets its photos from an S3 bucket. The images are fetched through presigned urls. The problem is that when I use the Image component from Next, I get the following error: "url" parameter is valid but upstream response is invalid. I can't seem to find the problem. I already configured the domain in the next.config.js file.

I found the solution: Upgrade Next.js

Related

Add a parameter to Strapi V4 request header

I am using Strapi V4 as my CMS and using ECS S3 as the media storage.
I am using https://www.npmjs.com/package/#strapi/provider-upload-aws-s3 as the provider upload plugin.
I am able to upload media assets to the bucket but get error 403 forbidden when I try to GET the assets from the bucket.
I have done the necessary additions to plugins.js and middlewares.js files.
I am now trying to add a parameter "x-emc-namespace": "my-bucket-key" to the request header in the HTTPS call that Strapi API makes to the bucket.
I have tried the Strapi webhooks approach mentioned here but that didn't help in adding a parameter to the request header.
So, my question is how to add a parameter in the Strapi v4 request header.

DownLoad VichBundle file Api Platform

I'm using API platform with VichBundle to store file on the back side and React Native on the Front side.
I've followed the documentation of API platform and the upload part is working well, but I don't know how to download the document.
When I make a GET request I have the entity with the url of the file but I can't do a GET request with this url because there is no route to this file.
Can somebody give me an exemple of how to download file with api platform and Vichbundle.
Thanks
If you are following Api Platfom's documentation your files should be uploaded to your project's ./app/public/media/ folder and available making an HTTP GET request to http(s)://<yourdomain>/public/media/<filename>.<extension>. Just open the URL in your browser.
To get the exact url query yout API for me mediaObject information (for example, /api/media_objects/{id}) and check the contentUrl property.

Laravel Retrieves Image from S3 with its URL

I need to retrieve an image from S3 and post it to Twitter using Laravel. The image is upload with Vapor (Vue js) and path URL stored in the database. Example URL (https://rippleflare-s3-dev.s3.amazonaws.com/7f87e5a4-f157-483e-8dcb-59a735194747). The image is accessible via the browser but when I try to get the image like this
Storage::disk('s3')->get($post->media_url)
Where the medial url is https://rippleflare-s3-dev.s3.amazonaws.com/7f87e5a4-f157-483e-8dcb-59a735194747 I get the error
Illuminate \ Contracts \ Filesystem \ FileNotFoundException
https://rippleflare-s3-dev.s3.amazonaws.com/7f87e5a4-f157-483e-8dcb-59a735194747
My question, how do I retrieve a file from S3 in Laravel using the file URL (path)
you can also define in a model to get your image path like this:
public function getMediaUrlAttribute()
{
return Storage::disk('s3')->url($this->media_url);
}
so it will gives your media url

Is it possible to upload file to s3 bucket directly without redirect?

I am trying to upload a file to S3 bucket directly from browser. Actually it works the only thing is bothering me that it needs a redirect after uploading. I removed redirect option from policy and form. It works but it returns 204 HTTP status, so I don't get response from the server and can't react. Have I other way to get response without redirect?
Refer to the documentation http://docs.aws.amazon.com/AmazonS3/latest/API/RESTObjectPOST.html
success_action_redirect, redirect is an optional param and if success_action_redirect is not specified, Amazon S3 returns the empty document type specified in the success_action_status field

Access js and css files from API gateway and lambda

I have an API Gateway in AWS that calls a a lambda function that returns some html. That html is then properly rendered on the screen but without any styles or js files included. How do I get those to the client as well? Is there a better method than creating /js and /css GET endpoints on the API Gateway to go get those files? I was hoping I could just store them in S3 and they'd get autoloaded from there.
Store them on S3, and enable S3 static website hosting. Then include the correct URL to those assets in the HTML.
I put in the exact address of each js/css file I wanted to include in my html. You need to use https address, not the http address of the bucket. Each file has it's own https address which can be found by following Mark B's instructions above. Notably, going through the AWS admin console, navigate to the file in the S3 bucket, click the "Properties" button in the upper right, copy the "Link" field, and post that into the html file (which was also hosted in S3 in my case). Html looks like this:
<link href="https://s3-us-west-2.amazonaws.com/my-bucket-name/css/bootstrap.min.css" rel="stylesheet">
I don't have static website hosting enabled on the bucket. I don't have any CORS permissions allowing reading from a certain host.