I have written auth routes in Nestjs and wanted to use it with the form-data. I got it working with URL-encoded-form-data, JSON, text, but not receiving anything in the body when I use form-data and really want it to work with form-data as on the front-end I am hitting the route with form-data. I have tried every way I could find on the web, but none of them helped me in this case. so after hours of searching and trying when I didn't get any lead I am posting my question here.
Any Kind of Help is appreciated.
Code of signup endpoint
Main.ts configurations
empty body I am getting on postman
NestJS provides a built-in multipart/form-data parser which you can access using a FileInterceptor.
Here's an example of how you'd read a single file (as you've shown in your screenshot):
#Post('signup')
#UseInterceptors(FileInterceptor('<name of file here - asdasd in your screenshot>'))
signup(#UploadedFile() file, #Body() body) {
console.log(file);
console.log(body);
}
Related
✨ Hello everyone!✨
General Problem:
I have a web app that has about 50 images that shouldn't be able to be accessed before the user logs into the site. This should be a simple answer I suspect, there are plenty of sites that also require this basic protection. Maybe I do not know the right words to google here, but I am having a bit of trouble. Any help is appreciated.
App details:
My web app is built in typescript react, with a node.js/express/mongoDB backend. Fairly typical stuff.
What I have tried:
My best thought so far was to upload them into the public folder on the backend server hosted on heroku. Then I protected the images with authenication middlewear to any url that had "/images/" as a part of it. This works, partially. I am able to see the images when I call the api from postman with the authenication header. But I cannot figure out a way to display that image in my react web app. Here is the basic call I used.
fetch(url,
{
headers: {
Authorization:token,
},
}
);
and then the actual response is just an empty object when I try to copy it
{}
but I also get this when I console log the pure response, some kind of readable stream:
from following related question
I came up with the following: (which is normally wrapped in a asyc function)
const image = await fetch(url,{headers:{ Authorization:token}});
const theBlob = await image.blob();
console.log(URL.createObjectURL(theBlob));
which gives me the link: http://localhost:3000/b299feb8-6ee2-433d-bf05-05bce01516b3 which only displays a blank page.
Any help is very much appreciated! Thanks! 😄
After lots of work trying to understand whats going on, here is my own answer:
const image = await axios(url, { responseType: "blob", headers: {Authorization: token }});
const srcForImage = URL.createObjectURL(image.data)
Why it makes sense now
So I did not understand the innerworkings of what was going on. Please correct me, but the following is my understanding:
So the image was being sent in binary. What I had to do to fix that was to set the reponseType in axios as "blob", which then sent a blob, which I believe means its base 64 encoded instead. Then the function URL.createObjectURL does some magic, and must save it to the browser as part of the page. Then we can just use that as the image url. When you visit it yourself, you must type the 'blob:' part of the url it give you too, otherwise its blank, or stick it in <img src={srcForImage}/> and it works great. I bet it would've worked in the original fetch example in the question, I just never put the url in a tag or included 'blob:' as part of the URL.
That's correct, you send the auth token and the backend uses that to auth the user (check that he exists in the DB, that he has the correct Role and check the jwt too)
The server only responds with the images if the above is true
If your server is responding with an empty object then the problem is the backend not the frontend, console.log what you're sending to the frontend
I am writing node.js App. I am able to get data entered from postman via "x-www-form-urlencoded". But When I enter data with "form-data",the data is not accepted in API.I have tried with app.use(bodyParser.urlencoded({extended:false})) and app.use(bodyParser.urlencoded({extended:true})) . But still it is not working. Is there any way I can accept data via "form-data"?
As suggested in post you cannot use body-parser for form-data.
Instead, you can use a module like multer.
I'm trying to validate a webhook via facebook. So facebook hits my url my-url/facebook/receive within my route in nodejs i'd do res.send(req.query['hub.challenge']); to send an http response.
I'm using KoaJS. From what i understand, Koajs merges the request and response object into ctx but when reading through the docs I can't find anything along the lines of ctx.send or similar to send a http response.
Can anyone give me some direction or links.
Thanks.
To send the body of a response, you can simply do ctx.response.body = 'Hello'. There are many aliases attached to ctx, so you don't necessarily have to reference the response or request yourself. Doing ctx.body = 'Hello' would be the same as the code above.
If you wanted to set headers, you would use the ctx.set() method. For example: ctx.set('Content-Type', 'text/plain').
To access the query parameters, you would use ctx.request.query['some-key'] (or simply the alias ctx.query['some-key']).
All of the different request/response methods are documented pretty well at the Koa website along with a list of aliases attached to ctx. I highly recommend you give it a read.
I've implemented a webhook for a facebook chatbot with php using laravel and all works fine, when I message my bot I receive a post request with expected data structure and I manage to have all working well. Then I was trying to do the webhook implementation using nodejs but when I message my bot the post request that I receive is not the one it would be expected. This is kind of weird because I was able to validate the webhook with the token. I have used the same facebook app and page that I used for the php implementation so I don't think the problem is there. Here's the code in node: http://pastebin.com/0GQcXdV2
I would expect the request structure to be: http://pastebin.com/GFU89LjA
but instead it's this: http://pastebin.com/51S7DrkG
I'm sorry if this question seems stupid and I'm missing something obvious but can't figure out what. I'm kind of new to node js so maybe this is a newbie mistake, but if anyone can tell me what am I doing wrong it would be very appreciated. Thanks in advance
I managed to solve my problem by importing npm body-parser and make my express app use it for returning JSON. According to the npm documentation the bodyParser object provides middleware factories that expose the body of the request and assign it to req.body in plain text, json , raw or url encoding form body (https://www.npmjs.com/package/body-parser). To solve my problem i just added the following two lines of code:
var bodyParser = require('body-parser');
app.use(bodyParser.json());
More information on body parser can be found here.
I'm developing a RESTful API for a mobile client application with the combination of Node.js, Express.js and Mongodb.
Now I'm trying to handle the upload of the user profile image and I've found a module called "multer" (that is the one ecommended by express.js team itself) that allow the express.app to handle multipart/form-data requests.
Now I need to test the app and, moreover, the upload function but I'm not able to simulate a http-form request (via postman chrome plugin).
Multer returns this error:
[Error: Multipart: Boundary not found]
In fact, comparing an http-form request (which works) with a custom http request, the second one has not the Boundary header property.
What Boundary property is?
If you are using Postman, you can try removing the Header: "Content-type": "multipart/form-data". I removed it and now it works.
Boundary in a multipart form indicates some delimiter string separating text and binary data. You can do this in postman but it sounds like you aren't sending both file and text so postman maybe defaults to a regular form. do you see something like:
If you click preview in postman you can see the boundary in the Content-type header and in the body.
solutions:
1) don't specify the content-type at client
2) use the naming convention(imageUpload) in upload.single('imageUpload') same as field name