Upload blob file in react native ReadableStream doesn't exit

[jkpandianbsetec]

Checkboxes for prior research

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

Describe the bug

LOG uploadS3>>>> {"ACL": "public-read", "Body": {"blob": {"_data": [Object]}, "name": 1703332949781, "type": "image/jpeg", "uri": "file:///storage/emulated/0/Android/data/com.upliftapps/files/Pictures/e914b6a7-7802-400a-9eff-24e14b4a150b.jpg"}, "Bucket": "bucket", "ContentType": "image/jpeg", "Key": "photos/1703332949781"}

I have picked file and converted file as blob and passed to body params but getting LOG [ReferenceError: Property 'ReadableStream' doesn't exist] ==error from uploads3 this error

SDK version number

@aws-sdk/lib-storage

Which JavaScript Runtime is this issue in?

React Native

Details of the browser/Node.js/ReactNative version

react 18

Reproduction Steps

• Select the file from android device
• Convert the selected file as blob
• Upload the blob using aws sdk v3 lib storage package

Observed Behavior

Seems the aws sdk v2 s3.upload working fine but aws sdk v3 not working

Expected Behavior

Seems the aws sdk v2 s3.upload working fine but aws sdk v3 not working. It should work like the v2 behaviour with progress bar

Possible Solution

No response

Additional Information/Context

No response

[RanVaknin]

Hi @jkpandianbsetec ,

I'm not a react native user, but Im a bit confused by two things:

1. not sure why you are using fetch to read from a local file, after a bit of researching online I found that you can use https://docs.expo.dev/versions/latest/sdk/filesystem/ if you are using Expo. so something like:

    const fileContent = await FileSystem.readAsStringAsync(inputFile.path, { encoding: FileSystem.EncodingType.Base64 });
    const buffer = Buffer.from(fileContent, 'base64');

2. Im not sure why you are constructing a fileObj? You can just pass in the buffer directly:

    new PutObjectCommand({
      Bucket: bucketName,
      Key: key,
      Body: buffer,
     // rest of params.
    });

Can you give this a try?

Thanks, Ran~

[Joshandrews43]

Commenting because I have this issue as well, only in production. I use expo-dev-client in my react native app and even with a polyfill, this is not working on a physical device

[marcus-menezes]

I'm having this problem too, got this error: ReferenceError: Property 'ReadableStream' doesn't exist when i send a request to Cognito but has a error in the response. Response 200 working normally.

I´m using this libs for aws provider config.

I´m try to install web-streams-polyfill but don´t work.

Does anyone have any ideas?

[NorseGaud]

@marcus-menezes , you ever figure this out?

[abcarlisle]

Having this issue as well.

[NorseGaud]

@abcarlisle here is the fix https://stackoverflow.com/a/77744609/1875932

[abcarlisle]

@abcarlisle here is the fix https://stackoverflow.com/a/77744609/1875932

Thank you, however that didn't work for me.

I imported what the stackoverflow response said to at the root of my project with no luck.

I am using expo with these packages. "react-native-get-random-values": "~1.9.0", "react-native-url-polyfill": "^2.0.0", "web-streams-polyfill": "^4.0.0" "@aws-sdk/client-s3": "^3.569.0", "@aws-sdk/lib-storage": "^3.569.0",

[NorseGaud]

@abcarlisle and how are you importing them in your code?

[abcarlisle]

@abcarlisle and how are you importing them in your code?

My apologies that did fix it, I had another unrelated issue. I appreciate the help!

[RanVaknin]

Solution is mentioned here. Closing. Thanks, Ran~

[github-actions[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs and link to relevant comments in this thread.