0

We are facing a very strange behavior in our application.

We have a Node.js server running on Heroku. Our client is a React native application trying to send an file to our server.

Front-end code:

import ImagePicker from "react-native-image-picker";

class MyComponent extends React.Component {

...    

handleGallery = () => {
  ImagePicker.showImagePicker(pickerOptions, response => {

  const { uri, type, fileName } = response;
  const data = new FormData();

  data.append("data", { uri, type, name: `photo.${fileName}` });

  this.submitMultpart(data)
    .then(res => {
      console.log(res);
    })
    .catch(err => {
      console.log(err);
    });
   }
  });
 };

 submitMultpart = formData => {
  return new Promise((resolve, reject) => {
  const URL = "https://example.com/api/upload";

  const options = {
    method: "POST",
    body: formData,
    headers: {
      Accept: "application/json",
      "Content-Type": "multipart/form-data; boundary=6ff46e0b6b5148d984f148b6542e5a5d",
    }
  };

  fetch(URL, options)
    .then(res => {
      console.log(res);
      resolve(res);
    })
   .catch(err => {
      console.log(JSON.stringify(err));
      reject(err);
   });
 });
};
}

Back-end code:

const multiparty = require("multiparty");

app.post("/api/upload", async (req, res) => {
  const form = new multiparty.Form();

  form.parse(req, async (error, _fields, files) => {
    if (error) {
      console.error(error);
      return res.status(500).json({ success: false });
    }

    // Do some stuff here


    return res.status(200).json({ success: true });
  });
});

The error I'm getting in the node.js console is this:

{
  BadRequestError: stream ended unexpectedly
  at Form.<anonymous>(/app/node_modules / multiparty / index.js: 759: 24)
  at Form.emit(events.js: 194: 15)
  at finishMaybe(_stream_writable.js: 641: 14)
  at endWritable(_stream_writable.js: 649: 3)
  at Form.Writable.end(_stream_writable.js: 589: 5)
  at IncomingMessage.onend(_stream_readable.js: 629: 10)
  at Object.onceWrapper(events.js: 277: 13)
  at IncomingMessage.emit(events.js: 194: 15)
  at endReadableNT(_stream_readable.js: 1103: 12)
  at process._tickCallback(internal / process / next_tick.js: 63: 19) message: 'stream ended unexpectedly'
}

p.s: The headers are properly set by the FETCH api. We are receiving them on the back-end.

p.s2: Using postman, I'm able to send files to my server (using the same headers that I've used in the FETCH api. The request is parsed successfully in the back-end and I'm receiving the file)

p.s3: The file I'm trying to send is very small, so seems that the size of the file is not a problem here.

p.s4: I'm using a random boundary in the headers of the request because, without that, I'm getting this error:

{ 
  BadRequestError: content-type missing boundary
  at Form.parse (/app/node_modules/multiparty/index.js:180:21)
  at app.post (/app/routes/api/personalDocumentRoute.js:12:10)
  at Layer.handle [as handle_request] (/app/node_modules/express/lib/router/layer.js:95:5)
  at next (/app/node_modules/express/lib/router/route.js:137:13)
  at admin.auth.verifyIdToken.then.firebaseUser (/app/middlewares/requireFirebaseLogin.js:26:14)
  at process._tickCallback (internal/process/next_tick.js:68:7) message: 'content-type missing boundary' 
}

Additional info:

package.json:

"react": "16.6.3",
"react-native": "0.58.3",

Any help would be amazing. A lot of hours debugging without success :/

1 Answer 1

1

I had the same problem.

Try this:

  headers: { 
        'Accept': 'multipart/form-data',
        'Content-Type': 'multipart/form-data',
      }
Sign up to request clarification or add additional context in comments.

1 Comment

Not working in my case, Is there any other solution? Thank you in advance!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.