Whatever I do, I could not upload the file from the browser directly to s3 bucket on AWS.

This is how I generate the presigned url from .net side

            var urlString = string.Empty;


            var uniqueFileName = $"{Guid.NewGuid()}{Path.GetExtension(model.FileName)}";


            try
            {
                AWSConfigsS3.UseSignatureVersion4 = true;
                var request = new GetPreSignedUrlRequest()
                {
                    BucketName = "bucketname",
                    Key = $"upload//{uniqueFileName}",
                    Expires = DateTime.UtcNow.AddHours(2),
                    ContentType = "video/mp4",
                    Verb = HttpVerb.PUT
                    

                };

                request.Metadata.Add("firebaseId", fireBaseUser.Uid);
                urlString = await Resolver.AmazonS3Client.GetPreSignedURLAsync(request);
            }
            catch (AmazonS3Exception ex)
            {
                Console.WriteLine($"Error:'{ex.Message}'");

                var modelReturn569 = new
                {
                    status = 500,
                    url = urlString,
                    contentType = "video/mp4"
                };
                return Json(modelReturn569);
            }

            var modelReturn56 = new
            {
                status = 200,
                url = urlString
            };
            return Json(modelReturn56);

This is how I make JavaScript calls to upload the file to AWS. I have followed the code from

https://gist.github.com/guumaster/9f18204aca2bd6c71a24

 function getAwsUrl(filename, contentType){

     var obj = {
         fileName: filename,
         contentType: contentType
     };


     return new Promise((resolve, reject) => {

         $.ajax({
             type: "POST",
             url: '@Url.ActionLink("GetAwsUrl", "Account", new { }, "https")',
             data: JSON.stringify(obj),
             dataType: "json",
             headers: {
                 "RequestVerificationToken": "@GetAntiXsrfRequestToken()"
             },
             contentType: "application/json",
             success: function (data) {

                 resolve(data);


             },
             error: function (req, status, error) {
                 reject(error);
             }
         });
     
     
     });        
 }

 function uploadToAws(dataIncoming){

     console.log(dataIncoming.url);
     var theFormFile = $('#videoUploader').get()[0].files[0];

     return new Promise((resolve, reject) => {

         $.ajax({
             type: "PUT",
             url: dataIncoming.url,
             processData: false,
             contentType: "video/mp4",
             data: theFormFile,
             success: function (data) {

                 resolve(data);


             },
             error: function (req, status, error) {
                 reject(error);
             }
         });


     });

 }

This is how I call my javascript functions

 getAwsUrl($("#videoUploader")[0].files[0].name, "video/mp4")
     .then((data) => {

         uploadToAws(data).then((dataUploaded) => {

             alert("uploaded");

         }).catch((error) => { 
         
             console.log(error);
         
         });
        
     })
     .catch((error) => {
        
         iziToast.error({
             position: 'bottomRight',
             pauseOnHover: false,
             displayMode: 2,
             layout: 2,
             message: ""
         });

     })

This is the result I am getting on the browser

jquery.min.js:2 
        
        
PUT https://s3.eu-west-2.amazonaws.com/bucketname/upload/27492328-4b7e-420f-b3d5-b047f3d5d1a6.mp4?X-Amz-Expires=7200&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIA4VX7VVP3LMLE3CHF%2F20240515%2Feu-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240515T151600Z&X-Amz-SignedHeaders=content-type%3Bhost%3Bx-amz-meta-firebaseid&X-Amz-Signature=605eeb5654fbb822dd70cbfd773bad4fe027d65b65efc4baac8ae6e3342c52ce 403 (Forbidden)

This the CORS configuration on S3 bucket

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "HEAD",
            "POST",
            "PUT"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": [],
        "MaxAgeSeconds": 3000
    }
]

Just to make sure for content type to be same I have hard coded the content type as mp4 file, and select mp4 file from the browser.

I have also tested without the line AWSConfigsS3.UseSignatureVersion4 = true; but same error. I would appreciate your feedback on this.