Subo un objeto blob en pdf a S3
const params = { Bucket: "poster-print-bucket", Key: Date.now().toString() + ".pdf", Body: blob, contentType: "application/pdf", }; const uploaded = await S3.upload(params).promise();Cuando abro una URL que es, por ejemplo, https://poster-print-bucket.s3.ca-central-1.amazonaws.com/1633526785678.pdf , me descarga un pdf en blanco.
Pensé que tal vez mi blob estaba dañado o algo así, pero logré cargar el mismo blob en el almacenamiento de Firebase sin problemas.
por cierto, estoy usando la ruta nextjs api/upload-poster
¿Qué esta pasando?
Pasé más tiempo solucionando este problema de lo que me gustaría admitir. Aquí está la solución:
Frontend (convirtiendo blob a base64 antes de enviarlo al backend):
function toBase64(blob) { const reader = new FileReader(); return new Promise((res, rej) => { reader.readAsDataURL(blob); reader.onload = function () { res(reader.result); }; }); } toBase64(currentBlob) .then((blob) => { return axios .post("/api/upload-poster", blob, { headers: { "Content-Type": "application/pdf", }, }) .then(({ data }) => data.uploaded.Location); })back-end:
const base64 = req.body; const base64Data = Buffer.from(base64.replace(/^data:application\/\w+;base64,/, ""), "base64"); const params = { Bucket: "poster-print-bucket", Key: nanoid() + ".pdf", Body: base64Data, ContentEncoding: "base64", contentType: "application/pdf", }; const uploaded = await S3.upload(params).promise();¿Por qué se requiere todo este canto y baile? ¿Puede ser algo más fácil?
Con AWS SDK v3 (actualizado en el momento de esta publicación), podría usar PutObjectCommand, que acepta un Uint8Array como parámetros de Body ( docs ).
Convierta su instancia de Blob en un ArrayBuffer ( docs ) y su ArrayBuffer en un Uint8Array.
El código se vería así:
const { S3Client, PutObjectCommand } = require('@aws-sdk/client-s3'); const client = new S3Client(/* config */); const arrayBuffer = await blob.arrayBuffer(); const typedArray = new Uint8Array(arrayBuffer); await client.send(new PutObjectCommand({ Bucket: /* ... */, Key: /* ... */, Body: typedArray, }));