Fetch API and multer error while downloading file

Question

I am trying to use the fetch API to upload files to node.js server (I use github pollyfill if it has anything to do with it: https://github.com/github/fetch ).

The request is executed as follows:

const data = new FormData(); data.append('file', file); return fetch(this.concatToUrl(url), { method: 'post', headers: Object.assign({}, this.getHeaders(), {'Content-Type': 'multipart/form-data'}), body: data, }); 

On the server side, I have this route declaration:

 app.post('/media', upload.single('file'), mediaRoutes.postMedia); 

And trying to get the file as follows:

 exports.postMedia = function(req, res) { console.log('req.file', req.file, req.files, req.body); return res.sendStatus(200); } 

But req.file not populated.

I also get this error from the express side:

 Error: Multipart: Boundary not found [2] at new Multipart (/Users/jmanzano/Development/web/test/node_modules/busboy/lib/types/multipart.js:58:11) [2] at Multipart (/Users/jmanzano/Development/web/test/node_modules/busboy/lib/types/multipart.js:26:12) [2] at Busboy.parseHeaders (/Users/jmanzano/Development/web/test/node_modules/busboy/lib/main.js:64:22) [2] at new Busboy (/Users/jmanzano/Development/web/test/node_modules/busboy/lib/main.js:21:10) [2] at multerMiddleware (/Users/jmanzano/Development/web/test/node_modules/multer/lib/make-middleware.js:32:16) [2] at Layer.handle [as handle_request] (/Users/jmanzano/Development/web/test/node_modules/express/lib/router/layer.js:95:5) [2] at next (/Users/jmanzano/Development/web/test/node_modules/express/lib/router/route.js:131:13) [2] at Route.dispatch (/Users/jmanzano/Development/web/test/node_modules/express/lib/router/route.js:112:3) [2] at Layer.handle [as handle_request] (/Users/jmanzano/Development/web/test/node_modules/express/lib/router/layer.js:95:5) [2] at /Users/jmanzano/Development/web/test/node_modules/express/lib/router/index.js:277:22 [2] at Function.process_params (/Users/jmanzano/Development/web/test/node_modules/express/lib/router/index.js:330:12) [2] at next (/Users/jmanzano/Development/web/test/node_modules/express/lib/router/index.js:271:10) [2] at cors (/Users/jmanzano/Development/web/test/node_modules/cors/lib/index.js:178:7) [2] at /Users/jmanzano/Development/web/test/node_modules/cors/lib/index.js:228:17 [2] at originCallback (/Users/jmanzano/Development/web/test/node_modules/cors/lib/index.js:217:15) [2] at /Users/jmanzano/Development/web/test/node_modules/cors/lib/index.js:222:13 [2] at optionsCallback (/Users/jmanzano/Development/web/test/node_modules/cors/lib/index.js:203:9) [2] at /Users/jmanzano/Development/web/test/node_modules/cors/lib/index.js:208:7 [2] at Layer.handle [as handle_request] (/Users/jmanzano/Development/web/test/node_modules/express/lib/router/layer.js:95:5) [2] at trim_prefix (/Users/jmanzano/Development/web/test/node_modules/express/lib/router/index.js:312:13) [2] at /Users/jmanzano/Development/web/test/node_modules/express/lib/router/index.js:280:7 [2] at Function.process_params (/Users/jmanzano/Development/web/test/node_modules/express/lib/router/index.js:330:12) 

And this configuration is through:

 app.use(bodyParser.urlencoded({extended: true})); app.use(bodyParser.json()); app.use(expressValidator()); app.use(logger('dev')); app.use(cookieParser()); app.use(methodOverride()); app.use(passport.initialize()); app.use(passport.session()); app.set('JWTSuperSecret', jwtConfig.secret); if (process.env.NODE_ENV !== 'production') { app.use(cors()); } 

Also, this works correctly with POSTMAN. So, I think I'm doing something wrong with the request.

Thanks!

Answer 1

For those who stumble upon this message, which has an error when using postman , it is imperative not to indicate the type of content in the headers.

Answer 2

There is no need to assign the header {Content-Type': 'multipart/form-data'} : the browser replaces its own.

But if you open it, then after content-type:multipart/form-data; boundary=... content-type:multipart/form-data; boundary=... in Request Headers until Request Payload it is not specified boundary and this causes an error on the server side.

If you open the browser console and see the headers, it will be visible.

So simple:

 fetch(this.concatToUrl(url), { method: 'post', body: data, }); 

Or, if you need custom headers, you can add them as follows:

 var headers = Object.assign({}, {'content-type': 'application/json'}, this.getHeaders(), {'Content-Type': 'multipart/form-data'} ); // Removal should be case insensitive, or in any case, the header will be included: Object.keys(headers) .forEach( function(k) { if (k.toLowerCase()==='content-type') delete headers[k] }) const data = new FormData(); data.append('file', file); return fetch(this.concatToUrl(url), { method: 'post', headers: headers, body: data, });