title: Large file uploads failing formidable and expressjs
body: <p>I have created a quick upload page but having some issues with large media files. </p>
  
  <p>Pictures and videos under 15mb upload fine, but anything larger and it fails out with a 404 error. </p>
  
  <ul>
  <li>Dev Lang: JS HTML JQ</li>
  <li>Dev Envir: node@6.10.3, express@4.15.3, body-parser@1.17.2, formidable@1.1.1</li>
  </ul>
  
  <p>So below is my Ajax request on the upload form which can be seen
   <a href="http://new.fishpal.com/tools/upload.html" rel="nofollow noreferrer" title="test page">here</a>!</p>
  
  <pre class="lang-js prettyprint-override"><code>   $('.upload-btn').on('click', function () {
        var opt_beats = document.getElementById("opt_beats").checked;
        var opt_rivers = document.getElementById("opt_rivers").checked;
  
      if (opt_beats == true) {
  
          $('#upload-input').click();
          $('.progress-bar').text('0%');
          $('.progress-bar').width('0%');
  
          $('#upload-input').on('change', function () {
  
              var files = $(this).get(0).files;
  
              if (files.length &gt; 0) {
                  // create a FormData object which will be sent as the data payload in the
                  // AJAX request
                  var formData = new FormData();
  
                  // loop through all the selected files and add them to the formData object
                  for (var i = 0; i &lt; files.length; i++) {
                      var file = files[i];
  
                      // add the files to formData object for the data payload
                      formData.append('uploads[]', file, file.name);
                  }
  
                  $.ajax({
                      url: '/api/uploader/beats',
                      type: 'POST',
                      data: formData,
                      processData: false,
                      contentType: false,
                      success: function (data) {
                          console.log('upload successful!\n' + data);
                      },
                      xhr: function () {
                          // create an XMLHttpRequest
                          var xhr = new XMLHttpRequest();
  
                          // listen to the 'progress' event
                          xhr.upload.addEventListener('progress', function (evt) {
  
                              if (evt.lengthComputable) {
                                  // calculate the percentage of upload completed
                                  var percentComplete = evt.loaded / evt.total;
                                  percentComplete = parseInt(percentComplete *
                                      100);
  
                                  // update the Bootstrap progress bar with the new percentage
                                  $('.progress-bar').text(percentComplete + '%');
                                  $('.progress-bar').width(percentComplete + '%');
  
                                  // once the upload reaches 100%, set the progress bar text to done
                                  if (percentComplete === 100) {
                                      $('.progress-bar').html('Done');
                                  }
  
                              }
  
                          }, false);
  
                          return xhr;
                      }
                  });
  
              }
          });
      } else if (opt_rivers == true) {
  
          $('#upload-input').click();
          $('.progress-bar').text('0%');
          $('.progress-bar').width('0%');
          $('#upload-input').on('change', function () {
  
              var files = $(this).get(0).files;
  
              if (files.length &gt; 0) {
                  // create a FormData object which will be sent as the data payload in the
                  // AJAX request
                  var formData = new FormData();
  
                  // loop through all the selected files and add them to the formData object
                  for (var i = 0; i &lt; files.length; i++) {
                      var file = files[i];
  
                      // add the files to formData object for the data payload
                      formData.append('uploads[]', file, file.name);
                  }
  
                  $.ajax({
                      url: '/api/uploader/rivers',
                      type: 'POST',
                      data: formData,
                      processData: false,
                      contentType: false,
                      success: function (data) {
                          console.log('upload successful!\n' + data);
                      },
                      xhr: function () {
                          // create an XMLHttpRequest
                          var xhr = new XMLHttpRequest();
  
                          // listen to the 'progress' event
                          xhr.upload.addEventListener('progress', function (evt) {
  
                              if (evt.lengthComputable) {
                                  // calculate the percentage of upload completed
                                  var percentComplete = evt.loaded / evt.total;
                                  percentComplete = parseInt(percentComplete *
                                      100);
  
                                  // update the Bootstrap progress bar with the new percentage
                                  $('.progress-bar').text(percentComplete + '%');
                                  $('.progress-bar').width(percentComplete + '%');
  
                                  // once the upload reaches 100%, set the progress bar text to done
                                  if (percentComplete === 100) {
                                      $('.progress-bar').html('Done');
                                  }
  
                              }
  
                          }, false);
  
                          return xhr;
                      }
                  });
  
              }
          })
      }
  });
  </code></pre>
  
  <p>This all hits an API end point which you can see below:</p>
  
   <pre class="lang-js prettyprint-override"><code>    var express = require('express');
      var router = express.Router();
      var path = require('path');
      var formidable = require('formidable');
      var fs = require('fs-extra');
  
  router.post('/beats', function(req, res){
  
    // create an incoming form object
    var form = new formidable.IncomingForm();
  
    // specify that we want to allow the user to upload multiple files in a single request
    form.multiples = true;
  
    // store all uploads in the /uploads directory
    form.uploadDir = path.join(__dirname, '../../public/img/beats');
  
  
    // every time a file has been uploaded successfully,
    // rename it to it's orignal name
    form.on('file', function(field, file) {
      fs.rename(file.path, path.join(form.uploadDir, file.name));
  
    });
  
    // log any errors that occur
    form.on('error', function(err) {
      console.log('An error has occured: \n' + err);
    });
  
    // once all the files have been uploaded, send a response to the client
    form.on('end', function() {
      res.end('Upload End');
  
    });
  
    // parse the incoming request containing the form data
    form.parse(req);
  
  });
  
  
  
  router.post('/rivers', function(req, res){
  
      // create an incoming form object
      var form = new formidable.IncomingForm();
  
      // specify that we want to allow the user to upload multiple files in a             single request
      form.multiples = true;
  
      // store all uploads in the /uploads directory
      form.uploadDir = path.join(__dirname, '../../public/img/rivers');
  
      // every time a file has been uploaded successfully,
      // rename it to it's orignal name
      form.on('file', function(field, file) {
        fs.rename(file.path, path.join(form.uploadDir, file.name));
      });
  
      // log any errors that occur
      form.on('error', function(err) {
        console.log('An error has occured: \n' + err);
      });
  
  // once all the files have been uploaded, send a response to the client
  form.on('end', function() {
    res.end('success');
  });
  
  // parse the incoming request containing the form data
  form.parse(req);
  
    });
  
  module.exports = router;
  </code></pre>
  
  <p>Screenshot below of Chrome Dev tools logging a success on a small video file but failing on the large. </p>
  
  <p><a href="https://i.stack.imgur.com/AyosW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/AyosW.png" alt="ConsoleScreen"></a></p>
  
  <p>I have played with the content types within the ajax request to no avail. Am hoping its a simple over sight and you have enough info to spot it </p>
  
  <p>Below is the expressjs log for the request:</p>
  
  <pre><code>[2017-10-06T11:54:56.813Z] Warp speed, Mr Sulu on Port: 3000
  [2017-10-06T11:54:56.815Z] CAUTION: You are running this in PRODUCTION mode!!!!
    express:router dispatching OPTIONS /api/uploader/beats +9s
    express:router query  : /api/uploader/beats +4ms
    express:router expressInit  : /api/uploader/beats +3ms
    express:router serveStatic  : /api/uploader/beats +3ms
    express:router jsonParser  : /api/uploader/beats +3ms
    express:router urlencodedParser  : /api/uploader/beats +3ms
    express:router &lt;anonymous&gt;  : /api/uploader/beats +3ms
    express:router &lt;anonymous&gt;  : /api/uploader/beats +3ms
    express:router trim prefix (/api) from url /api/uploader/beats +3ms
    express:router router /api : /api/uploader/beats +1ms
    express:router dispatching OPTIONS /uploader/beats +3ms
    express:router trim prefix (/api) from url /api/uploader/beats +3ms
    express:router router /api : /api/uploader/beats +2ms
    express:router dispatching OPTIONS /uploader/beats +2ms
    express:router trim prefix (/api) from url /api/uploader/beats +3ms
    express:router router /api : /api/uploader/beats +3ms
    express:router dispatching OPTIONS /uploader/beats +3ms
    express:router trim prefix (/api) from url /api/uploader/beats +4ms
    express:router router /api : /api/uploader/beats +3ms
    express:router dispatching OPTIONS /uploader/beats +3ms
    express:router trim prefix (/api) from url /api/uploader/beats +3ms
    express:router router /api : /api/uploader/beats +3ms
    express:router dispatching OPTIONS /uploader/beats +3ms
    express:router trim prefix (/api) from url /api/uploader/beats +4ms
    express:router router /api : /api/uploader/beats +2ms
    express:router dispatching OPTIONS /uploader/beats +4ms
    express:router trim prefix (/api) from url /api/uploader/beats +3ms
    express:router router /api : /api/uploader/beats +3ms
    express:router dispatching OPTIONS /uploader/beats +3ms
    express:router trim prefix (/api/uploader) from url /api/uploader/beats +4ms
    express:router router /api/uploader : /api/uploader/beats +3ms
    express:router dispatching OPTIONS /beats +4ms
    express:router dispatching POST /api/uploader/beats +10ms
    express:router query  : /api/uploader/beats +2ms
    express:router expressInit  : /api/uploader/beats +1ms
    express:router serveStatic  : /api/uploader/beats +2ms
    express:router jsonParser  : /api/uploader/beats +2ms
    express:router urlencodedParser  : /api/uploader/beats +3ms
    express:router &lt;anonymous&gt;  : /api/uploader/beats +2ms
    express:router &lt;anonymous&gt;  : /api/uploader/beats +1ms
    express:router trim prefix (/api) from url /api/uploader/beats +3ms
    express:router router /api : /api/uploader/beats +0ms
    express:router dispatching POST /uploader/beats +1ms
    express:router trim prefix (/api) from url /api/uploader/beats +1ms
    express:router router /api : /api/uploader/beats +1ms
    express:router dispatching POST /uploader/beats +0ms
    express:router trim prefix (/api) from url /api/uploader/beats +2ms
    express:router router /api : /api/uploader/beats +2ms
    express:router dispatching POST /uploader/beats +3ms
    express:router trim prefix (/api) from url /api/uploader/beats +3ms
    express:router router /api : /api/uploader/beats +3ms
    express:router dispatching POST /uploader/beats +4ms
    express:router trim prefix (/api) from url /api/uploader/beats +2ms
    express:router router /api : /api/uploader/beats +3ms
    express:router dispatching POST /uploader/beats +4ms
    express:router trim prefix (/api) from url /api/uploader/beats +2ms
    express:router router /api : /api/uploader/beats +3ms
    express:router dispatching POST /uploader/beats +4ms
    express:router trim prefix (/api) from url /api/uploader/beats +2ms
    express:router router /api : /api/uploader/beats +3ms
    express:router dispatching POST /uploader/beats +3ms
    express:router trim prefix (/api/uploader) from url /api/uploader/beats +2ms
    express:router router /api/uploader : /api/uploader/beats +3ms
    express:router dispatching POST /beats +2ms
  [2017-10-06T11:57:05.828Z] An error has occured:
  Error: Request aborted
    express:router dispatching POST /api/uploader/beats +2m
    express:router query  : /api/uploader/beats +3ms
    express:router expressInit  : /api/uploader/beats +4ms
    express:router serveStatic  : /api/uploader/beats +3ms
    express:router jsonParser  : /api/uploader/beats +4ms
    express:router urlencodedParser  : /api/uploader/beats +3ms
    express:router &lt;anonymous&gt;  : /api/uploader/beats +4ms
    express:router &lt;anonymous&gt;  : /api/uploader/beats +3ms
    express:router trim prefix (/api) from url /api/uploader/beats +4ms
    express:router router /api : /api/uploader/beats +3ms
    express:router dispatching POST /uploader/beats +4ms
    express:router trim prefix (/api) from url /api/uploader/beats +3ms
    express:router router /api : /api/uploader/beats +4ms
    express:router dispatching POST /uploader/beats +3ms
    express:router trim prefix (/api) from url /api/uploader/beats +3ms
    express:router router /api : /api/uploader/beats +4ms
    express:router dispatching POST /uploader/beats +2ms
    express:router trim prefix (/api) from url /api/uploader/beats +4ms
    express:router router /api : /api/uploader/beats +3ms
    express:router dispatching POST /uploader/beats +4ms
    express:router trim prefix (/api) from url /api/uploader/beats +3ms
    express:router router /api : /api/uploader/beats +4ms
    express:router dispatching POST /uploader/beats +2ms
    express:router trim prefix (/api) from url /api/uploader/beats +3ms
    express:router router /api : /api/uploader/beats +2ms
    express:router dispatching POST /uploader/beats +2ms
    express:router trim prefix (/api) from url /api/uploader/beats +2ms
    express:router router /api : /api/uploader/beats +3ms
    express:router dispatching POST /uploader/beats +2ms
    express:router trim prefix (/api/uploader) from url /api/uploader/beats +3ms
    express:router router /api/uploader : /api/uploader/beats +2ms
    express:router dispatching POST /beats +3ms
  </code></pre>
  
  <p>Thanks </p>