React Native Expo Error [Error: TypeError: stream.arrayBuffer is not a function (it is undefined)]

[tomatenketchup]

Checkboxes for prior research

• I've gone through Developer Guide and API reference
• I've checked AWS Forums and StackOverflow.
• I've searched for previous similar issues and didn't find any solution.

Describe the bug

I'm getting an error that says, "[Error: TypeError: stream.arrayBuffer is not a function (it is undefined)] " although the files are uploaded to the bucket

Regression Issue

• Select this option if this issue appears to be a regression.

SDK version number

@aws-sdk/client-s3@^3.712.0, .^3.701.0

Which JavaScript Runtime is this issue in?

React Native

Details of the browser/Node.js/ReactNative version

0.76.2

Reproduction Steps

export const uploadFileToR2 = async (file: any) => {
  try {
    // move these to cloud or backend or cloud functions
    const s3Client = new S3Client({
      region: 'auto',
      endpoint: `https://${config.CLOUDFLARE_ACCOUNT_ID}.r2.cloudflarestorage.com`,
      credentials: {
        accessKeyId: config.CLOUDFLARE_ACCESS_KEY,
        secretAccessKey: config.CLOUDFLARE_SECRET_KEY
      }
    })

    const { uri, mimeType } = file

    // get file from uri
    const uriResponse = await fetch(uri)
    const contentBody = await uriResponse.blob()

    // get file extension
    const extension = mime.getExtension(mimeType)

    // create random file name
    const fileName = `${Date.now()}-${Math.random()
      .toString()
      .replace('.', '-')}.${extension}`

    const putObjectCommand = new PutObjectCommand({
      Bucket: config.CLOUDFLARE_BUCKET_NAME,
      Key: fileName,
      Body: contentBody,
      ContentType: mimeType
    })

    const response = await s3Client.send(putObjectCommand)
    return response
  } catch (error: any) {
    console.log(error?.$response)
    throw new Error(error)
  }
}

Observed Behavior

(NOBRIDGE) LOG  [Error: TypeError: stream.arrayBuffer is not a function (it is undefined)

Expected Behavior

The expected behavior shouldn't throw an error on the catch since the files were uploaded the to bucket successfully

Possible Solution

No response

Additional Information/Context

The tricky part is, the files are uploaded to the bucket. I'm using Cloudflare R2. I even tried older version of the package, still, the error persists. I even tried using axios for getting the blob, still, the error persists.

[Adelkkaa]

same issue

[aBurmeseDev]

Hi @tomatenketchup - thanks for reaching out.

This error occurs because SDK expects the Body param of the PutObject to be a readable stream or a typed array like Uint8Array. However, you're passing a Blob object directly, which doesn't have an arrayBuffer method.

You need to convert the Blob to a Uint8Array or a readable stream before passing it to the PutObjectCommand. Here's modified code:

  ....

   // create random file name
    const fileName = `${Date.now()}-${Math.random()
      .toString()
      .replace('.', '-')}.${extension}`

    // Convert Blob to Uint8Array
    const arrayBuffer = await contentBody.arrayBuffer()
    const buffer = new Uint8Array(arrayBuffer)

    const putObjectCommand = new PutObjectCommand({
      Bucket: config.CLOUDFLARE_BUCKET_NAME,
      Key: fileName,
      Body: buffer, // Pass the Uint8Array as the Body
      ContentType: mimeType
    })
  ....

Hope that helps!
John

cc: @Adelkkaa

[ManiMohan-Radhakrishnan]

same issue

  const bodyBuffer = Buffer.from(data, 'utf-8');
  const checksum = await sha256(bodyBuffer.toString('utf-8'));
  const checksumCreateTime = new Date().getTime();

  const wsClient = WebSocketClient.getInstance();


  const params = {
    Bucket: bucketName,
    Key: objectKey,
    Body: bodyBuffer,
    ContentType: contentType,
  };

[aBurmeseDev]

@ManiMohan-Radhakrishnan - are you working with string or binary as your "data"? If it's string, it should be working as expected with "utf-8", but if it's binary, I'd suggest "binary" encoding.

const bodyBuffer = Buffer.from(data, 'binary');
const checksum = await sha256(bodyBuffer.toString('utf-8'));
const checksumCreateTime = new Date().getTime();

Hope that helps!

[trivikr]

I came across the same issue in code samples aws-samples/aws-sdk-js-tests#223

The workaround appears to be pinning SDK version to <=v3.685.0

[trivikr]

As per related discussions, another recommendation is to polyfill Blob.arrayBuffer() on react-native environments

#6636 (comment)

[trivikr]

We re-added polyfill in smithy-lang/smithy-typescript#1483, and it was published in @smithy/[email protected]

Can you update your lockfile, or run a fresh install of your dependencies, and check if this issue is reproducible?