Upload file from JS to S3

Question

I have a vue javascript application. I want to upload a file to an S3 bucket - using quite plain Js my current state is:

async function onFileChange(event) {
   let formData = new FormData();           
   const files = event.target.files || event.dataTransfer.files;
   const package_file = files[0].name;
   formData.set("package_file", files[0]);

   const [s3_data, ] = await wrapAsync(createS3Url, [{"package_file" : package_file}]);

   const url = s3_data.data.s3_package_url.url;
   const data = s3_data.data.s3_package_url.fields;

   for (const key in data) {
       formData.set(key, data[key]);
   }

   await fetch(url, {
      method: "POST", 
      body: formData,
   });    
}

The call to (not shown) function createS3Url() seems to work, I get a presigned url and a list of settings back. But when I actually try to post this to s3 with fetch(url, ...) it fails on the S3 side. My feeling is that the problem is with the body passed to the fetch() call? I have tried some variations - right now the error message from S3 is:

MaxPostPreDataLengthExceededYour POST request fields preceeding the upload file was too large.20480NC4J0JQDNHAPR7J85QOk1Ran5Ac+mORoqUo5Ommmu2kqtsIuEgRXQSKGx8jwuIqf0auAdLkJaQcaI47pb005mZyrIK8=

There is also a CORS error message:

POST https://storagestack-softwarepackages06fbedb7-1dmnxdlbs1kjh.s3.amazonaws.com/
CORS Missing Allow Origin

I am currently running on localhost. Have not done anything in particular on my localhost - or on the s3 end in order to support CORS?

Update: I have now found out that:

The key pointing to the file content must be exactly file.
The file element must be the last added to the FormData instance.

Observing these two points I get further, but now there is a permission problem of some sort.

Upload file from JS to S3

0 Answers