Formdata sends [object object] in request

[sagark1510]

When I try to call POST and request's content type is multipart/formdata it shows [object object] in request params and API can not get any properties. It works good with JSON data.

Does anyone else having same problem?

[jhen0409]

If you're followed this section, for the multipart/formdata request, you need use FormData of debugger worker instead of FormData of React Native:

global.FormData = global.originalFormData

I'll add it to readme, thanks for issue!

[sagark1510]

It worked. Awesome. Thanks @jhen0409 :)

[azzgo]

I don't understand, I debugged in to RNDebuggerWorkder.js, I see you override FormData use originalFormData in your worker/devMenu.js file. So is there a example code show how to upload formdata file when connect debugger window?

[jhen0409]

I see you override FormData use originalFormData in your worker/devMenu.js file.

It override only if you're enabled Network Inspect.

So is there a example code show how to upload formdata file when connect debugger window?

It doesn't support RN implemented uri (from CameraRoll) for FormData, please disable Network Inspect if you're use the feature for upload.

Also, I personally use react-native-fetch-blob for upload file.

[azzgo]

cool, thanks, I will try it

[tmaly1980]

@jhen0409 Unfortunately, that link doesn't explain anything about this issue. I can't find any details in the documentation as to what to do. Am I supposed to use global.originalFormData in my app? Will I be unable to track the request/response in my debugger? I'm somewhat reliant on that to ensure that my file uploads are working.

[jhen0409]

@tmaly1980 I've been updated the documentation, you can found in debugger-integration.md, it explained the limitations.

[tmaly1980]

@jhen0409 OK, but what is the solution? This is my code (using apisauce/axios):

  const saveProfilePhoto = (file) => {
    let filename = file.uri
    let fileUrl = (!filename.match(/^file:/) ? 'file://' : '') + filename
    let fileMeta = {
      uri: fileUrl,
      type: mime.lookup(fileUrl),
      name: fileUrl.split(/[\\/]/).pop() // basename
    }
    const form = new FormData()
    form.append('avatar', fileMeta)

    return api.post('user/profile_photo', form)
  }

This is my request payload (as seen in the network inspector, but my server end also sees this same problem):

------WebKitFormBoundary4fbYRJMz2PnpXyj4
Content-Disposition: form-data; name="avatar"

[object Object]
------WebKitFormBoundary4fbYRJMz2PnpXyj4--

I've also tried fetch() with the same result. Whichever FormData is being used is turning the file content itself into a string. Why doesn't it do what it's supposed to? And how do I fix this problem? I've tried using global.originalFormData but it makes no difference.

[jhen0409]

@tmaly1980 please don't enable this feature (Network Inspect) for uri of FormData, debugger worker's XHR doesn't support it, as I wrote in documentation:

React Native FormData support uri property you can use file from CameraRoll, but originalFormData doesn't supported.

[tmaly1980]

@jhen0409 how do I disable it? This just works by default out of the box. Through the touch bar (simulator in my case)?

[jhen0409]

I'm sure it's disabled by default, you can check context menu of RNDebugger (Enable / Disable Network Inspect), it will print [RNDebugger] Network Inspect is enabled... in console log if enabled. Otherwise you can tracking your app code that have replace XMLHttpRequest with originalXMLHttpRequest.

[tmaly1980]

I'm actually not overwriting XMLHttpRequest and FormData, I believe it's the Touch Bar simulator (mentioned https://github.com/jhen0409/react-native-debugger/blob/master/docs/debugger-integration.md#how-network-inspect-works) that is enabling/disabling the network inspect.

[jhen0409]

It should false by default, I don't sure if you have inadvertently pressed it (context menu or touch bar), it will persisted in local storage, even you can check localStorage.networkInspect in console (top context). Just toggle it should works.

I might consider to removing the localStorage value, so it will reset by re-open window.

[tmaly1980]

I've disabled Network Inspect and now all my network requests are timing out. I don't recall overwriting XMLHttpRequest, I suspect there's a package that is doing that for me (which one, I'm not sure). I'm not sure how to restore the original XMLHttpRequest.

[jhen0409]

I've disabled Network Inspect and now all my network requests are timing out.

It shouldn't related to original XMLHttpRequest issue if the situation changed, you may need to check the native requests. If you're on iOS, I'm not sure if it blocked the domain name (you have to set NSExceptionDomains), but it shouldn't be timeout problem. :\

There is a way to check if you using original XMLHttpRequest or not (RNDebuggerWorker.js context):

function XMLHttpRequest() { [native code] } is meaning you're using the original XMLHttpRequest.

[captain-xu]

@tmaly1980 hi if you set global.XMLHttpRequest = global.originalXMLHttpRequest ? global.originalXMLHttpRequest : global.originalXMLHttpRequest; global.FormData = global.originalFormData ? global.originalFormData : global.FormData; in your code, please disable it

[juanpasolano]

I'm having the same issue where

------WebKitFormBoundary4fbYRJMz2PnpXyj4
Content-Disposition: form-data; name="file"

[object Object]
------WebKitFormBoundary4fbYRJMz2PnpXyj4--

And none of the solutions above has worked for me :(
I'm on "expo": "^28.0.0",

[banli17]

@juanpasolano

maybe you open below config one，remove all。

GLOBAL.XMLHttpRequest = GLOBAL.originalXMLHttpRequest || GLOBAL.XMLHttpRequest
global.FormData = global.originalFormData

[yasserzubair]

Any solution to it yet? I have tried everything and i'm still getting

------WebKitFormBoundary4fbYRJMz2PnpXyj4
Content-Disposition: form-data; name="file"

[object Object]
------WebKitFormBoundary4fbYRJMz2PnpXyj4--

[banli17]

@yasserzubair
close js debugger it's ok, dont know why

[shide1989]

Still having the issue on React Native 0.55.2

[shide1989]

On React Native 0.55.2, using the following code :

let options = {
  method: 'POST',
  headers: {
  'Accept': 'application/json'
    }
  }
let form = new FormData()
form.append(key, {
  uri: value.uri,
  type: 'image/jpeg',
  name: 'avatar.jpg'
  })
options.body = form
let response = await fetch(config.api.host + path, options)

on the server side, i get the following info (JS express) :

req.header.content-type': 'multipart/form-data; boundary=----WebKitFormBoundaryBcWJX9dEonAwAFvD'
req.body.avatar: '[object Object]'
req.file : undefined
req.files: []

any help ?

[Graig123git]

was this issue ever resolved ?

[TBGerstenberg]

was this issue ever resolved ?

.... was it?

[shide1989]

To me this was never fixed

[TBGerstenberg]

Did you manage to get file uploads working somehow diffently? Im using multer on the backend, which expects the data to come in as type "mutipart-form". I'm getting the same behaviour of sending [object object] when network inspect is enabled, breaking (all) other requests when disabling it. Any idea why the latter is happening?

Logging the "XMLHttpRequest" Object is giving me the before mentioned "function XMLHttpRequest() { [native code] }" response, which means (following the above answer from @jhen0409 ) that the Debugger is not overriding it.

Kind regards

[shide1989]

@tobige we managed to upload files directly in the POST data, using base64 strings. This wasn't the best practice, but it worked

[TBGerstenberg]

Thanks for replying @shide1989 , we are currently still using a formdata-request, which is working when network-inspect is disabled on the debugger and the emulator is pointed to the IP of the Node running the backend, instead of using localhost:. Since this is rather hard to debug, we may switch to using base64-encoded images just for the sake of re-enabling a sound debugging experience.

Cheers

[kyle-ssg]

This issue really impacts the ability not only to upload images whilst debugging but actually use the debugger to verify the payload that is being sent.

global.FormData = global.originalFormData does work but it removes every single network request from the debugger, completely breaking the network inspect.

[zewish]

Is there any way this can be fixed? Or is it a limitation of React Native itself that’s too big to overcome, @jhen0409? I’d be glad to contribute to the project if this is fixable somehow.

[MakhouT]

I'm having the exact same issue. Is there an other way to debug this?

[DirKraft91]

how fix it?

[shide1989]

It's been a while since I had this issue, but on other Non-RN projects I remember that removing the "Content-Type" header lead to the XMLHttpRequest to interpret itself the body and put the right headers & content, maybe this can be a lead

[DhawanRachakonda]

It's been a while since I had this issue, but on other Non-RN projects I remember that removing the "Content-Type" header lead to the XMLHttpRequest to interpret itself the body and put the right headers & content, maybe this can be a lead

You need to update FLIPPER_VERSION of gradle.properties to FLIPPER_VERSION=0.39.0. Afetr that it worked for me.
After you update you have to clean gradle, else it wont work. Here are links which found me helpful:
https://stackoverflow.com/questions/61046007/form-post-with-file-attach-throws-network-error-react-native-react-native-im
facebook/flipper#993 (comment)

[devethan]

If you debugging your project with react-native-debugger, FormData().append is not work as you intended.
The appended data will be delivered as a string.

Quit debugging mode right now, and try it❗️

[devchris]

This has caused me hours of debugging...

[banjo09]

Doing this:

appending the uri information does not work. It doesn't even send the network request when I try to append an object. But if I append it as a string using Json stringify method.

Then it will send the request, but it breaks for obvious reasons. Why is FormData not allowing me to append an object?

from react-native-image-picker/react-native-image-picker#798 by
https://github.com/reboss

[vcavallo]

What is going on with this? Why is this issue closed if it's still causing problems for people three years later?

[1Jesper1]

Also have this problem.

[mohity777]

If react native version is 0.62+ then use flipper for debugging instead. It provide network inspect too with a lot of other cool stuff.

[pandreyk]

If you use 'multipart/form-data' remove 'Content-Type': 'multipart/form-data' from headers

[HarikaranKananathan]

Also have this problem.

[nomanoff]

global.FormData = global.originalFormData

Where do I paste this code? Can anybody explain this to me?

[nomanoff]

global.FormData = global.originalFormData

Where do I paste this code? Can anybody explain this to me?

React native debugger is working fine. But if network ispection is on, my image requests look like [Object object] but if I turn off network inspect everything seems to be fine. But I need to debug sometimes, so I can't do it right now.

[orangec-at]

never solved?

[timotgl]

This still remains an issue apparently. Turning on "Inspect network requests" can essentially corrupt your requests, which is quite unexpected. https://github.com/jhen0409/react-native-debugger/blob/master/docs/debugger-integration.md#how-network-inspect-works doesn't explain any of this.

[Stephane226]

WHERE TO PAST THIS CODE ? can you guys give info about that please ?

[arvindyadav2]

this issue never get resolved tried everything no solution