Angular NodeJs multer upload img req.file is always undefined

Question

I'm getting req.file as undefined. I have tried everything. I have searched for other solutions, but it's not a problem in input name="avatar" attr and upload.single("avatar").

Also, I'm getting an error in the console:

Error for image upload 400 - Bad Request
{"code":"ER_PARSE_ERROR","errno":1064,"sqlMessage":"You have an error
in your SQL syntax; check the manual that corresponds to your MySQL
server version for the right syntax to use near '?)' at line
1","sqlState":"42000","index":0,"sql":"INSERT INTO avatars (image)
VALUES(?)"}

I would say that it is because req.file is undefined. Please, help me to understand what I'm doing wrong.

api.js:

var storage = multer.diskStorage({
destination: function(req, file, callback) {
  callback(null, "./assets/images/uploads");
},
filename: function(req, file, callback) {
  callback(null, file.fieldname + "_" + Date.now() + "_" + 
  file.originalname);
  }
});

var upload = multer({
  storage: storage,
  limits: {fileSize: 1000000},
  fileFilter: function(req, file, cb) {
    checkFileType(file, cb);
  }
});

function checkFileType(file, cb) {
  const filetypes = /jpeg|jpg|png|gif/;
  const extname = filetypes.test(file.originalname.toLowerCase());
  const mimetype = filetypes.test(file.mimetype);

  if(extname && mimetype) {
    return cb(null, true);
   } else {
     cb('Error: Images only');
   }
 }

 router.post("/upload", upload.single('avatar'), function(req, res) {
   console.log(req.file); // <- ALWAYS UNDEFINED

   pool.getConnection(function(err, connection) {
     if (err) throw err;

   connection.query('INSERT INTO avatars (image) VALUES(?)', req.file, 
     function (error, results, fields) {
    if(error){
      console.log("Error: " + error);
      res.status(400).send(error);
    }
    res.status(200).end(JSON.stringify(results));
    connection.release();
    if (error) throw error;
    });
  });
});

html:

 <form enctype="multipart/form-data">
  <input  class="form-control"
          (change)="onFileSelected($event)"
          type="file" name="avatar">
  <button type="submit" class="btn btn-danger float-right" (click)="onUpload()">Upload image</button>
</form>

ctrl:

onFileSelected(event) {
  if(event.target.files.length > 0) {
    this.uploadImage = <File>event.target.files[0];
  }
}

onUpload() {
  if(this.uploadImage) {
    this.friendService.uploadFile(this.uploadImage)
      .subscribe(
        data => {
          return true;
        },
        error => {
          console.error('Error for image upload ' + error);
          return false;
        })
  }
}

service:

   uploadFile(file): Observable<any> {
     return this.http.post(`${this.apiUrl}/upload`, file)
     .map(res => res.json())
     .catch(this.handleError);
   }

db mysql avatars table:

     Field                - image   
     Type                 - blob    
     Null                 - NO 
     Key Default    Extra - Empty

Kesavan R Kesavan R · Accepted Answer · 2018-10-31T16:58:38

while uploading file it should be form data and content type should be multipart/form-data

For your reference: File Upload In Angular?.

I hope this will help you.

Angular NodeJs multer upload img req.file is always undefined

1 Answers