Error: tus: cannot fetch `file.uri` as Blob, make sure the uri is correct and accessible and some time the video is uploaded to the server and i get the url

[fazzysyed]

I am using this Library with React native I am uploading a video to Cloudflare and I am getting the video through react-native image picker. Some of the time the video gets uploaded and sometimes I get this error. this is the response

this is my code :

  const options2 = {
      title: 'Select video',
      mediaType: 'video',
      path: 'video',
      durationLimit: 30,
      quality: 1,
      cameraType: 'front',

      takePhotoButtonTitle: 'Take a video',
    };

    ImagePicker.showImagePicker(options2, (response) => {
      console.log('Response = ', response);

      if (response.didCancel) {
        console.log('User cancelled image picker');
      } else if (response.error) {
        console.log('ImagePicker Error: ', response.error);
      } else {
        const file = {
          uri: response.uri,
          type: 'video',
        };
        const upload = new Upload(file, {
          endpoint:
            'https://api.cloudflare.com/client/v4/accounts/"Myaccount/stream',
          retryDelays: [0, 1000, 3000, 5000],
          metadata: {
            filename: `video.mp4`,
            filetype: 'mp4',
          },
          headers: {
            Authorization: 'Bearer token',
          },
          onError: (error) => {
            console.log(error);
          },
          onProgress: (uploadedBytes, totalBytes) => {
            console.log(uploadedBytes / totalBytes);
          },
          onSuccess: () => {
            console.log(upload.url);
          },
        });
        upload.start();
      }
    });

this the url i get someof the time https://api.cloudflare.com/client/v4/accounts/"Myaccount"/media/"MyAccount"?tusv2=true

Mostly get this.

Setup details

• Runtime environment:
• Mac Os.
• Node js v12.18.4 -"react-native": "0.63.3",
• "tus-js-client": "^2.2.0"

[Acconut]

I assume your are developing for Android, is that correct?

I don't have a concrete idea but I noticed that you are using the showImagePicker method, which is removed in react-native-image-picker v3: https://github.com/react-native-image-picker/react-native-image-picker#migration-from-2xx-to-3xx Maybe upgrading react-native-image-picker and using the new API can help you here.

[lululeon]

I have the same issue in react-native: the files have uploaded successfully before, but intermittently I am getting this file.uri ... error. It seems to be happening here: https://github.com/tus/tus-js-client/blob/master/lib/browser/uriToBlob.js

I notice this file is in the /browser folder. I am on mobile, not browser - not sure if that matters.

[Acconut]

@lululeon Please share more details about your setup and try to narrow down in which situations the error occurs. That would help us a lot.

I notice this file is in the /browser folder. I am on mobile, not browser - not sure if that matters.

No, that's intended and all fine. We categorize React Native as a brower-like environment as it has many similarities to web browsers.

[lululeon]

@lululeon Please share more details about your setup and try to narrow down in which situations the error occurs. That would help us a lot.

You know what I found out, when I am running my react-native app in debug mode, it routes to react-native-debugger, and then the upload fails immediately with the file.uri error. But when I switch debugging off, the tus upload runs just fine! Is it possible that react-native-debugger confuses tus about the type of environment it's running in? eg in the openFile() call, might rndb handling traffic for the app cause confusion in this line:

if (isReactNative() && input && typeof input.uri !== 'undefined')

No, that's intended and all fine. We categorize React Native as a brower-like environment as it has many similarities to web browsers.

I think that makes sense, and might explain the above, actually. Thank you!

[Acconut]

Is it possible that react-native-debugger confuses tus about the type of environment it's running in?

Interesting theory, let's test it out! What is the value of navigator.product when you run your app inside the debugger? It should be ReactNative for our isReactNative function to work: https://github.com/tus/tus-js-client/blob/master/lib/browser/isReactNative.js#L3

This should be the case for all applications but maybe the debugger is interfering: https://github.com/facebook/react-native/blob/6e6443afd04a847ef23fb6254a84e48c70b45896/Libraries/Core/setUpNavigator.js#L21

If that does not work, please log what file object you are passing into the tus.Upload constructor and check if it has the uri property.

[lululeon]

Interesting theory, let's test it out! What is the value of navigator.product when you run your app inside the debugger? It should be ReactNative for our isReactNative function to work: https://github.com/tus/tus-js-client/blob/master/lib/browser/isReactNative.js#L3

In rndb the returned string directly on the console is "gecko". I can't access navigator in react-native; it appears undefined. Anyway the upload works, uri values are OK, as long as debugging is off.

[Acconut]

In rndb the returned string directly on the console is "gecko". I can't access navigator in react-native; it appears undefined. Anyway the upload works, uri values are OK, as long as debugging is off.

Oh, that's interesting. In this case, we should maybe switch the if statement to not test whether the environment is React Native, but whether the object has a uri property and looks like a React Native file object. Would you be interested in opening a PR for this?

[bogdandobai]

So is there a way to fix this ? For me it only happens on Android.

[Acconut]

@bogdandobai Currently this has not been fixed as I am not very experienced with React Native. That being said, would you be interested in working on a PR to implement the fix I suggested:

switch the if statement to not test whether the environment is React Native, but whether the object has a uri property and looks like a React Native file object

[nikolaytsigvintsev]

Hi @fazzysyed!

try replacing response.uri with response.path and as I remember, you need to add files:// :

  if (response.didCancel) {
    console.log('User cancelled image picker');
  } else if (response.error) {
    console.log('ImagePicker Error: ', response.error);
  } else {
    const file = {
      uri: response.path, <==== replace 
      type: 'video',
    };

[SandipJawaleRN]

Hi @fazzysyed! Add android:requestLegacyExternalStorage="true" inside <application> in AndroidManifest.xml and compileSdkVersion = 29 targetSdkVersion = 29 in build.gradle.

Hope this helps!

[majirosstefan]

@SandipJawaleRN https://developer.android.com/google/play/requirements/target-sdk

"Starting in November 2021, app updates will be required to target API level 30 or above and adjust for behavioral changes in Android 11."