1

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.

  • The upload works. The image shows up in "/uploads" and the console.log is done as expected.
  • The index.html shows "File uploaded." from the message var.
  • Dev tools console says: GET http://127.0.0.1:3000/uploads/test1423920987055.jpg 404 (Not Found).
  • I've tried to get the picture directly via < img > but it doesn't show.

I would be really grateful if I could get an explanation so that I understand what I'm missing.

Here's my server.js:

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 = "<p>File uploaded.</p>"
  message += "<p><img src=\"" + file.path + "\"> </p>";
  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");
});

and my index.html:

<html>
  <head>
    <title>File upload Node.</title>
  </head>
  <body>
      <form id="uploadForm"
          enctype="multipart/form-data"
          action="/api/photo"
          method="post">
      <input type="file" name="userPhoto" />
      <input type="submit" value="Upload Image" name="submit">
    </form>
      <div class="pic"> </div>
      <img src="http://127.0.0.1:3000/uploads/test1423920256762.jpg">
  </body>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.form/3.51/jquery.form.min.js"></script>
  <script>
  $(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;
    });    
});
  </script>
</html>

Thank you for every hint in advance.

t.niese
  • 39,256
  • 9
  • 74
  • 101
Flynn
  • 25
  • 4
  • I don't see any static route in your code pointing to the `./uploads/` directory. – t.niese Feb 14 '15 at 14:01
  • Oh! Thanks, I totally forgot that. I've added: app.use(express.static(__dirname + '/uploads')); before the line with app.use(multer... but that didn't fix it :( – Flynn Feb 14 '15 at 15:06
  • If you used `app.use(express.static(__dirname + '/uploads'));` then it would not be `http://127.0.0.1:3000/uploads/test1423920256762.jpg` but `http://127.0.0.1:3000/test1423920256762.jpg`. You would need to use `app.use('/uploads', express.static(__dirname + '/uploads'));` if you would like to have it prefixed with `/uploads` – t.niese Feb 14 '15 at 15:08
  • Most likely a duplicate to: [Express-js can't GET my static files, why?](http://stackoverflow.com/q/5924072/1960455) – t.niese Feb 14 '15 at 15:11
  • yes, the problem is the same. Didn't think of linking my problem to static files. newbie mistake I guess. Thanks again @t.niese – Flynn Feb 14 '15 at 15:16
  • 1
    Well you explained your problem, you showed some investigation, made a readable questions, so its perfectly fine even if it is a newbie mistake. But you should never modify you question so that it is solved. If it is a duplicate like this one, then just leave it the way it was. If you find a solution yourself that does not already exists on SO then create an answer to your question. – t.niese Feb 14 '15 at 15:22
  • aaaah sorry for that :( I added an "edit comment" and explained what I did to solve it. I'll remove the line I've added. Would you please answer the question so that I can vote it? I guess if it's considered a duplicate it doesn't do any harm, right? if not, I mention it here again, just to be sure: The solution was adding app.use('/uploads', express.static(__dirname + '/uploads')); before the line: app.use(multer – Flynn Feb 14 '15 at 16:47
  • No problem. It was not about the `app.use(express.static(__dirname + '/uploads')); ` your had removed with your last edit. But about the correct `app.use('/uploads', express.static(__dirname + '/uploads')); ` you added before. I should have mentioned that I already did the rollback for you ;). As the correct solution/explanation is already in my linked answer there is no need for a new identical answer. (SO is not - at least it should not be - a place to just answer to gain reputation.) – t.niese Feb 14 '15 at 16:55

0 Answers0