Requesting Upload/lib-storage full working example

[jereztech]

Describe the bug

Upload an image from expo app not working.

Your environment

aws-sdk/[email protected]
aws-sdk/[email protected],
aws-sdk/[email protected],
aws-sdk/[email protected],
aws-sdk/[email protected],
[email protected]
[email protected]
[email protected]
[email protected]

Steps to reproduce

1. create new expo app -> expo init demo
2. paste the following in the package.json: "@aws-sdk/client-cognito-identity": "^3.10.0", "@aws-sdk/client-s3": "^3.10.0", "@aws-sdk/credential-provider-cognito-identity": "^3.10.0", "@aws-sdk/lib-storage": "^3.10.0", "@aws-sdk/s3-request-presigner": "^3.10.0", "expo-image-picker": "~9.2.1"
3. npm install
4. paste the code in the App.js

import React from 'react';
import * as ImagePicker from 'expo-image-picker';
import { Alert, StyleSheet, View, Button } from 'react-native';
import { CognitoIdentityClient } from "@aws-sdk/client-cognito-identity";
import { fromCognitoIdentityPool } from "@aws-sdk/credential-provider-cognito-identity";
import { Upload } from "@aws-sdk/lib-storage";
import {
  S3Client,
} from "@aws-sdk/client-s3";

const REGION = "us-east-2";
const s3Client = new S3Client({
  region: REGION,
  credentials: fromCognitoIdentityPool({
    client: new CognitoIdentityClient({ region: REGION }),
    identityPoolId: "us-east-2:XXXXXXXXXXXXXXX",
  }),
});

const uploadFile = async (bucketName, image) => {
  try {
    const _upload = new Upload({
      client: s3Client,
      params: { Bucket: bucketName, Key: image.name, Body: image },
    });
    _upload.on("httpUploadProgress", (progress) => console.log(progress.loaded));
    return await _upload.done();
  } catch (error) {
    console.log(error);
    throw new Error(error.message);
  }
}

const openImagePicker = async () => {
  let permissionResult = await ImagePicker.requestMediaLibraryPermissionsAsync();
  if (permissionResult.granted === false) {
    Alert.alert('need permission!');
    return;
  }
  return ImagePicker.launchImageLibraryAsync();
}

export default function App() {
  return (
    <View style={styles.container}>
      <Button
        title="UPLOAD EXPO IMAGE"
        onPress={async () => {
          let pickerResult = await openImagePicker();
          !pickerResult.cancelled && uploadFile(
            'avatars',
            {
              uri: pickerResult.uri,
              name: 'img001',
              type: pickerResult.type,
            }
          );
        }} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Observed behavior

Upload an image from expo app not working.

Expected behavior

Upload an image from expo app.

Additional context

Error: Can't find variable: ReadableStream.

[ajredniwja]

Hi @jereztech, I was getting a different error from the code above which was Body Data is unsupported format, expected data to be one of: string | Uint8Array | Buffer | Readable | ReadableStream | Blob;.

I made some minor changes to the code to use blob which works:

The code:
App()

export default function App() {
  return (
    <View style={styles.container}>
      <Button
        title="UPLOAD EXPO IMAGE"
        onPress={async () => {
          let pickerResult = await openImagePicker();
          const response = await fetch(pickerResult.uri);
          const blob = await response.blob();

          !pickerResult.cancelled && uploadFile(
            'avatars',
            {
              uri: pickerResult.uri,
              name: 'img001',
              type: pickerResult.type,
              blob: blob
            }
          );
        }} />
    </View>
  );
}

uploadFile :

const uploadFile = async (bucketName, image) => {
  try {
    const _upload = new Upload({
      client: client,
      params: { Bucket: bucketName, Key: image.name, Body: image.blob },
    });
    _upload.on("httpUploadProgress", (progress) => console.log(progress.loaded));
    return await _upload.done();
  } catch (error) {
    console.log(error);
    throw new Error(error.message);
  }
}

Please let us know if that doesn't work as I was able to successfully upload an image with that.

[jereztech]

Hi @ajredniwja thanks a lot for reply. Unfortunately it's not working. I'm taking the following error:
Can't find variable: ReadableStream
at node_modules/@aws-sdk/lib-storage/dist/cjs/chunker.js:23:47 in getChunk
at node_modules/@aws-sdk/lib-storage/dist/cjs/Upload.js:90:24 in __doMultipartUpload
at [native code]:null in flushedQueue
at [native code]:null in invokeCallbackAndReturnFlushedQueue

[ludwighen]

@ajredniwja FYI I'm having the same issue however changing to blob, like in your example doesn't fix the error for me. I still get Body Data is unsupported format, expected data to be one of: string | Uint8Array | Buffer | Readable | ReadableStream | Blob; in safari

[bmichotte]

I have the exact same issue, but on the browser (react app / Safari)

I get the file from an <input type="file" /> then submit it to s3 with nearly the same code as others

// file is a File from the input

const client = new S3({
    region,
    credentials: {
        accessKeyId,
        secretAccessKey,
    },
})
 const params = {
    Bucket: bucketName,
    Key: pathToFile,
    Body: file,
    ACL: 'public-read',
    ContentType:file.type,
}
const upload = new Upload({
    client,
    queueSize: 3,
    params,
})

upload.on('httpUploadProgress', progress => {
    if (progress.loaded && progress.total) {
        const uploaded = Math.round(progress.loaded / progress.total * 100)
        onUploadProgress(uploaded)
    }
})

const data = await upload.done()

I also tried to "rebuild" the blob with the following but without success

const buffer = await file.arrayBuffer()
const blob = new Blob([new Uint8Array(buffer)], { type: file.type })
// send the blob

@ajredniwja Do you have any idea/solution ?

[ajredniwja]

@jereztech @ludwighen I am successfully able to upload an image using the code above, can you guys check you are on the latest version? If possible set up a repo with your code which I can use to reproduce the code.

@bmichotte I have seen this issue with safari: #2145

I am working on it, will have inputs soon.

[jereztech]

Hi @ajredniwja, I'm using the latest version @aws-sdk/[email protected] I have tried again but without success. Retrieving the blob info console.log(blob.type, blob.size, blob.stream) I see that the stream is undefined image/jpeg 3423356 undefined, maybe it's an Expo bug, I'm getting the fallowing error: Can't find variable: ReadableStream. To solve the problem quickly I'm using the Java SDK instead.

[ludwighen]

same issue with safari. Latest version. upload on chrome etc. works fine.

` const buffer = await file.arrayBuffer();
const blob = new Blob([new Uint8Array(buffer)], { type: file.type });

const fileName = `${v4()}.${getFileExtensionFromUrl(file.name)}`;
const photoKey = path + fileName;
const uploadParams = {
    Bucket: S3_BUCKET_NAME,
    Key: photoKey,
    Body: blob
};

try {
    const paralellUploads3 = new Upload({
        client: s3,
        queueSize: 1,
        leavePartsOnError: false,
        params: uploadParams
    });

    paralellUploads3.on('httpUploadProgress', (progress) => {
        const percent = Math.round((progress.loaded / progress.total) * 100);
        onProgress({ percent });
    });

    await paralellUploads3.done();

    const returnData = {
        url: photoKey,
        uid: file.uid,
        link: `${WEB_URL}/${photoKey}`
    };

    dispatch(uploadToS3RequestSuccess(returnData));
} catch (err) {
    dispatch(uploadToS3RequestFailure(friendlyMessages.REQUEST_FAILED));
}`

[ajredniwja]

@ludwighen Will track the safari issue with #2145, I'd close this issue now @jereztech, please reach out if you have any other questions.

[github-actions]

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.