title: Node.js Express image won't show after upload
body: <p>I'm trying to show an image on index.html after uploading it using node.js, express and multer. The multer implementation is based on a tutorial. </p>
  
  <ul>
  <li>The upload works. The image shows up in "/uploads" and the console.log is done as expected.</li>
  <li>The index.html shows "File uploaded." from the message var.</li>
  <li>Dev tools console says: GET <a href="http://127.0.0.1:3000/uploads/test1423920987055.jpg" rel="nofollow">http://127.0.0.1:3000/uploads/test1423920987055.jpg</a> 404 (Not Found).</li>
  <li>I've tried to get the picture directly via &lt; img > but it doesn't show.</li>
  </ul>
  
  <p>I would be really grateful if I could get an explanation so that I understand what I'm missing.</p>
  
  <p>Here's my server.js:</p>
  
  <pre><code>app.use(express.static(__dirname + '/uploads')); 
  
  app.use(multer({ dest: './uploads/',
   rename: function (fieldname, filename) {
      return filename+Date.now();
    },
  onFileUploadStart: function (file) {
    console.log(file.originalname + ' is starting ...')
  },
  onFileUploadComplete: function (file) {
    console.log(file.fieldname + ' uploaded to  ' + file.path)
    message = "&lt;p&gt;File uploaded.&lt;/p&gt;"
    message += "&lt;p&gt;&lt;img src=\"" + file.path + "\"&gt; &lt;/p&gt;";
    done=true;
  }
  }));
  
  app.get('/',function(req,res){
        res.sendfile("index.html");
  });
  
  app.post('/api/photo',function(req,res){
    if(done==true){
      console.log(req.files);
      res.end(message);
        //res.end("File uploaded.");
    }
  });
  
  app.listen(3000,function(){
      console.log("Working on port 3000");
  });
  </code></pre>
  
  <p>and my index.html:</p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;File upload Node.&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;form id="uploadForm"
            enctype="multipart/form-data"
            action="/api/photo"
            method="post"&gt;
        &lt;input type="file" name="userPhoto" /&gt;
        &lt;input type="submit" value="Upload Image" name="submit"&gt;
      &lt;/form&gt;
        &lt;div class="pic"&gt; &lt;/div&gt;
        &lt;img src="http://127.0.0.1:3000/uploads/test1423920256762.jpg"&gt;
    &lt;/body&gt;
    &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.form/3.51/jquery.form.min.js"&gt;&lt;/script&gt;
    &lt;script&gt;
    $(document).ready(function() {
  
       $('#uploadForm').submit(function() {
  
          $(this).ajaxSubmit({
  
              error: function(xhr) {
                      status('Error: ' + xhr.status);
              },
  
              success: function(response) {
                      $(response).appendTo('.pic');
                        console.log(response);
              }
      });
  
      return false;
      });    
  });
    &lt;/script&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Thank you for every hint in advance.</p>