FormData not being sent in Request

[BerniWittmann]

My goal is to send an image to my backend.

What I'm doing to send the request

const data = new FormData();
data.append('file', {
    name: 'some_random_name.jpg',
    type: 'image/jpeg',
   path: getURI()
});

await fetchSSL('/api/files', {
    method: 'PUT',
    headers: {
        'Accept': 'application/json', 
        'User-Agent': userAgent
    },
    disableAllSecurity: true, // for easier testing
    pkPinning: false,  // for easier testing
    sslPinning: {
      certs: []  // for easier testing
    },
    body: {
        formData: data
    }
})

the form data being passed, can be seen in the screenshot

I intercepted the request before it hit my servers and it appears the form data has not been appended (this looks different when not using this library):

The library itself also does not give me any notice about something going wrong. Of course, I get an error in the response from my server, but i would expected to get some kind of error.

I have tried to use the example from your readme. So the multi-part/form content type header has already been omitted. I also see the form Data being used when i added some logging statements to your native coe I have seen in other issues that you recommended using base64, but when i have both path and data, the data seems to not have any effect, and only using data caused an error somehow like (https://github.com/MaxToyberman/react-native-ssl-pinning/issues/38)

I would greatly appreciate your help, since your library seems to be the only way to provide ssl pinning while also having a feedback to the react native js code to show some nice alerts if something goes wrong. However, not being able to upload images makes this unusable, since this is a hard requirement for us.

Context: RN Version: 0.63.3 RN-SSL-Pinning Version: 1.5.4 OS: iOS (have not validated Android) Normal json body payloads work fine When ditching this library and using default react native fetch method, it also works fine

[MaxToyberman]

Hi @BerniWittmann what error do you see ?

[BerniWittmann]

Hi @MaxToyberman That is the thing. There is no error message. The request is being sent but without the form data:

[BerniWittmann]

Hi @MaxToyberman If you need more information or any clarification, let me know :)

[MaxToyberman]

@BerniWittmann will need to debug it. i sent files in my app looks good.

can you show me the full request ?

[BerniWittmann]

@MaxToyberman The screenshot above is the full request, or what are you missing?

[MaxToyberman]

@BerniWittmann can you please create a demo project ?

[BerniWittmann]

I will create a reproduction example, I imply can't tell when I will be able to do so due to other priorities

[wen-]

try getURI() ===> file:///private/... (checkResourceIsReachableAndReturnError only check localfile)

[BerniWittmann]

@MaxToyberman I'm back with a reproduction example of this issue: You can find it and instructions here: https://github.com/BerniWittmann/reproduction-rn-ssl-pinning I also made a little demo video to showcase the issue

https://user-images.githubusercontent.com/17594215/117680806-cc4f2a00-b1b1-11eb-950f-10cd115622fb.mp4

[BerniWittmann]

@wen- thanks for the idea, but it sadly did not work

[zarir]

@MaxToyberman One observation here was that whenever I am trying to send a file from iOS with path /private/var/mobile/Containers/Data/Application/F30274B3-C753-46A1-BDAB-770E2FE837E5/tmp/react-native-image-crop-picker/B69FDAE9-556C-4192-BC2E-035DC48B7115.jpg the image upload fails and the request header shows 'content-length': 0 When the same image is sent from a different file path file:///var/mobile/Containers/Data/Application/F30274B3-C753-46A1-BDAB-770E2FE837E5/tmp/D20FB665-1359-42A7-9506-DF84EDD93C4B.jpg the image uploads correctly.

[Nageshwar1213]

HI @BerniWittmann did u got the solution for this issue .please let me know I am struggling to resolve this issue .

[BerniWittmann]

@Nageshwar1213 No sadly not. We have essentially put the effort to do ssl pinning on hold until this is issue is resolved…

[gie3d]

I face the same issue. Did some hack... find out that this might be the case...

I updated this file node_modules/react-native-ssl-pinning/ios/RNSslPinning/RNSslPinning.m

from

[formData appendPartWithFileURL:[NSURL URLWithString:path] name:key fileName:fileName mimeType:mimeType error:nil];

to

[formData appendPartWithFileURL:[NSURL fileURLWithPath:path] name:key fileName:fileName mimeType:mimeType error:nil];

This does the trick for me. Did some research and found that:

[NSURL URLWithString:]

• Purpose: This method is used to create an NSURL object for a web URL or a remote resource accessible via a URL.
• Usage: You use this method when working with URLs for web resources, such as web pages, APIs, or any network-accessible content.

[NSURL fileURLWithPath:]

• Purpose: This method is used to create an NSURL object for a local file or resource on the file system.
• Usage: You typically use this method when dealing with files or resources stored locally on the device or file system.

So I think @BerniWittmann and my case is the same. We upload the file which located in our photo album. That's why it doesn't work with the current [NSURL URLWithString:]

[gie3d]

I think another way around without hacking would be pass the photo uri with the location with prefix file:// rather than /private/