title: Image file upload with node and express
body: <p>Hi i am trying to do an image upload with ajax.so this are my files.</p>
  
  <pre><code>//index.html 
  &lt;!DOCTYPE HTML&gt;
  &lt;html lang="en-US"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;File Upload showing Upload Progress&lt;/title&gt;
      &lt;style&gt;
          * {
              font-family: Verdana;
              font-size: 12px;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  
  &lt;form action="/upload" method="post" enctype="multipart/form-data" id="MyUploadForm"&gt;
  &lt;input name="ImageFile" id="imageInput" type="file" /&gt;
  &lt;input type="submit"  id="submit-btn" value="Upload" /&gt;
  &lt;img src="images/ajax-loader.gif" id="loading-img" style="display:none;" alt="Please Wait"/&gt;
  &lt;/form&gt;
  &lt;div id="output"&gt;&lt;/div&gt;
  
      &lt;script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.min.js'&gt;&lt;/script&gt;
      &lt;script type='text/javascript' src='main.js'&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;script type="text/javascript" src="js/jquery.form.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  $(document).ready(function() {
      var options = {
              target:   '#output',   // target element(s) to be updated with server response
              beforeSubmit:  beforeSubmit,  // pre-submit callback
              resetForm: true        // reset the form after successful submit
          };
  
       $('#MyUploadForm').submit(function() {
              $(this).ajaxSubmit(options);  //Ajax Submit form           
              // return false to prevent standard browser submit and page navigation
              return false;
          });
  });
  
  //function to check file size before uploading.
  function beforeSubmit(){
      //check whether browser fully supports all File API
     if (window.File &amp;&amp; window.FileReader &amp;&amp; window.FileList &amp;&amp; window.Blob)
      {
  
          if( !$('#imageInput').val()) //check empty input filed
          {
              $("#output").html("Are you kidding me?");
              return false
          }
  
          var fsize = $('#imageInput')[0].files[0].size; //get file size
          var ftype = $('#imageInput')[0].files[0].type; // get file type
  
  
          //allow only valid image file types
          switch(ftype)
          {
              case 'image/png': case 'image/gif': case 'image/jpeg': case 'image/pjpeg':
                  break;
              default:
                  $("#output").html("&lt;b&gt;"+ftype+"&lt;/b&gt; Unsupported file type!");
                  return false
          }
  
          //Allowed file size is less than 1 MB (1048576)
          if(fsize&gt;1048576)
          {
              $("#output").html("&lt;b&gt;"+fsize +"&lt;/b&gt; Too big Image file! &lt;br /&gt;Please reduce the size of your photo using an image editor.");
              return false
          }
  
          $('#submit-btn').hide(); //hide submit button
          $('#loading-img').show(); //hide submit button
          $("#output").html("");  
      }
      else
      {
          //Output error to older unsupported browsers that doesn't support HTML5 File API
          $("#output").html("Please upgrade your browser, because your current browser lacks some new features we need!");
          return false;
      }
  }
  
  &lt;/script&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>this is my app.js</p>
  
  <pre><code>var express = require('express');   //Express Web Server 
  var bodyParser = require('body-parser'); //connects bodyParsing middleware
  var formidable = require('formidable');
  var path = require('path');     //used for file path
  var fs =require('fs-extra');    //File System-needed for renaming file etc
  
  var app = express();
  app.use(express.static(path.join(__dirname, 'public')));
  
  app.set('views', __dirname + '/views');
  app.engine('html', require('ejs').renderFile);
  /* ========================================================== 
   bodyParser() required to allow Express to see the uploaded files
  ============================================================ */
  app.use(bodyParser({defer: true}));
  
  app.route('/').get(function(req,res)
  {
      console.log("Hello world");
       res.render('index.html');
       res.end('done');
      });
  
  app.post('/upload', function(req, res) {
      res.send('fileinfo: ' + req.files);
  });
  
  var server = app.listen(3030, function() {
  console.log('Listening on port %d', server.address().port);
  });
  </code></pre>
  
  <p>But I am getting req.files undefined.Can anybody tell why? can anybody have solution for my scnario.Am i do everything correctly.</p>