I am passing a uploaded file through formdata from client to server, and the request by the server received has empty body. Here is the code, can someone please help?
Client side code -
Server side code -
OUTPUT -
browser console -
nodejs console -
You need to use a middleware like multer to parse form-data
Your content-type will be
multipart/form-data
Not an application/json
Try to make something like this:
https://programmingwithmosh.com/javascript/react-file-upload-proper-server-side-nodejs-easy/
Related
I have a problem when I try to send a file via http with FormData () in Angular. The headers that I get to the java code are not correct, how can I go about correcting this?
When I send request with Postman:
When I send request with frontend
In node.js express, if I get a request with an undefined body I would like to log what the http protocol text was so that I can figure out what went wrong. I don't want to flood my logs with every single request made to the server just the one that comes up undefined.
I'm facing an issue when I want to pass some data through http.post from my angular client to my node.js server.
Here is the thing, passing text with JSON.stringify(my text) works fine, but given that I want to pass a file + my text, I would like to use formData.
When I try to get back the data in the server side, my req.body is empty, and i'm not able to retrieve the data.
Here is my client side code :
[...]
var formData = new FormData();
formData.append('name', product.name);
formData.append('benefits_detail', product.benefits_detail);
formData.append('sections', product.sections);
formData.append('image', product.image); // image is my file
return this.http.post('http://localhost:3000/product', formData, {headers: headers}).map(........)
Then my server, where I try to get back my data :
router.post('/', function (req, res, next) {
console.log('req.body');
console.log(req.body);
console.log(req.body.formData);
...
Here the console.log are empty like showing : {}
Anybody can help with this ?
Thanks you
It looks like you're not using any body parsing middleware, which is required.
From the Express documentation for req.body
Contains key-value pairs of data submitted in the request body. By default, it is undefined, and is populated when you use body-parsing middleware such as body-parser and multer.
Try using body-parser
For uploading images to a server, you could try to use the Ng File Upload directive. It has a directive to select the file in HTML and then to Upload the file to the server. If you are already selecting the image, I believe you can just use the Uploading part in JS to send the image (have never tried using the Upload without the file selector in HTML, but It should work).
However, this solution would require you to send two requests though, one for the data and another for the image.
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
I am sending a JSON object from web client, which looks like this:
{"AudioEncoder":{"Settings":{"1":{"audio_bitrate":"16000"}}}}
And in the request I get from req.body.myvalue:
{"AudioEncoder":{"Settings":[null,{"audio_bitrate":"16000"}]}}
In the Network panel of my browser I see correct value though:
myvalue[AudioEncoder][Settings][1][audio_bitrate]:16000
Error is where I am expecting object with key {1:... but get [null:....
Any ideas why would this happen?
I suspect your browser isn't actually sending JSON, it's sending application/x-www-form-urlencoded. This is not the correct value if you are trying to have the browser send JSON: myvalue[AudioEncoder][Settings][1][audio_bitrate]:16000. That's not JSON. Check the request headers for Content-Type and look at the raw body of the request to verify this. If you post your browser JS that's sending the AJAX, we can help you fix that. jQuery makes it a little tricky to specify the options correctly to get it to really send JSON.