0

I'm working on node.js CRUD code with MongoDB. The app is to allow a user to upload photos, edit details and delete the photo on the DB. I can't seem to get the Delete part of the code working. It should route the user back to /photos after deleting the picture.

AlexWHY
  • 15
  • 4
  • Can u paste ur findByIdAndRemove method , also do u see any errors in ur terminal or browser console. Place some console logs in ur code and see whether the endpoint is getting hit or not etc. ... Thank you – zenwraight Mar 29 '18 at 03:39
  • Also the method type is get - method="get" for your delete button may be try changing ur endpoint to - router.get('/delete/:photoid', function(req, res){ – zenwraight Mar 29 '18 at 03:40
  • @zenwraight where/how do you want me to place the console logs? I tried to change the method to get but still getting error. See updated console error. – AlexWHY Mar 29 '18 at 03:49
  • @zenwraight findByIdAndRemove method is from Mongoose found here - http://mongoosejs.com/docs/api.html#findbyidandremove_findByIdAndRemove – AlexWHY Mar 29 '18 at 03:54

2 Answers2

0

In your form, you are sending GET /photo/delete/{id} request, while what you are defining on server-side is DELETE /photos/delete/{id} endpoint. To get it to work, both HTTP method and URI have to match. Unfortunately, HTML form currently doesn't support DELETE HTTP method, so the workaround for this would be using method-override middleware of express.

$ npm install method-override

Add methodOverride middleware on the server-side (in app.js).

var methodOverride = require('method-override');
...

app.use(methodOverride('_method'));

...

Change the method and URI in the HTML form, and add _method parameter to override HTTP method.

form(method="post" action="/photos/delete/" + photo._id + "?_method=DELETE")
    input#delBtn(type="submit" name="delButton" value="Delete Photo")

Here's more details on how you can use method-override middleware. https://github.com/expressjs/method-override

sh.
  • 41
  • 4
  • I put in these updates but it still does not delete the record. Are you sure this should be --action="/delete/photoid" + photo._id -- ? On photo.js, the router get method is looking for /delete/:photoid – AlexWHY Mar 29 '18 at 04:45
  • added app.js to original message – AlexWHY Mar 29 '18 at 04:52
  • It might be bacause of the previous edit you made. Server-side endpoint should be `router.delete('/delete/:photoid', ...` not `router.get('/delete/:photoid', ...`. `GET` method is for getting resources, and it shouldn't make any changes in db. To delete resources, you should always use `DELETE` method. – sh. Mar 29 '18 at 05:03
  • methodOverride middleware needs to be used in the app.js. not in the photo.js btw (edited my answer to specify that). – sh. Mar 29 '18 at 05:08
  • Just noticed HTML form action should be `"/photos/delete/" + photo._id + "?_method=DELETE"`, since photo router is mounted to `/photos` in app.js. – sh. Mar 29 '18 at 05:20
  • so like this? form(method="post" action="photos/delete/:photoid" + "?_method=DELETE") – AlexWHY Mar 29 '18 at 05:20
  • i added the methodOverride to app.js var methodOverride = require('method-override'); app.use(methodOverride('_method')); and updated router.delete but still not working. router.delete('/delete/:photoid', function(req, res){ – AlexWHY Mar 29 '18 at 05:22
  • > so like this? form(method="post" action="photos/delete/:photoid" + "?_method=DELETE") . Should be `form(method="post" action="/photos/delete/" + photo._id + "?_method=DELETE")`. – sh. Mar 29 '18 at 05:25
  • Just want to thank you for continuing to help me here. Been scratching my head all night with this. I updated the form but it still doesn't delete the photo. I've updated the code above with the most recent edits. Can confirm method-override is a dependency - "method-override": "^2.3.10", – AlexWHY Mar 29 '18 at 05:29
  • np:) Checked your last update. `form(method="post" action="photos/delete/" + photo._id + "?_method=DELETE")`. It's missing leading slash in the action URI. – sh. Mar 29 '18 at 05:36
0

From this link: Are the PUT, DELETE, HEAD, etc methods available in most web browsers? They have mentioned that HTML form would support only GET and POST method, while the XMLHttpRequest (i.e. Ajax) supports GET, POST, DELETE, PUT.

if ur form is using post method, your router should be router.post('/delete/:photo_id', ...)

In case that u want to use router.get('/delete/:photo_id', ...), I may suggest u to use <a href="photos/delete/" + photo_id + "?_method=delete">Delete Photo</a>

Dharman
  • 30,962
  • 25
  • 85
  • 135
Devel JD
  • 35
  • 10