Creé una aplicación NextJS React que carga audio en formato MP3 a un depósito de AWS S3 . He probado mi API Route con un componente simple de carga de archivos HTML ... ¡y funciona!

Sin embargo, cuando trato de cargar audio creado en el navegador, recibo un 400 Bad Request Error para la solicitud POST , por lo que creo que mi componente browser-record-upload Javascript es problemático. Sin embargo, no arroja ningún error, pero la carga exitosa falla.

Aquí está el componente:

 const submitVoiceMemo = async () => { console.log('this is the payload', audioFile) // audioFile is an .mp3 file that is held in state once the recording is completed const filename = encodeURIComponent(audioFile.name) console.log('this is the filename:', filename) const res = await fetch(`/api/upload-url?file=${filename}`) console.log('This is the res: ', res) const { url, fields } = await res.json() const formData = new FormData() Object.entries({ ...fields, audioFile }).forEach(([key, value]) => { formData.append(key, value) }) console.log("This is the formData: ", ...formData) const upload = await fetch(url, { method: 'POST', body: formData }) console.log("This is the upload: ", upload) // This returns a 400 error and the response below is upload failed. if (upload.ok) { console.log('Uploaded successfully!') } else { console.error('Upload failed.') } }

Como dije, con un componente simple file-upload HTML , la API funciona, así que creo que el problema está en el componente React , y no en la API . Sin embargo, aquí está la API para completar:

 module.exports = async (req, res) => { try { aws.config.update({ accessKeyId: process.env.AWS_ACCESS_KEY_1, secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY_ID, region: 'us-east-2', signatureVersion: 'v4' }) const s3 = new aws.S3() const post = await s3.createPresignedPost({ Bucket: 'waveforms', Fields: { key: `voicememo/${req.query.file}`, ACL: 'public-read', ContentType: 'audio/mpeg' } }) console.log('This is the Post: ', post) res.status(200).json(post) } catch (e) { res.status(500).json({ error: e.message }) } }