Search code examples
javascriptamazon-s3uploadxmlhttprequestpre-signed-url

Uploading file to S3 using a pre-signed URL


I'm trying to upload a file in my s3 bucket with an AWS pre-signed URL.

Here is my JS function:

function UploadObjectUsingPresignedURL() {
    var file = document.getElementById('customFile').files[0];
    console.log(file);
    var xhr = new XMLHttpRequest();
    xhr.open('PUT', 'hereMyPresignedURL', true);
    //xhr.setRequestHeader('Content-Type', 'image/jpeg');
    xhr.onload = () => {
      if (xhr.status === 200) {
        console.log('Uploaded data successfully');
      }
    };
    xhr.onerror = () => {
      console.log('Nope')
    };
    xhr.send(file); // `file` is a File object here 
}

Here is my HTML:

<div class="input-group">
    <div class="custom-file">
        <input type="file" class="custom-file-input" id="customFile"
            aria-describedby="customFile">
        <label class="custom-file-label" for="customFile">Choose file</label>
    </div>
    <div class="input-group-append">
        <button class="btn btn-outline-secondary" type="button" id="customFile" 
        onclick="UploadObjectUsingPresignedURL()">Button</button>
    </div>
</div>

And here the result in my console...

console output

functions.js:4 File {name: "aragorn.jpg", lastModified: 1590136296908, lastModifiedDate: Fri May 22 2020 10:31:36 GMT+0200 (heure d’été d’Europe centrale), webkitRelativePath: "", size: 7714, …} functions.js:10 Uploaded data successfully)

So it seems it went well (Uploaded data successfully), but in my S3 bucket I have no new files... since I have no error, I don't know how to debug this.

Here is my .NET code for generating the pre-signed URL:

public static string MakeS3PresignedURIUpload() {
    string awsAccessKeyId = "XXX";
    string awsSecretAccessKey = "XXX";
    string s3Bucket = "test-bucket";
    string s3Key = "/aragorn.jpg";
    string awsRegion = "us-west-2";


    string presignedUri = "Error : No S3 URI found!";
    int expirationMinutes = 60;

    if (s3Bucket != String.Empty && s3Key != String.Empty && awsRegion != String.Empty) {
        try {
            s3Key = s3Key.Replace("\\", "/");
            GetPreSignedUrlRequest presignedUriReq = new GetPreSignedUrlRequest();
            RegionEndpoint myRegion = RegionEndpoint.GetBySystemName(awsRegion);
            AmazonS3Client client = new AmazonS3Client(awsAccessKeyId, awsSecretAccessKey, myRegion);
            presignedUriReq.Verb = HttpVerb.PUT;
            presignedUriReq.BucketName = s3Bucket;
            presignedUriReq.Key = s3Key;
            presignedUriReq.Expires = DateTime.UtcNow.AddMinutes(expirationMinutes);
            presignedUri = client.GetPreSignedURL(presignedUriReq); }
        catch (AmazonS3Exception e) {
            return string.Format("Error : S3 - MakeS3PresignedURIUpload - Error encountered on server.Message:'{0}' when writing an object", e.Message);
        }
        catch (Exception e) {
            return string.Format("Error : S3 - MakeS3PresignedURIUpload - Unknown encountered on server. Message:'{0}' when writing an object", e.Message);
        }
    }
    return presignedUri;
}

Solution

  • string s3Key = "/aragorn.jpg";
    

    Change to

    string s3Key = "aragorn.jpg";
    

    It was working, but saving the file in an un-named folder in the bucket and not directly in the bucket ...