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",
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);
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 :(