Upload recorded audio to S3?

[theDanielJLewis]

I've been banging my head on my keyboard trying to figure this out today.

I'm using this to record audio in the browser. That gives me a blob of that audio. I can convert that blob into a URL object and download it just fine. It makes a .webm file that I can play in VLC or convert to something else.

But I'm trying to upload that file to Amazon S3 / Backblaze B2 (same API). Everything I've tried falls into one of these three problems:

1. The resulting file is much larger than expected and won't play in VLC no matter the file extension I try.
2. React complains that I can't pass anything but a string to a client component, but my uploadFile() function is actually explicitly in a server component or else it can't see my S3 keys in my .env file.
3. The AWS SDK v3 complains, "The first argument must be of type string or an instance of Buffer, ArrayBuffer, or Array or an Array-like Object."

I'm totally exhausted trying to figure this out. Can someone please help me?

Thanks in advance!

[samhirtarif]

For AWS SDK v3, are you trying to use the PutObjectCommand and if so, what are you passing as the Body of the command's input?

I have done something similar to this but with aws-sdk (v2). Here is how I did it.

const uploadFileToS3 = async (filename, fileContent) => {
    const input = {
        Bucket: process.env.S3_BUCKET_NAME,
        Key: filename,
        Body: fileContent // the audio blob
    }

    await s3.upload(input).promise()
}

Apparently the input attributes have remained the same from v2 -> v3

[theDanielJLewis]

Yes, I'm using PutObjectCommand. But it won't accept the blob. It tells me it has to be a "string or an instance of Buffer, ArrayBuffer, or Array or an Array-like Object." I even tried v2 and got the same message.

But even before that, I can't get the blob out of my component because I'm warned that I can pass only strings or plain objects. So that's why I tried converting the blob to a string, but then that seems to corrupt it.

This alone illustrates the problem:

    console.log("Raw", blob);
    const blobText = await blob.text();
    const blobBlob = new Blob([blobText], {
      type: "audio/webm;codecs=opus",
    });
    console.log("Converted", blobBlob);

Returns:

Raw Blob {size: 41785, type: 'audio/webm;codecs=opus'}
Converted Blob {size: 75160, type: 'audio/webm;codecs=opus'}

Note the unexplained size difference. And the second one doesn't play in VLC.

[theDanielJLewis]

I might be making some progress. I found https://gist.github.com/wuchengwei/b7e1820d39445f431aeaa9c786753d8e

If I convert the blob to a dataURL, I can pass it to the server action. And then if I convert it back to a blob, and the resulting size matches!!!!!

But now I'm stuck on not being able to upload a blob to S3. 😦

TypeError [ERR_INVALID_ARG_TYPE]: The first argument must be of type string or an instance of Buffer, ArrayBuffer, or Array or an Array-like Object. Received an instance of Blob

[samhirtarif]

Were you able to make any progress?
If not, please do share the code that you're using to upload the audio blob to S3