New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Formdata sends [object object] in request #38

Closed
sagark1510 opened this Issue Jan 20, 2017 · 22 comments

Comments

Projects
None yet
9 participants
@sagark1510

sagark1510 commented Jan 20, 2017

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

This comment has been minimized.

Owner

jhen0409 commented Jan 21, 2017

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!

@jhen0409 jhen0409 added the question label Jan 21, 2017

@sagark1510

This comment has been minimized.

sagark1510 commented Jan 21, 2017

It worked. Awesome. Thanks @jhen0409 :)

@sagark1510 sagark1510 closed this Jan 21, 2017

@azzgo

This comment has been minimized.

azzgo commented Jul 1, 2017

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

This comment has been minimized.

Owner

jhen0409 commented Jul 1, 2017

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

This comment has been minimized.

azzgo commented Jul 1, 2017

cool, thanks, I will try it

@tmaly1980

This comment has been minimized.

tmaly1980 commented Aug 30, 2017

@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

This comment has been minimized.

Owner

jhen0409 commented Aug 31, 2017

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

@tmaly1980

This comment has been minimized.

tmaly1980 commented Aug 31, 2017

@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

This comment has been minimized.

Owner

jhen0409 commented Aug 31, 2017

@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

This comment has been minimized.

tmaly1980 commented Aug 31, 2017

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

@jhen0409

This comment has been minimized.

Owner

jhen0409 commented Aug 31, 2017

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

This comment has been minimized.

tmaly1980 commented Aug 31, 2017

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

This comment has been minimized.

Owner

jhen0409 commented Aug 31, 2017

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

This comment has been minimized.

tmaly1980 commented Aug 31, 2017

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

This comment has been minimized.

Owner

jhen0409 commented Aug 31, 2017

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

2017-09-01 2 33 02

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

@captain-xu

This comment has been minimized.

captain-xu commented May 7, 2018

@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

This comment has been minimized.

juanpasolano commented Jun 21, 2018

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

This comment has been minimized.

banli17 commented Jul 13, 2018

@juanpasolano

maybe you open below config one,remove all。

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

This comment has been minimized.

yasserzubair commented Jul 31, 2018

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

This comment has been minimized.

banli17 commented Jul 31, 2018

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

@shide1989

This comment has been minimized.

shide1989 commented Sep 26, 2018

Still having the issue on React Native 0.55.2

@shide1989

This comment has been minimized.

shide1989 commented Sep 27, 2018

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 ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment