Uploading image in Nodejs-CodePudding

I tried to follow some tutorials for upload file in node js..but it seem the upload for image is not working. It show

Error: ENOENT: no such file or directory, open 'C:\Users\User\Downloads\fileuplloaddownload-master\public\uploads\pexels-luiisrtz-1693399.jpg'

I try to find the mistake in the code but it seem that I do it correctly. Can it be the code is outdated?

This is my code for app.js

    var express = require('express');
    var mongoose = require('mongoose');
    var bodyParser = require('body-parser');
    var multer =  require('multer');
    var path = require('path');
    
    var picSchema= new mongoose.Schema({
        picpath:String
    })
    
    var picModel = mongoose.model('picsdemo',picSchema);
    
    var storage = multer.diskStorage({
        destination:function(req,file,cb){
            cb(null,'./public/uploads')
        },
        filename:function(req,file,cb){
            cb(null,file.originalname)
        }
    })
    var upload = multer({storage:storage})
    
    var app = express();
    
    mongoose.connect('mongodb://localhost:27017/pics',{useNewUrlParser:true})
    .then(()=>console.log('connected')).catch(err=>console.log('error ocured',err));
    
    app.set('views',path.resolve(__dirname,'views'));
    app.set('view engine','ejs');
    
    var pathh = path.resolve(__dirname,'public');
    app.use(express.static(pathh));
    app.use(bodyParser.urlencoded({extended:false}));
    
    
    app.get('/',(req,res)=>{
        picModel.find((err,data)=>{
            if(err){
                console.log(err)
            }
            else if(data.length>0){
                res.render('home',{data:data})
            }
            else{
                res.render('home',{data:{}})
            }
        })
    })
    
    app.post('/',upload.single('pic'),(req,res)=>{
        var x = 'uploads/' req.file.originalname;
        var temp = new picModel({
            picpath:x
        })
        temp.save((err,data)=>{
            if(err){
                console.log(err)
            }
            res.redirect('/')
        })
    })
    
    app.get('/download/:id',(req,res)=>{
        picModel.find({_id:req.params.id},(err,data)=>{
             if(err){
                 console.log(err)
             }
             else{
                 var x= __dirname '/public/' data[0].picpath;
                 res.download(x)
             }
        })
    })
    
    var port  = process.env.PORT || 3000 ;
    app.listen(port,()=>console.log('server running at port' port))

This home.ejs code for the website layout

 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>Document</title>
 </head>
 <body>
      <form action="/" method="POST" enctype="multipart/form-data">
      <input type="file" name="pic" id="pic"><br>
      <input type="submit" value="upload file">
    </form><br><br><br><br>
    <% if(data.length > 0) {%>
      <table>
           <thead>
               <tr>
                   <td>
                       images
                   </td>
                   <td>
                       download
                   </td>
               </tr>
           </thead>
           <tbody>
               <% for(var i=0; i< data.length; i  ) {%>
               <tr>
                   <td>
                 <img src="<%= data[i].picpath%>" alt="images" style="width:100px; height:100px;">
                   </td>
                   <td>
                <form action="/download/<%= data[i]._id%>">
                 <input type="submit" value="download">
                </form>
                   </td>
               </tr>
               <% } %>
           </tbody>
      </table>
      <% } %>  
 </body>
 </html>

In this code I use this dependancies

"body-parser": "^1.19.0", "ejs": "^2.7.1", "express": "^4.17.1", "mongoose": "^5.7.7", "multer": "^1.4.2"

CodePudding user response：

Multer will try to put uploaded images to public/uploads folder, but that folder probably does not exist.

Try creating public folder and uploads folder inside of it, and then try again.

CodePudding user response：

You can use also fsGrid for uploading image to db