File sent as [object Object] in request payload

[howdyjessie]

Hi, I'm trying to upload a file on React Native using ReactNativeFile like this:

const SET_PIC = gql`
  mutation setUserPicture($userId: ID!, $picture: Upload!) {
    setUserPicture(userId: $userId, picture: $picture)
  }
`;

const file = new ReactNativeFile({
      uri: 'path/to/file',
      type: 'image/jpeg',
      name: 'photo.jpg',
    });


this.props.setUserPicture(file).then(() => {
      // do things after picture upload
    });

graphql(SET_PIC, {
    props: ({ mutate }) => ({
      setUserPicture: picture => mutate({
        variables: {
          picture,
        },
      }),
    }),
  })

but in my request payload, the file gets set as [object Object], like:

------WebKitFormBoundaryWczBfJPpAvc3HDSr
Content-Disposition: form-data; name="operations"

{"operationName":"setUserPicture","variables":{"userId":"123","picture":null},"query":"mutation setUserPicture($userId: ID!, $picture: Upload!) {\n  setUserPicture(userId: $userId, picture: $picture)\n}\n"}
------WebKitFormBoundaryWczBfJPpAvc3HDSr
Content-Disposition: form-data; name="map"

{"0":["variables.picture"]}
------WebKitFormBoundaryWczBfJPpAvc3HDSr
Content-Disposition: form-data; name="0"; filename="photo.jpg"
Content-Type: image/jpeg

[object Object]
------WebKitFormBoundaryWczBfJPpAvc3HDSr--

Am I using ReactNativeFile incorrectly here? Why do I get [object Object]?

[jaydenseric]

Strange. Maybe your fetch and FormData polyfills are not suitable?

[howdyjessie]

Hmm I'm using the fetch polyfill that comes with react-native. Is it necessary to provide a separate FormData polyfill as well? How should I make sure my polyfills are suitable?

[jaydenseric]

I don't know! I don't use React Native. Maybe @giautm can help?

[giautm]

Did you check the content of your files? It looks like it really has [object Object] in the content. 😄

[howdyjessie]

Alas, it is an actual image! 😅

[madyankin]

If you use React Native Debugger, you have to know that it replaces RN's fetch with the one bundled inside Electron. The Electron's (Chrome's) fetch knows nothing about how to handle React Native's files. So, you should detach your app from the debugger to use RN's fetch. The only way to debug file submissions is to watch the requests at the server side.

jhen0409/react-native-debugger#38 (comment)

[jaydenseric]

For now there is not much I can do to help; if more information comes to light we can investigate further and reopen 🙏

[TeChn4K]

If you use React Native Debugger, you have to know that it replaces RN's fetch with the one bundled inside Electron. The Electron's (Chrome's) fetch knows nothing about how to handle React Native's files. [...]

OMG @Outpunk thank you so much! One day to understand why all my upload requests were failing ..!

[jamesone]

@madyankin LIFE SAVER! @jaydenseric I will open a PR to document this