如何使用 Fetch API 将照片上传到 AWS S3？

Question

I am trying to upload a photo file to an S3 bucket using the Fetch API. I'm getting 400 Bad Request on the POST when trying to upload the photo. I am getting the presigned post url and the file details correctly but I believe the way I am formatting the formData is incorrect.

I'm using an html file input that uses onchange to run a javascript function handlePhoto.

The html is

<input type="file" onchange="handlePhoto()" id="file_input"/>

and javascript function is

function handlePhoto(){
    const file = document.getElementById('file_input').files[0]
    let formData = new FormData()
    fetch("/v1/photos/get_presigned_post/" , {
      method: "GET"
    })
    .then(response => response.json())
    .then(s3Result => {
      const { url, fields } = s3Result;
      Object.keys(s3Result.fields).forEach(key => {
        formData.append(key, s3Result.fields[key]);
      });
      formData.append('acl', 'public-read');
      formData.append('Content-Type', file.type);
      formData.append("file", file);

      fetch(url, {
        method: "POST",
        body: formData,
        headers: {
          "Content-Type": "multipart/form-data"
        }
      })
  });
}

Any help would be greatly appreciated.

Answer 1

You don't need to use a FormData, just pass the file with a content-type 'octet-stream'.

acl must be used when generating the presign URL.

fetch(url, {
                method: 'PUT',
                body: file,
                headers: { 'Content-Type': 'application/octet-stream' }
            })

Answer 2

Assuming you have a presigned url you could use something like this:

interface UploadIAToS3Params {
  url: string;
  file: File;
}

export function uploadToS3(params: UploadIAToS3Params) {
  const { file, url } = params;
  return fetch(url, { body: file, mode: "cors", method: "PUT" });
}

Answer 3

check the url in s3Result, for me it was wrong link and it doesn't include your bucketname. it must be like this to work:

https://{bucket_name}.s3.amazonaws.com

Answer 4

Your URL might not be right, From the documentation, hostnames should look something like this. "s3.Region.amazonaws.com".

These two links might help https://docs.aws.amazon.com/AmazonS3/latest/userguide/RESTAPI.html and, https://docs.aws.amazon.com/AmazonS3/latest/API/sigv4-HTTPPOSTForms.html