How do I pass an image from ajax to nodejs ( illegal invocation error)

See more:

Javascript

HTML

Ajax

database

Hi all !,

So i am trying to upload an image from frontend(html) and save it locally , get the path and save the path into the db. Here is my code:

Html:

  <!-- ... form-->
   <div class="form-group">
      <input type="file" id="prop_image" name="prop_image" accept="image/*">
  </div>
<div class="form-group">
                  <input type="submit" class="btn btn-primary" id="submit" ng-click="createProperty()"; name="submit" value="Create Property">
                </div><

javascript :

$("#PropertyForm").submit(function(event) {
         event.preventDefault();
   roomForm = new FormData();
         roomForm.append("room_no",$scope.Rooms[i].roomNo);
         roomForm.append("features_mask",featureVal);
         roomForm.append("mon_hrs",RoomAvail.mon);
         roomForm.append("tue_hrs",RoomAvail.tue);
         roomForm.append("wed_hrs",RoomAvail.wed);
         roomForm.append("thu_hrs",RoomAvail.thu);
         roomForm.append("fri_hrs",RoomAvail.fri);
         roomForm.append("sat_hrs",RoomAvail.sat);
         roomForm.append("sun_hrs",RoomAvail.sun);
         roomForm.append("area_dim",$scope.Rooms[i].area_dim);
         roomForm.append("prop_image",document.getElementById('prop_image').files[0]);
         roomForm.append("property_id",$scope.property_id);


         console.log("before");

  $.ajax({
           url:"http://localhost:1337/createRoom",
           type:"POST",
           method: "POST",
           mimeType: "multipart/form-data",
           // contentType: 'multipart/form-data',

           data: roomForm,
           success: (response)=>
           {
               console.log("success");
           },
           error: (error)=>
           {
             Swal.fire({
                   icon:'error',
                   title:'Oops...',
                   text: "Error in Query. Please contact System Admin."
                 });
           }
         })

nodejs ( I am trying to use moduler) if your prefer to use another library or so just tell me how :) :

app.post("/createRoom",upload.single("prop_image"), (req,res,next) =>{ 
      
    log("in create rooms"); 
    log(req.file); // CANNOT GET FILE!
    connection.query("INSERT INTO ......"
    ,(error,rows,field)=>
    {
        if(!!error)
        {
            res.status(400).send("Error in query :",error);
        }else
        {
            res.status(200).send("Rooms Created");
        }
    })
})

What I have tried:

i tried to pass FormData() and append the image to it but it is not working, illegal invocation error still pops up. I appreciate your work as this is taking me some time :(