Cannot create URL for blob!

[slytter]

Describe the bug

Cannot upload images via method UploadClient.uploadFile on android using Expo Go. I get the following error:

"Cannot create URL for blob!"

When I try to upload an image to Uploadcare via the JS api client, it fails on android only

Expected behavior

The image 'test.jpg' is expected to be uploaded to ImageCare upon following code being executed:

Code / screenshots

import { UploadClient } from '@uploadcare/upload-client'

const client = new UploadClient({ publicKey: 'XXXXXXXXX',  })

// Uploads an image to UploadCare
export const uploadToUploadCare = async (blob: Blob, fileName: string) => {
    try {
        const fileRef = await client.uploadFile(blob, {
            fileName,
        })

        return fileRef.cdnUrl

    } catch (e) {
        console.warn(e)
        throw e
    }
}

// Grabs first image from gallery and calls uploadToUploadCare
const testUploader = async () => {
    try {
        const images = await MediaLibrary.getAssetsAsync({
            sortBy: 'creationTime',
            first: 1,
            mediaType: [MediaType.photo, ],
        })

        const img = await fetch(images.assets[0].uri)
        const blob = await img.blob()

        await uploadToUploadCare(blob, 'test.jpg')

    } catch (e) {
        alert(e)
    }
}

testUploader()

Environment

• Library version: 5.1.1

• Language/framework version: expo: 46.0.0 (managed workflow) react-native: 0.69.6

• OS version: Android 11 (OnePlus 6)

[nd0ut]

Hey @slytter,

is it reproducible on the emulator?

[slytter]

Havn't tried it, but as I see it's a problem relatated to the js runtime, so it should be reproducable on the emulator as well.

[sourabhdadapure]

We are also experiencing this issue. Is there a solution or workaround available? @uploadcare/upload-client": "5.1.1"

[nd0ut]

We are also experiencing this issue. Is there a solution or workaround available? @uploadcare/upload-client": "5.1.1"

Hello! Please try @uploadcare/upload-client@6.1.0-alpha.1. You will need to install URL polyfill and update Android manifest, see https://github.com/uploadcare/uploadcare-js-api-clients/blob/ed04c9c991a3a832cef2263b98f40824bcbbe4d1/packages/upload-client/README.md#react-native

[sourabhdadapure]

Thanks for your response @nd0ut but on Android it works when I use and Image object instead of a blob. Also, just FYI, when I installed the above version it kept erroring out saying public key is required even when I had the public key attached

imageAsset = { fileName: "", type:"", uri: "" }

[nd0ut]

Thanks for your response @nd0ut but on Android it works when I use and Image object instead of a blob. Also, just FYI, when I installed the above version it kept erroring out saying public key is required even when I had the public key attached

imageAsset = { fileName: "", type:"", uri: "" }

Could you provide exact code snippet, react-native version (and Expo version in case you use it), Android SDK version?

[sourabhdadapure]

React: 17.0.2
React Native: 0.68
@uploadcare/upload-client: 5.1.1

Android:
googlePlayServicesVersion = "17.+" 
buildToolsVersion = "31.0.0"
minSdkVersion = 21
compileSdkVersion = 31
targetSdkVersion = 31

export default async function uploadPhoto(media: Asset) {
  try {
    if (!media.uri) return;
    // TODO: Add logic to handle video uploads and multiple uploads
    const imageUri = await fetch(media.uri);
    const blob = await imageUri.blob();
    const asset = {
      fileName: media.fileName,
      type: media.type,
      uri: media.uri,
    };

    // asset type works on Android but not iOS
    const filePayload = Platform.OS == 'android' ? asset : blob;

    const uploadedFile = await client.uploadFile(filePayload, {
      contentType: media.type,
      fileName: media.fileName,
    });
    if (uploadedFile.cdnUrl) {
      return uploadedFile.cdnUrl;
    }
  } catch (e) {
    console.warn(e);
  }

I updated the filePayload to use Image asset for android because blob format didn't work on Android

And when I updated the upload care version @uploadcare/upload-client@6.1.0-alpha.1 and the following code https://github.com/uploadcare/uploadcare-js-api-clients/blob/ed04c9c991a3a832cef2263b98f40824bcbbe4d1/packages/upload-client/README.md#react-native Android manifest from your suggestion above, It started failing with upload care public key is required error even when I had the public key attached. It still worked when I used the image asset instead of blob object

[nd0ut]

@sourabhdadapure could you also provide content type and size of your file? And did I understand correctly that you don't use Expo?