react-native: Missing request token for request, while uploading image file getting error.

This got fixed in v0.63.3

dataForm.append('file', { uri: Platform.OS=='ios'?photo.uri.replace("file://", "/private"):photo.uri, name: 'photo.jpg', type: 'image/jpg' });

IOS : photo.uri.replace(“file://”, “/private”)

Here is a minimal repo that demonstrates this error. Choose a file from the camera roll and then try to retrieve that using fetch.

https://github.com/struct78/react-native-0.63.1-missing-request-token

dataForm.append('file', { uri: Platform.OS=='ios'?photo.uri.replace("file://", "/private"):photo.uri, name: 'photo.jpg', type: 'image/jpg' });

IOS : photo.uri.replace(“file://”, “/private”)

still issue

I am using 0.63.2 and the problem still present. I use apollo-upload-client to upload files. Please advise. Update: temporarily solved by adding =^{} after the request token.

@kockok could you please explain more on your solution, i’m using ReactNativeFile with apollo-upload-client to upload file

Edit this file: react-native/Libraries/Image/RCTImageLoader.mm to __block RCTImageLoaderCancellationBlock requestToken = ^{};

Thank you @anthony1110! This helped me solve this for now.

I also used patch-package to create a diff patch so this hacky solution can be committed to our repo until this is properly fixed.

If anyone plans to use this hack, I’d recommend reading up on patch-package and creating a patch/committing it.

Here’s the diff patch it produced:

diff --git a/node_modules/react-native/Libraries/Network/RCTNetworkTask.mm b/node_modules/react-native/Libraries/Network/RCTNetworkTask.mm
index 1cc6252..ce4c2cc 100644
--- a/node_modules/react-native/Libraries/Network/RCTNetworkTask.mm
+++ b/node_modules/react-native/Libraries/Network/RCTNetworkTask.mm
@@ -101,9 +101,9 @@ - (BOOL)validateRequestToken:(id)requestToken
   if (_requestToken == nil) {
     if (requestToken == nil) {
       if (RCT_DEBUG) {
-        RCTLogError(@"Missing request token for request: %@", _request);
+//        RCTLogError(@"Missing request token for request: %@", _request);
       }
-      valid = NO;
+      valid = YES;
     }
     _requestToken = requestToken;
   } else if (![requestToken isEqual:_requestToken]) {
@@ -123,6 +123,7 @@ - (BOOL)validateRequestToken:(id)requestToken
     }
     [self invalidate];
   }
+
   return valid;
 }
 

I also faced same issue. But I manually updated the RCTNetworkTask.mm file. I know it is not correct method but at least I can upload the image now until React-Native developer share their fix to us.

node_modules/react-native/Libraries/Network/RCTNetworkTask.mm

- (BOOL)validateRequestToken:(id)requestToken
{
  BOOL valid = YES;
  if (_requestToken == nil) {
    if (requestToken == nil) {
      if (RCT_DEBUG) {
//        RCTLogError(@"Missing request token for request: %@", _request);
      }
      valid = YES;
    }
    _requestToken = requestToken;
  } else if (![requestToken isEqual:_requestToken]) {
    if (RCT_DEBUG) {
      RCTLogError(@"Unrecognized request token: %@ expected: %@", requestToken, _requestToken);
    }
    valid = NO;
  }

  if (!valid) {
    _status = RCTNetworkTaskFinished;
    if (_completionBlock) {
      RCTURLRequestCompletionBlock completionBlock = _completionBlock;
      [self dispatchCallback:^{
        completionBlock(self->_response, nil, RCTErrorWithMessage(@"Invalid request token."));
      }];
    }
    [self invalidate];
  }

  return valid;
}

100% reproducible on 0.63 (iOS).

fixed the error

before i was fetching image.path and it was working just fine.

now u have to pass the sourceURL as the following

Bringing together all the fixes here, hopefully we can get a fix for this merged to core soon:

iOS: Revert a PR, requires modifying node_modules: https://github.com/facebook/react-native/issues/29364#issuecomment-671565181, PR submitted here for the fix: https://github.com/facebook/react-native/pull/29595

Android: Upgrade Flipper version https://github.com/facebook/react-native/issues/28551#issuecomment-674351386

I’ve updated the app to RN 0.63 and reproduce this 100% o the time, either on emulator or iPhone… To be more clear, the image doesn’t even go out of the device, using Charles proxy doesn’t show any network usage upon upload.

@kelset Can someone from the react native team help us figure out where the problem comes from ? Looks like people here (myself included) can’t find why this is happening

I’ve managed to solve the issue on my end by reverting one commit: https://github.com/facebook/react-native/issues/29364#issuecomment-663005914

@VonJie Thanks man

dataForm.append(‘file’, { uri: Platform.OS==‘ios’?photo.uri.replace(“file://”, “/private”):photo.uri, name: ‘photo.jpg’, type: ‘image/jpg’ });

this is work for me too…

Since this seems to be surfacing more with the new 0.63, can someone who is facing this issue please post a full repro? Meaning, a sample react-native init’d project with the minimal code to reproduce the issue posted above.

@hhunaid I mean this

well if the Debug mode is removed, no problem anymore. So when I am about to test an image upload, I remove the debug mode and watch the debug messages in my terminal instead.

I am using 0.63.2 and the problem still present. I use apollo-upload-client to upload files. Please advise.

Update: temporarily solved by adding =^{} after the request token.

folks I would recommend either submitting a PR or checking the commits on master for candidate for cherry picking in order to fix this.

@uusa35 can you provide a code sample? I was pulling the uri too and it was still failing for me

dataForm.append('file', { uri: Platform.OS=='ios'?photo.uri.replace("file://", "/private"):photo.uri, name: 'photo.jpg', type: 'image/jpg' }); IOS : photo.uri.replace(“file://”, “/private”)

still issue

thanks, it works for me.

I have the same issue. When it will be fixed?

Same here, after the upgrade if I make a request using fetch(“SOME LOCAL PATH”) I get the error. It’s woking correctly with the older version

@keithhackbarth , android one is easy, just upgrade the FLIPPER_VERSION=0.41.0 at android/gradle.properties then issue will be resolved.

any update on this. would love to get this solved.

@uusa35 can you provide a code sample? I was pulling the uri too and it was still failing for me

see this https://github.com/facebook/react-native/issues/29364#issuecomment-660718932

@fkgozali @p-sun Can you please assist here? This is breaking very core functionality for folks

In my case, thats what worked

    const data = new FormData();
    data.append("avatar", {
      type: "image/jpeg",
      name: `${user.id}.jpg`,
      uri:
        Platform.OS == "ios"
          ? response.uri?.replace("file://", "/")
          : response.uri,
    });

Error fixed when updating React Native to version 0.63.3

@FabrizioCaldarelli – I also didn’t want to patch, so thank you for the rn-fetch-blob suggestion. Works great!

0.63.2 still exist

Looks like @sammy-SC is working on a fix and its under review https://github.com/facebook/react-native/issues/29364#issuecomment-664526253

@ssilverr , no need.

For android, upgrade the FLIPPER_VERSION=0.41.0 at android/gradle.properties

For IOS, you can do this https://github.com/facebook/react-native/issues/29364#issuecomment-663005914.

I would say this is quite critical. Can’t release without being able to post form data.

Originally our fetch body was being set to { uri: photoUri, name: fileName, type: "image/png" }. In v0.63 this stopped working.

Using @uusa35 method and restructuring the body to ["image", { uri: photoUri, name: fileName, type: "image/png" }] the fetch goes through, but does not actually upload the file. S3’s url returns an empty image file.

So it seems that the body needs to be an array(?) instead of a simply hash to go through? @uusa35 can you please elaborate on your fetch request and possibly include an example?

same issue , any updates ? ! RN 0.63.1