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

[sahilpandya]

Missing request token for request, while uploading image file getting error.

Description

While image is uploading to server, sometime its throwing error Missing request token.

React Native version: v0.61.5

Run react-native info in your terminal and copy the results here.

System:
OS: macOS Mojave 10.14.6
CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
Memory: 147.43 MB / 16.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 10.16.3 - ~/.nvm/versions/node/v10.16.3/bin/node
Yarn: 1.21.1 - /usr/local/bin/yarn
npm: 6.9.0 - ~/.nvm/versions/node/v10.16.3/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 13.0, DriverKit 19.0, macOS 10.15, tvOS 13.0, watchOS 6.0
IDEs:
Xcode: 11.0/11A420a - /usr/bin/xcodebuild
npmPackages:
react: 16.12.0 => 16.12.0
react-native: 0.61.5 => 0.61.5
npmGlobalPackages:
react-native-cli: 2.0.1

Steps To Reproduce

Provide a detailed list of steps that reproduce the issue.

1. Add an image from camera and add an image from library.
2. then upload images to server.

Expected Results

Images should be uploaded successfully.

Snack, code example, screenshot, or link to a repository:

[khuyendev]

same issue here

[MaxEgg]

Having this issue constantly in version: 0.63.0-rc.0. Can not upload a file. Tried using the fetch api and Axios. Both throw this error when adding formData with image data to the request. Adding formData with a string value still works as expected.

[linoleum00]

I'm using RN 0.62.2, and I'm having this issue. I'm using rxjs/ajax to upload to a multipart POST API and it crashes!

[sahilpandya]

I got one work around, adding setTimeout for each request, So now am able to upload 90% times. But it is still not 100% workaround.

here is a sample code:
return new Promise(function(resolve, reject) { setTimeout(() => { return request.put(file, options) .then(response => { // success resolve() }) .catch((err) => { reject(err); }); }, 1500); }) .catch(error => { // error })

[linoleum00]

I also read this same workaround, and as you said it is not a 100% solution, sometimes it still crashes

[HugoGresse]

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.

[wezzy]

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

[kelset]

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.

[v-anton]

100% reproducible on 0.63 (iOS).

[dharminderraja]

same here i am using react-native-aws3 to upload the image and it always have this error.
this error start happening when i updated the rn to 0.63 was working fine in previous version of rn.

[struct78]

Have tested this using fetch to read an image with the file protocol and get the same error. Replacing the file:/// URL with a https:// URL works fine.

I don't have time to put it in an easily reproducible demo unfortunately.

https://github.com/trueme-app/trueme-react-native/blob/develop/src/services/s3.ts#L36

Having dug a bit deeper (and not fully understanding how RN workers under the hood, so I apologise in advance if I'm wrong!), I wonder if this commit is the culprit? https://github.com/facebook/react-native/commit/058eeb43b489f52183f081fb7232be683002a242 @p-sun

[leops]

I stumbled upon this problem too, quickly looking at it it seems to me the origin for the problem is this function:

https://github.com/facebook/react-native/blob/f898bb65fac3f26944cbe1c47b87c63b2cd10e03/Libraries/Image/RCTImageLoader.mm#L1101-L1131

When loading a file from the local filesystem loadImageWithURLRequest can (and does) load the file synchronously, and calls the callback block immediately. Since the function hasn't returned yet requestToken is not initialized, hence the "Missing request token" error

[v-anton]

I stumbled upon this problem too, quickly looking at it it seems to me the origin for the problem is this function:

https://github.com/facebook/react-native/blob/f898bb65fac3f26944cbe1c47b87c63b2cd10e03/Libraries/Image/RCTImageLoader.mm#L1101-L1131

When loading a file from the local filesystem loadImageWithURLRequest can (and does) load the file synchronously, and calls the callback block immediately. Since the function hasn't returned yet requestToken is not initialized, hence the "Missing request token" error

Hey @leops
Please let me know if you need any help. Looking forward to a solution, but can't manage it due to another work tasks :(

[stonecoder19]

Having the same issue

[github-actions[bot]]

:warning:	Missing Reproducible Example
:information_source:	It looks like your issue is missing a reproducible example. Please provide a Snack or a repository that demonstrates the issue you are reporting in a minimal, complete, and reproducible manner.

[struct78]

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

[uusa35]

same issue , any updates ? ! RN 0.63.1

[imoby]

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

[uusa35]

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

[imoby]

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

[dorthwein]

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?

[anthony1110]

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;
}

[skoshy]

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;
 }

[kelset]

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]

@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

[nikitph]

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

[SocialBrothersDEV]

Same issue here (0.63)

[YannDeck]

@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

[ajanauskas]

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

[fritzfr]

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

[nikitph]

I concur

On Fri, Jul 24, 2020, 14:47 Felix [e-mail] wrote:

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

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/facebook/react-native/issues/29021#issuecomment-663439018,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/ABGGUBZWKSIGR5O5TCJM7MTR5FGUBANCNFSM4NP2V2NQ
.

[keithhackbarth]

Just to confirm, from our side, we are seeing same issue on both iOS and Android platforms. The above patch fixes (and associated cherry-picked commits) solve the issue for us for iOS but haven't seen any discussion regarding solving image uploads on Android. Anyone have any suggestions where to look?

[anthony1110]

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

[keithhackbarth]

@anthony1110 - It worked! Many thanks!

[ssilverr]

@anthony1110 wait, you need to update the debugger dependency to, allow image uploads??

[anthony1110]

@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.

[JonatanOrtiz]

I tried it all, it didn't work.

[ssilverr]

@anthony1110 but flipper is a debugging tool though? I'm just dumbfounded, how upgrading that leads you to allow image uploads again on android. Is this a debug only issue?

[anthony1110]

@ssilverr , I am not too sure. I guess flipper has some bug there. For android, what I did is upgrade the flipper version and it will resolve the issue for android. I am using react-native 0.63.1.

[mrprkr]

Still having this issue on iOS. Using the patch-package has worked locally but still failed on remote builds.

[weblancaster]

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

[MayoudP]

I'm keep having this issue (see link below) when trying to upload image file too using pre signed url on S3 (happening only on iOS since I upgraded react-native) :
https://github.com/react-native-community/react-native-image-picker/issues/1402

Do you think it could be related to your thread ? It was working perfectly on RN : 0.61.5 tried your solutions but didn't worked :'(

[sammy-SC]

I'm keep having this issue (see link below) when trying to upload image file too using pre signed url on S3 (happening only on iOS since I upgraded react-native) :
react-native-community/react-native-image-picker#1402

Do you think it could be related to your thread ? It was working perfectly on RN : 0.61.5 tried your solutions but didn't worked :'(

Could you post here a screenshot of your redbox with stack tracked copied into a gist?
I suspect it might be a different issue as if you comment out RCTLogError statement, there is nothing that can throw a redbox.

Thank you

[markgrancapal]

@ssilverr , no need.

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

For IOS, you can do this #29364 (comment).

Thanks @anthony1110 , this one fixed my Android issue.

I'm uploading an image to a S3 presignedUrl, and it's throwing an status of 0 when using XMLHttpRequest PUT.

[frankenthumbs]

Still having this issue on iOS. Using the patch-package has worked locally but still failed on remote builds.

it sounds like you didn't install patch package correctly. you have to add a postinstall script. in your package.json https://www.npmjs.com/package/patch-package

[mikeshuttjuvo]

Creating a patch package from this post fixed the issue for me and seems like it is not a kludgy workaround:

https://www.gitmemory.com/issue/facebook/react-native/29364/663005914

[akkravikumar]

For S3 Upload i used below code, its working good

        RNFS.readFile(filePath, 'base64')
           .then(res => 
              Storage.put( 
                 fileName + '.jpeg',
                 Buffer.from(res, 'base64'),
                { contentType: 'image/jpeg' },
           ).then(stored => {
                    console.log('stored', JSON.stringify(stored));
                  })
                  .catch(err => {
                    console.log(err);
                  });
      )

source from -> https://github.com/aws-amplify/amplify-js/issues/5273#issuecomment-611269229

[kockok]

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.

[ssuchanowski]

0.63.2 is the latest as of this moment - you have work arounds (patch fix) for file uploading -> https://github.com/facebook/react-native/issues/29364#issuecomment-671565181

[FabrizioCaldarelli]

I temporary fixed using rn-fetch-blob, but the issue is present in 0.63.2 version and I didn't want to patch node_modules react-native images library.

[safaiyeh]

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

[akkravikumar]

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.

I used react-native version is 0.61.5 version and the following aws versions

   `"amazon-cognito-identity-js": "^4.2.1",
   "aws-amplify": "^3.0.8",
   "aws-amplify-react-native": "^4.0.4",
   "buffer": "^5.6.0",
   "react": "16.9.0",
   "react-native": "0.61.5"`

[arnaudambro]

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.

[hhunaid]

What do you exactly mean by Debug mode? And how do you disable it? Do you mean disabling yellowbox?

[arnaudambro]

@hhunaid I mean this

[safaiyeh]

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: #29364 (comment), PR submitted here for the fix: #29595

Android: Upgrade Flipper version #28551 (comment), PR raised #29787

[ejung-park]

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")

[GreatAuk]

0.63.2 still exist

[tamhv]

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

[edritech93]

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

[abemusic]

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

[kockok]

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 = ^{};

[ASakkeer]

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.

I have tried " __block RCTImageLoaderCancellationBlock requestToken = ^{};" on "node_modules/react-native/Libraries/Image/RCTImageLoader.mm" this file. Then I deleted my App on IOS and again I run the application using "yarn ios". But, still having the issue. Did I missed something? @kockok @tamhv @akkravikumar

[PetrVasilev]

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

[VonJie]

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.

[AbhijithMohan007]

@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..

[devkrkanhaiya]

in
node_modules/react-native/Libraries/Image/RCTLocalAssetImageLoader.mm file

Replace Below

• -(RCTImageLoaderCancellationBlock)loadImageForURL:(NSURL *)imageURL
  size:(CGSize)size
  scale:(CGFloat)scale
  resizeMode:(RCTResizeMode)resizeMode
  progressHandler:(RCTImageLoaderProgressBlock)progressHandler
  partialLoadHandler:(RCTImageLoaderPartialLoadBlock)partialLoadHandler
  completionHandler:(RCTImageLoaderCompletionBlock)completionHandler
  {
  UIImage *image = RCTImageFromLocalAssetURL(imageURL);
  if (image) {
  if (progressHandler) {
  progressHandler(1, 1);
  }
  completionHandler(nil, image);
  } else {
  NSString *message = [NSString stringWithFormat:@"Could not find image %@", imageURL];
  RCTLogWarn(@"%@", message);
  completionHandler(RCTErrorWithMessage(message), nil);
  }

  return nil;
  }

With

• -(RCTImageLoaderCancellationBlock)loadImageForURL:(NSURL *)imageURL
  size:(CGSize)size
  scale:(CGFloat)scale
  resizeMode:(RCTResizeMode)resizeMode
  progressHandler:(RCTImageLoaderProgressBlock)progressHandler
  partialLoadHandler:(RCTImageLoaderPartialLoadBlock)partialLoadHandler
  completionHandler:(RCTImageLoaderCompletionBlock)completionHandler
  {
  __block auto cancelled = std::make_shared>(false);
  RCTExecuteOnMainQueue(^{
  if (cancelled->load()) {
  return;
  }

  UIImage *image = RCTImageFromLocalAssetURL(imageURL);
  if (image) {
  if (progressHandler) {
  progressHandler(1, 1);
  }
  completionHandler(nil, image);
  } else {
  NSString *message = [NSString stringWithFormat:@"Could not find image %@", imageURL];
  RCTLogWarn(@"%@", message);
  completionHandler(RCTErrorWithMessage(message), nil);
  }
  });

  return ^{
  cancelled->store(true);
  };
  }

This..

Like and Love , if it work 👍

[vaibhavbansal23]

This got fixed in v0.63.3

[cherucole]

This got fixed in v0.63.3

I upgraded RN to this version and never saw the issue again

[safaiyeh]

Thanks everyone for your patiences. Glad the fix is in, closing

[thaiphamvan]

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")

thanks , It works for me.

[Balasnest]

getting this npm error after change package json from 0.63.2 to 0.63.3.

npm ERR! code EINTEGRITY
npm ERR! Verification failed while extracting [email protected]:
npm ERR! Verification failed while extracting [email protected]:
npm ERR! sha512-AH8NYyMNLNhcUEF97QbMxPNLNW+oiSBlvm1rsMNzgJ1d5TQzdh/AOJGsxeeESp3m9YIWGLCgUvGTVoVLs0p68A== integrity checksum failed when using sha512: wanted sha512-AH8NYyMNLNhcUEF97QbMxPNLNW+oiSBlvm1rsMNzgJ1d5TQzdh/AOJGsxeeESp3m9YIWGLCgUvGTVoVLs0p68A== but got sha512-ptI+efRlVdodigsznoyx5zuvQcHCk3NgWkC8GR/qr2pRl87wCpMDqzDs/zvKfm3zkBALvOaF2E/gD5DePG4G4Q==. (4273248 bytes)

Any idea?

[Leehee1on]

node_modules/react-native/Network/NetworkTesk.mm

Line 102 ~ 107

if (requestToken == nil) {
if (RCT_DEBUG) {
// RCTLogError(@"Missing request token for request: %@", _request); // change
}
valid = YES; // change NO -> YES
}

My solution is RN < 63.2