"TypeError: Cannot read property 'filename' of undefined " while using multer to upload user profile photo

I am trying to upload user profile photo using express.js server and Multer, but don't know why I am getting "TypeError: Cannot read property 'filename' of undefined" error. Here below is my code for both server and html.

imported packages

   const multer= require('multer');
   const path=require('path');
   const express=require('express');
   const app=express();
   app.use(express.json());
   app.use(cors()); 

middleware code

      app.use(express.static( __dirname+"./backend/database/"));

      var upload=multer({dest:'public/'});

      var upload=multer({
    storage:multer.diskStorage({
           destination:function(req,file,cb){
              cb(null,'./public');
          },
            filename:(req,file,cb)=>{ cb(null,file.originalname);
         }
       })
    }).single('Image')

API to register user

    app.post('/register',upload,(req,res)=>{
         let userData ={
            Name:req.body.Name,
            Password:req.body.Password,
            Username:req.body.Username,
            ContactNo:req.body.ContactNo,
            Image:req.file.filename
         }
       console.log(req.body);//to check if image successfully recieved from the frontend  
     })

HTML code

     <form [formGroup]="register" (ngSubmit)="Register(register.value)" enctype="multipart/form-data" >
            <legend>
                Sign Up
            </legend>
            <mat-form-field  color="warn">
                <mat-label>Name</mat-label>
                <mat-icon >person</mat-icon>
                <input matInput type="email" formControlName="Username" value="Username" />
            </mat-form-field>
    
            <mat-form-field  color="warn">
                <mat-label>Enter your Email</mat-label> 
                <mat-icon >email</mat-icon>
                <input matInput type="email" formControlName="Name" value="Email" />
            </mat-form-field>
            
            <mat-form-field  color="warn"> 
                <mat-label>Phone Number</mat-label>
                <mat-icon >call</mat-icon>
                <input matInput type="number"  formControlName="ContactNo" placeholder="+91 XXXXXXXXXX"
                    value="ContactNo" />
            </mat-form-field>
    
            <mat-form-field  color="warn">
                <mat-label>Write your Password</mat-label>
                <mat-icon >lock</mat-icon>
                <input matInput formControlName="Password" placeholder="Password" type="password" />
            </mat-form-field>

            <div color="warn">
                <label>Upload Your Photo</label>
                <mat-icon >photo</mat-icon>
                <input class="file"  formControlName="Image" placeholder="Upload Image" type="file" />
            </div>
            <button mat-raised-button color="warn" type="submit" (click)="changeAgain()">submit</button>
            <button mat-raised-button color="primary" style="margin-top: 2px;" type="reset">Reset</button>
            <br>
        </form>

to post the data

     Register(data)
    {
     this.serve.RegisterUser(data);
       //" serve " here is alias for injected HTTP services
    }