I have been trying to solve this for the past few hours.

I am using the Heroku S3 python app direct upload method outlined here.

Basically, I have a file input which I get the file from with

$('#files').on('change', function() { var files = document.getElementById("files").files; var file = files[0]; if(!file){ return alert("No file selected."); } getSignedRequest(file); })

In getSignedRequest, I make a request to my sign_s3 route

function getSignedRequest(file){ var xhr = new XMLHttpRequest(); xhr.open("GET", "/sign_s3?file_name="+file.name+"&file_type="+file.type); xhr.onreadystatechange = function(){ if(xhr.readyState === 4){ if(xhr.status === 200){ var response = JSON.parse(xhr.responseText); uploadFile(file, response.data, response.url); } else{ alert("Could not get signed URL."); } } }; xhr.send(); }

The sign_s3 route is defined as follows

@main.route('/sign_s3/') def sign_s3(): S3_BUCKET = os.environ.get('S3_BUCKET') file_name = request.args.get('file_name') file_type = request.args.get('file_type') s3 = boto3.client('s3') presigned_post = s3.generate_presigned_post( Bucket = S3_BUCKET, Key = file_name, Fields = {"acl": "public-read", "Content-Type": file_type}, Conditions = [ {"acl": "public-read"}, {"Content-Type": file_type} ], ExpiresIn = 3600 ) return json.dumps({ 'data': presigned_post, 'url': 'https://%s.s3.amazonaws.com/%s' % (S3_BUCKET, file_name) })

The uploadFile function is defined as follows

function uploadFile(file, s3Data, url){ var xhr = new XMLHttpRequest(); xhr.open("POST", s3Data.url); var postData = new FormData(); for(key in s3Data.fields){ postData.append(key, s3Data.fields[key]); } postData.append('file', file); console.log(file); xhr.onreadystatechange = function() { if(xhr.readyState === 4){ if(xhr.status === 200 || xhr.status === 204){ document.getElementById("preview").src = url; document.getElementById("avatar-url").value = url; } else{ alert("Could not upload file."); } } }; xhr.send(postData); } });

My bucket CORS config is as follows

<?xml version="1.0" encoding="UTF-8"?> <CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/"> <CORSRule> <AllowedOrigin>http://localhost:5000</AllowedOrigin> <AllowedMethod>GET</AllowedMethod> <AllowedMethod>POST</AllowedMethod> <AllowedMethod>PUT</AllowedMethod> <AllowedHeader>*</AllowedHeader> </CORSRule> </CORSConfiguration>

But I keep getting the following error upon fileUpload