Multipart request (FormData) not work in iOS

[canhtran10]

with Android it's working perfectly, i don't understand why it's not working in iOS (all ios version), don't have any parameters transfer to the API server:

THE LOG REQUEST IN SERVER:

Files: "" ; group receipents: "" ; User receipients: ""

The CODE:

const localUploadAttachment = async (url, a, message) => {
    let formData = new FormData();
    let dataObj = {
        name: a.name,
        type: 'image/jpg',
        uri: a.uri
    };
    formData.append('files', dataObj); // i tested with "file" parametter but its still not work
    formData.append('groupRecipients', JSON.stringify(message.GroupRecipients));
    formData.append('userRecipients', JSON.stringify(message.UserRecipients));

    let response  = fetch(url, {
	method: "POST" ,
	timeoutInterval: 30000,
	body: {
	      formData: formData,
	},
	sslPinning: {
	      certs: ["mycert1"]
	},
	headers: {
		'content-type': 'multipart/form-data; charset=UTF-8',
		accept: 'application/json, text/plain, /',
	}
    })

    return response;
}

The LOG API REQUEST:

Please take a look and let me know if you have anything solution for that. Thanks :)

[MaxToyberman]

hi @canhtran10 ! it looks good, will need more information to debug it. maybe you can send the full request to my email.
I don't have a way to debug the file upload

[canhtran10]

@MaxToyberman i have sent an email to you, please take a look :)

[MaxToyberman]

@canhtran10 i saw the video, i know what is the problem. you are attaching an image.
you should send it in base64 (only in iOS)it is written in the docs.
https://github.com/MaxToyberman/react-native-ssl-pinning#multipart-request-formdata

The reason is iOS limitations, i can explain why.

please try to convert is first and tell me if it works :)

[MaxToyberman]

@canhtran10 do you use react-native-image-picker ?

[canhtran10]

@MaxToyberman yes, I am using react-native-image-picker: 0.26.7

[MaxToyberman]

@canhtran10 so in iOS image picker response had data property in it and then :

let dataObj = {
    name: a.name,
    type: 'image/jpg',
    uri: 'data:image/jpeg;base64,' + response.data 
};

https://github.com/react-native-community/react-native-image-picker#usage

please let me know

[MaxToyberman]

@canhtran10 did you check ?

[canhtran10]

okie let you know when i have done the checking

[canhtran10]

@MaxToyberman

it is not working for me.

Besides, I am using the react-native-document-picker library to upload a document file and it's not working too.

There is no data field in DocumentPicker:

have a nice day :)

[MaxToyberman]

@canhtran10 can you try to use this branch ?
https://github.com/MaxToyberman/react-native-ssl-pinning#ISSUE-67

if it works i will release a new version

Have a great day :)

[canhtran10]

ok @MaxToyberman i will be trying tomorrow, hope it works :)

[canhtran10]

@MaxToyberman it is not working. I am preparing for a new app release, maybe have to exclude the upload function when using react-native-ssl-pinning, and will implement again in the next release. Please take a look at this issue.

[MaxToyberman]

@canhtran10 uploaded another fix, please try: (yarn upgrade the same branch)

let dataObj = {
    name: a.name,
    type: 'image/jpg',
    uri: a.uri,
     data: a.data // this is the data in base64
};

[canhtran10]

@MaxToyberman

• "react-native-ssl-pinning": "github:MaxToyberman/react-native-ssl-pinning#ISSUE-67",
• yarn
• the result when i upload an image:
  

[MaxToyberman]

@canhtran10 did you add 'data:image/jpeg;base64,' ? if so remove it

[castalonirenz]

still having the same issue

[MaxToyberman]

@canhtran10 @castalonirenz i have just upload some files i know what was the issue :

1. remove 'content-type': 'multipart/form-data; charset=UTF-8', from headers.
   Setting the Content-Type header manually means it's missing the boundary parameter. Remove that header and allow fetch to generate the full content type. It will look something like this:

2)data: response.data is not needed

i will update the docs.

your code should look like this :

     let formData = new FormData();
                  let dataObj = {
                      name: a.name,
                      type: 'image/jpg',
                      uri: a.uri
                  };
                  formData.append('file', dataObj); // i tested with "file" parametter but its still not work
                  formData.append('groupRecipients', JSON.stringify(message.GroupRecipients));
                  formData.append('userRecipients', JSON.stringify(message.UserRecipients));

                  let response  = fetch(url, {
                    method: "POST" ,
                    timeoutInterval: 30000,
                    body: {
                          formData: formData,
                    },
                    sslPinning: {
                          certs: ["mycert1"]
                    }
                      })

Please let me know if it worked for you

[MaxToyberman]

@canhtran10 @castalonirenz please try it on latest version 1.5.1

[castalonirenz]

Will try it on monday @MaxToyberman thanks

[MaxToyberman]

@canhtran10 @castalonirenz did you check it ?

[castalonirenz]

@MaxToyberman i have a question does it automatically set the header to formData even though there is no formData set on the headers?

[MaxToyberman]

@castalonirenz yes

[castalonirenz]

so both IOS and ANDROID the request will be automatically set to multipart/form-data? so no headers at all to bet set just to be clear

[MaxToyberman]

@castalonirenz you don't need multipart/form-data headers, both on android and iOS

[castalonirenz]

Thanks, will try it tomorrow for sure.

[MaxToyberman]

@castalonirenz @canhtran10 please reopen if needed

[castalonirenz]

Hi @MaxToyberman here is the issue without including Multipart on the header

[castalonirenz]

let params = {
method: method,
timeoutInterval: 60000,
body: {
formData: formData,
},
sslPinning: {
certs: ['rapids'],
},
headers: {
Authorization: 'Bearer ' + token,
accept: 'application/json, text/plain, /',

  },
};

[MaxToyberman]

@castalonirenz can you show me your formData ?

[castalonirenz]

@MaxToyberman

[MaxToyberman]

@castalonirenz

1. remove data: response.uri
2. you shoud send it with 'file' instead of 'image' (formData.append('file', ....