Estoy tratando de cargar un archivo de foto en un depósito S3 usando la API Fetch. Recibo 400 solicitudes incorrectas en el POST cuando intento cargar la foto. Obtengo la URL de la publicación prefirmada y los detalles del archivo correctamente, pero creo que la forma en que estoy formateando los datos del formulario es incorrecta.

Estoy usando una entrada de archivo html que usa onchange para ejecutar una función javascript handlePhoto.

el html es

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

y la funcion javascript es

 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" } }) }); }

Cualquier ayuda sería muy apreciada.