I am trying to upload a file to my NodeJs Server from My Mobile ReactNative App.
I tried to use FormData with Axios post but it is resulting in a NetworkError. Logging the FormData object before sending it gives me an object with an Array _parts that contains Arrays of my fields.
Also when I console.log the prototypes of FormData I only get two methods that I can use, which are append and getParts. I can't use any method that does exist in the documentation like getHeaders or getBoundary
Now If I want to make a file upload without using FormData, Should I send a fileStream of the picture I want to upload or just send the uri of the picture? I am using multer to capture the Files in my server.
What was causing the Network Error is me using a nested object inside dataForm.
//Other code onTop
const {location, ...other} = payload;
form.append("location", JSON.stringify(location));
...
I hope this might help someone.
Also Files Are Blobs, basically a readabaleStream. Read More About it Here
Related
I have a client in React that sends a form data with a file. When that file arrives to the server, the body is parsed by body parser and its result is a buffer. The idea is that the file keep saved in some place of my server, because I want to use it later from my client. So I'd like to know how should I handle this problem.
I tried to write directly this buffer as a file with fs, but the file created has an error of format, so I can't access it.
You can do stuff like this
var fs = require('fs');
fs.writeFile('newImage', req.files.image, function (err) {
if (err) throw err;
console.log("It's saved");
});
correct parameter order of fs.writeFile is the filename first then the content.
If you're using express.bodyParser() you'll have the uploaded files in the req.files field.
And of course you should write the callback:
POV: Your image file should be in req.files not the body.
I think you need a package for storing a file on your backend service. I had used morgan package for that and I was satisfied with using it. I have just searched other packages for storing a file, i found express-fileupload package. Maybe you want to look at how to use those. If you want to store a file, using the third package would be better for you and for your effort.
Is there a way to post form-data through postman using Nodejs. I have seen many platforms but the author is using the front-end to post data which manipulates the back-end code. I want to understand the code
Yes you can send the data using form-data in post man.
You can see the formdata under the body section in this form data you have to change the type from text to file
after changing to file type you can browse your local machine. to choose the image
You can further parse the files in node js using formidable. You can install this package and you can configure to your needs. It can handle upto 1000 files
Coming to code part in node js.
First configure the formidable
const form = new formidable.IncomingForm({
multiples: true,
keepExtensions: true,
});
After that you have to parse the fieldvalue and file
form.parse(req);
Then you can seperate the value and files uisng
form.on("file", (field, file) => {}) //For file
form.on("field", (fieldName, fieldValue) => {}) //for fieldvalue
Hope this one helps for you!!
Sure thing. Set request type to POST and then define your data in the request body
check this out
https://learning.postman.com/docs/sending-requests/requests/#sending-body-data
I am using screenshot-desktop package in electron to get screenshot of my desktop. Its getting me a array buffer of the screenshot. Now I want to send this array buffer to the API which is in NodeJS. I am using Axios post method to send the data to my NodeJS API. I tried couple of things like fs.createReadStream and Blob but nothing work properly can any one provide a solution that how we can send array buffer from electron?
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 using sharp to process images on the server side and react dropzone to get the image file. When I post the file to the server from dropzone, I get the blob out of the request.body that looks like:
{ preview: 'blob:http%3A//127.0.0.1%3A3000/1451580a-b24f-478f-a9f7-338c0d790829' }
Optionally, before I send data to the server I can use FileReader (or something else) to do something with the image file instead of turning it into a blob.
Sharp takes:
A Buffer containing JPEG, PNG, WebP, GIF, SVG, TIFF
Raw pixel image data
A String containing the path to an image file, with most major formats supported.
How can I use what I have to provide sharp a supported format?
I recommend trying out a node.js module called Multer to help you access your photo file on your server.
https://github.com/expressjs/multer
First, on the client, you'll want to append your file to a FormData object like this:
// obtain the file from your react dropzone and save it to this file variable
const file = dropzone.file // not sure how you do this with react dropzone
const data = new FormData()
data.append('photo', file)
Then you'll send this FormData object to your server. On the server you'll use Multer on the route you're using for the photo for processing.
Make sure you npm install multer, and require it on your server or routes file. If you're sending a single file you'll use the multer 'single' method. If you want to do anything different check out the API documentation.
app.post('/photos', multer().single('photo'), controller.processPhoto);
In this example route, you're sending a POST request to /photos, multer is looking for a file with a FormData key of 'photo' and appending that to the request object.
Then in this made up 'controller.processPhoto' method you'll have access to the image as a property of the request object, on req.file. With this you can easily access a lot of good information including the image buffer req.file.buffer which it sounds like you need. (also mimetype, original name etc.)
This should be enough to get you started.