Upload file to AWS S3 using Pre-Signed URL

Question

I have my S3 presigned url working fine in Postman and I can upload images to S3 using Postman. I'm now trying to get it working from my own webpage. I have jQuery retrieving the presigned URL fine. The problem is when I try to upload the image to S3. I receive a 403 Forbidden in my Firefox browser. Any insights greatly appreciated. Here is the relevant HTML and jQuery code:

<form enctype='multipart/form-data' id="aws_upload_form" method='POST' >
   <input type='hidden' name='MAX_FILE_SIZE' value='1000000' />
   <input type='hidden' name='x-amz-acl' value='public-read' />
   <input type='file' id="fileInput" />
   <input type='submit' value='Upload Selected File To S3' />
</form>

I believe the problem to be in the handleData function shown below:

$(document).ready(function() {
    const apigw_endpt = "https://blahblah.execute-api.region.amazonaws.com/api";
    
    $("#aws_upload_form").submit(function (e) {
        e.preventDefault();
        var form_data = new FormData(this); //Creates new FormData object

        var selectedFile = document.getElementById('fileInput');
        var nameOfFile = selectedFile.files.item(0).name;

        if (nameOfFile.length > 0) {
            $("#selectedFile").html(nameOfFile);
            $.ajax({
                url: apigw_endpt + "/generate_presigned_url",
                data: {
                    file_name: nameOfFile
                },
                type: "GET",
                dataType : "json",
                success: function (json) {
                    handleData(json, form_data);
                },
                error: function( xhr, status, errorThrown ) {
                    jq_ui_alert( 'dialog-message', "Sorry, there was an AJAX problem with ..." );
                    console.log( "Error: " + errorThrown );
                    console.log( "Status: " + status );
                    console.dir( xhr );
                }
            });
        } else {
            alert("No File Selected");
        }
    });
});

function handleData(json, form_data) {
    $.ajax({
        url: json.fields,
        type: 'PUT',
        contentType: 'image/jpeg',
        data: form_data,
        processData: false
    });
}

Thanks for your help.

I just got it working. I added headers: { 'x-amz-acl': 'public-read' }, into the handleData function ajax call — Brian G
– Brian G, Commented Jan 28, 2021 at 19:13

Brian G · Accepted Answer · 2021-01-28 19:14:37Z

4

I just got it working. I added:

headers: { 'x-amz-acl': 'public-read' },

into the handleData function ajax call

answered Jan 28, 2021 at 19:14

Brian G

4183 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ALZlper Over a year ago

Thank you so much for that answer! Turns out, EVERYTHING has to be the same, including (some) headers. This was not obvious to me, because I use a library for the backed of course.

Collectives™ on Stack Overflow

Upload file to AWS S3 using Pre-Signed URL

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related