Can't upload file using cross-fetch

I am trying to upload a csv file using cross fetch with react-redux and I am getting Uncaught (in promise) Error: unsupported BodyInit type error. Full Error Trace:

Uncaught (in promise) Error: unsupported BodyInit type
at Request.Body._initBody (browser.js:227)
at new Request (browser.js:340)
at browser.js:422
at new Promise (<anonymous>)
at self.fetch (browser.js:421)
at Dropzone.RenderDropZoneInput._this.onDrop (RenderDropZoneInput.js:17)
at Dropzone.onDrop (index.js:229)
at Object.executeOnChange (LinkedValueUtils.js:132)
at ReactDOMComponent._handleChange (ReactDOMInput.js:241)
at Object.ReactErrorUtils.invokeGuardedCallback (ReactErrorUtils.js:69)
at executeDispatch (EventPluginUtils.js:85)
at Object.executeDispatchesInOrder (EventPluginUtils.js:108)
at executeDispatchesAndRelease (EventPluginHub.js:43)
at executeDispatchesAndReleaseTopLevel (EventPluginHub.js:54)
at Array.forEach (<anonymous>)
at forEachAccumulated (forEachAccumulated.js:24)
at Object.processEventQueue (EventPluginHub.js:254)
at runEventQueueInBatch (ReactEventEmitterMixin.js:17)
at Object.handleTopLevel [as _handleTopLevel] (ReactEventEmitterMixin.js:27)
at handleTopLevelImpl (ReactEventListener.js:72)
at ReactDefaultBatchingStrategyTransaction.perform (Transaction.js:143)
at Object.batchedUpdates (ReactDefaultBatchingStrategy.js:62)
at Object.batchedUpdates (ReactUpdates.js:97)
at dispatchEvent (ReactEventListener.js:147)

Source Code:

class RenderDropZoneInput extends Component {
    onDrop = (acceptedFiles, rejectedFiles) => {
    const { onChange } = this.props.input
    const files = this.props.input.value || Immutable.List()
    const newFiles = Immutable.List(acceptedFiles)
    const allFiles = files.concat(newFiles)
    onChange(allFiles)
    console.log(acceptedFiles);
     let uri = "http://localhost:8080/api/uplaod"
     fetch(uri, {
      method: 'POST',
      mode: 'cors',
      headers: { 'Content-Type': 'application/octet-stream' },
      body: acceptedFiles[0]
    })

  }

  render() {
    const files = this.props.input.value
    return (
      <div>
        <CustomDropzone onDrop={this.onDrop} multiple={true}>
          {files.size ?
            files.map((file) => <img key={file.name} src={file.preview} style={{ width: '200px', maxWidth: '400px', flexGrow: 1, opacity: 0.5 }} alt='' />)
            : <div><p>Click on me!</p></div>}
        </CustomDropzone>
      </div>
    )
  }
}

export default RenderDropZoneInput

You can reproduce or access full project here: https://codesandbox.io/s/z39y9mlwq4

Steps to reproduce: Try uploading a file, the error will be displayed.

I have also tried using FormData

let form = new FormData()
form.append('file', acceptedFiles[0]);
return fetch(uri, {
  method: 'POST',
  mode: 'cors',
  headers: { 'Content-Type': 'application/octet-stream' },
  body: form//acceptedFiles[0]
})

[lquixada]

@kueda actually if a native fetch is present on the environment, cross-fetch uses it. That includes React Native.

@himanshugpt recently we fixed an issue regarding FormData on cross-fetch. Do you mind testing it again?

[himanshugpt]

Closing this one. Moved to fetch: https://github.com/github/fetch/issues/601