AWS adds metadata to file content when using uploadUrl

Question

I'm using the next code to get upload instructuion with uploadUrl:

public UploadInstruction getUploadUrl() {
    final var objectKey = getObjectKey(generateUniqueFileKey());
    final var url = amazonS3.generatePresignedUrl(s3Properties.getBucket(), objectKey,
            calculateExpirationDate(s3Properties.getDownload().getUrlExpiration()), HttpMethod.PUT);
    return new UploadInstruction(url, getFileKey(objectKey));
}

I get the URL via my api and use Postman to send PUT request. But when I'm using this URL to upload a file I found that AWS adds some metadata at the beginning of my file, like "Content-type: Application octets stream....". Is it a bug? How to avoid adding extra info to uploaded files with was upload URL?

UPDATED: For example, I want to upload simple txt file with the next text:

test

When I uploaded to S3 via uploadUrl, after downloading I get a file with the next content:

----------------------------174475527638909501568708
Content-Disposition: form-data; name=""; filename="test.txt"
Content-Type: text/plain

test
----------------------------174475527638909501568708--

Also, I changed the file name when generating uploadUrl. Also, when I uploaded zip archive I can't unpack it after downloading from s3 bucket. But all works when I uploading files via AWS CLI.

The address in PUT request is uploadUrl. My headers which postman added are next:

Answer 1

I found some information here. Usually when uploading files used form-data:

var fd = new FormData();
var file = document.getElementById('file')[0];
fd.append('file',file);

It is necessary to use next:

var upload = document.getElementById('file');
var file = upload.files[0];

Full code:

<form method="put" action="" enctype="multipart/form-data" id="myform">

        <div >
            <input type="file" id="file" name="file" />
            <input type="button" class="button" value="Upload" id="but_upload">
        </div>
    </form>

Ajax:

$(document).ready(function(){

    $("#but_upload").click(function(){

        var upload = document.getElementById('file');
var file = upload.files[0];

        $.ajax({
            url: '<uploadURL>',
            type: 'put',
            data: file,
            contentType: false,
            processData: false,
            success: function(response){
                if(response != 0){
                    alert('file uploaded');
                }else{
                    alert('file not uploaded');
                }
            },
        });
    });
});

In Postman it is necessary to use binary instead form-data to attach a file: