Image download hangs on mobile browsers, but not on the local computer - Node JS, Express

Question

We are currently downloading images that freeze when we try to use a mobile browser, but not when we use a development computer. We believe that express.bodyParser middleware is the culprit, as it does not reach the code on our server. We use node 0.10.11 and express 3.2.5

This is the appropriate server code.

// --- Server Setup --- \\ var server = express(); // all environments server.set('port', process.env.PORT || 3000); server.engine('ejs', engine); server.set('views', __dirname + '/views'); server.set('view engine', 'ejs'); server.use(express.favicon()); server.use(express.logger('dev')); server.use(express.json()) server.use(express.urlencoded()) server.use(express.methodOverride()); server.use(express.cookieParser('your secret here')); server.use(express.session()); //Passport stuff server.use(passport.initialize()); server.use(passport.session()); server.use(express.static(path.join(__dirname, 'public'))); server.use(server.router); // development only if ('development' == server.get('env')) { server.use(express.errorHandler()); } // This is the problem route, mw.validateUID just validates the uid and we know that is working // where as it seems to stop working at the express.bodyParser server.post('/photo/:uid', mw.validateUID, express.bodyParser({'keepExtensions': true}), express.limit('2mb'), app.uploadPhoto); 

Corresponding Call Code

 RestClient = function() { var xhr = new XMLHttpRequest(); function init() { return { postImage: function(path, image, callback) { if (image.size > 2500000) { callback(-1); return; } var formData = new FormData(); formData.append('photo', image); xhr.open('POST', path, true); xhr.send(formData); xhr.onreadystatechange = function() { if (this.readyState == this.DONE) { callback(this.status); } }; } } } 

and

 processImage = function(imageFile) { if (user.getId()) { restClient.postImage('/photo/' + user.getId(), imageFile, function(status) { if (status < 0) { alert("Your image must be less than 2.5M in size."); } else if (status == 200) { reset(true); if (!successView) { successView = SuccessView(); } successView.show(); } else { alert("Sorry, we're unable to upload your photo. Please try again later."); } }); } else { alert('login to fb!'); } } 

Edit:

This is also an error message that we encountered.

 Error: Request aborted at IncomingMessage.<anonymous> (/home/pinnacle_vodka/node_modules/express/node_modules/connect/node_modules/formidable/lib/incoming_form.js:107:19) at IncomingMessage.EventEmitter.emit (events.js:92:17) at abortIncoming (http.js:1881:11) at Socket.serverSocketCloseListener (http.js:1893:5) at Socket.EventEmitter.emit (events.js:117:20) at TCP.close (net.js:466:12) 

Answer 1

The problem is the average product of your express application.

You used:

server.use(express.bodyParser());

Which tells Express to process JSON, URLEncoded and multipart requests. However, there seems to be a node Formableable module for handling multi-page requests. The solution is to either use only URLEncoded and handle the download in a formidable way, or not to use the formidable one and process everything in the bodyparser.

So your code should look like this:

a) Exceptional download:

 server.use(express.urlencoded()); //server.use(express.methodOverride()); //server.use(express.bodyParser()); 

or b) Express Multipart upload:

 //server.use(express.urlencoded()); //server.use(express.methodOverride()); server.use(express.bodyParser()); 

The code has a link to node_modules/formidable/lib/incoming_form.js:107:19 , remove it if you use the b option.