I have node.js 5.2.0, express 4.2.0 and formidable 1.0.17.
I created a simple form to save a textfield and a photo. It works fine, but the problem is, after the data are uploaded, I can see in the console that the POST is not finished, its still Pending.
In order to finish it I added this to my code
form.on('end', function() {
res.writeHead(200, {'Content-Type': 'text/plain'});
});
I just want to send the headers and nothing on the page. I want the system to get a 200 ok response without having to print anything on the page. But the POST is still pending.
How do I fix this, without having to print anything? What kind of headers I have to send?
Thanks
UPDATE
If I do
form.on('end', function() {
res.end();
});
The POST finishes normally, but I get a blank page. Why is that? I just want to upload some stuff, not print anything on the page, not redirect, stay in the same page.
Thanks again
Try this instead:
res.sendStatus(200);
Or if you want to continue using explicitly defined headers, I believe res.end() needs to be called at some point. You can see how res.end() is utilized in the Formidable example.
The blank page is most likely the result of your client-side form handling. You may want to override the form's submit method and manually post to your express service to prevent the automated redirection you are seeing. Here are some other stackoverflow responses to a question involving form redirection. The answers are jQuery specific, but the basic idea will remain the same.
Related
Browser: Safari
Texteditor: VS CODE
Frontend framework: Reactjs
Backend setup: Express.js
Problem: I have an Axios post request on the front end after an onClick call event is triggered. I am unable to debug the data being sent in the body and know why it isn't getting over to the backend.
The screenshots show the code:(not the breakpoints in red. I am not sure where a good place to use debugger;
This is the code for the onClick event
This is the Backend code running on express port 8000
This is a screenshot of safari and the form being submitted. In the console is the response. As you can see it shows as post request type and status 200. None of that data gets over to the backend SQL database.
Note in the screen above that the object is rendered several times. That is because to get this code to show the results in the console I changed this function.
to this:(though according to react the above is the correct way and will only fire the function once when onclick event is triggered. The below approach does not require an onclick event.
Below is the data showed when setting a breakpoint on all requests. Note that it appears to be a GET request when it should be a POST
Note this is a POST REQUEST. This only happens when the onclick function is changed.
Any help on this matter would be greatly appreciated. I know I am close to figuring this out, however, I am still new to React and CRUD works with it.
So your backend isn't handling the request being made from the front-end. if you want to see the data, try doing this in your server. You need to handle the request your front-end is making before sending a response. The below code just destructures the request body so you don't have to write many lines of code. Once you click on the submit button, you should see that your front-end input is popping up on your back end console. You are currently trying to send an unhandled request. If you want to let's say send something to the front-end based on the request, you would do something like
res.json({nameOfThing: valueOfTheThing"}) AFTER HANDLING THE REQUEST.
app.post("/", (req, res)=>{
const {email, name, question} = req.body
console.log(`Your Email is ${email} and your name is ${name} and your ${question}`)
})
The data should appear in your console. I have actually written a blog on how to do stuff like this. Feel free to check it out. https://dev.to/gbudjeakp/how-to-connect-your-node-express-backend-with-your-react-front-end-post-610
I'm using Expressjs for my project. I want to show a popup in if the post request is success. So I need a way to show a popup alert in the client side when server side says. It's seems not possible. Can any one help me with this?
You need to split that problem to 2 steps,
First, you have to response to the client with an appropriate answer fit to some convention you have established, for example:
app.post('/', function (req, res) {
res.json('{ success: true }')
})
Then, in the client, you need to check that response object and then to create the popup according the given result.
it has to be made on the client side, on the success callback of your POST. Example : https://api.jquery.com/jquery.post/
I'ld like to send two successive ejs page to the client using the following code:
app.post('/', function(req,res) {
res.render('yourDemandIsBeingProceed.ejs');
//some code which require time (open an external programm, run a script, edit a response)
res.render('hereIsYourResult.ejs');
res.end();
});
So, once once the client post his form, he receives a page asking him to wait for a few seconds and then the page containing the response is send.
any suggestion?
many thx
What you can do is have client-side code in yourDemandIsBeingProceed.ejs when the page loads that performs a get/post request to a different endpoint. When the result from that is received, hide/show different elements inside yourDemandIsBeingProceed.ejs so it looks more like hereIsYourResult.ejs
What you really should do is have the user submit information via front end AJAX and put up a loading graphic until the JSON response gets back. AJAX was developed for situations exactly like this.
I am trying to respond to a POST from a web page by sending a file generated by Node.js on-the-fly. I would rather avoid the naive way of saving the file to disk and then calling res.download.
Following this post, I have tried the following coffee:
app.post "/post", (req, res, next) ->
mydata = "I want to write this to a file"
res.setHeader 'Content-disposition', 'attachment; filename="myFile.txt"'
res.setHeader 'Content-type', 'text/plain'
res.write mydata
res.end()
It does not work, though. I just get the same page where my form was, as if it refreshed. I have redirecting to a GET with res.redirect and app.get, but it doesn't work either.
EDIT
I have tried the above code together with a very simple express server. It works if I submit a form data with method="post". However, what I want to do is to send data through jQuery's post(). This is my JS:
$('form').find(':submit').click();
if ($('form')[0].checkValidity()) {
$.post('/post', js);
}
Here, js is simply a javascript object. I have tried removing the click() and even the checkValidity() parts; that helps with the reloading of the page, but I still cannot download myFile.txt.
Can anyone shed some light?
Thanks
I'm using https://github.com/LearnBoost/tobi, a browser simulator, to test an external web app. I'd like to be able to see the response body returned in the callback.
I understand the normal way node.js server-side apps show body is via res.on('data'), but my understanding is that inside the toby browser callback the response is now complete. Yet I can't find a res.body, res.data, or anything similar. Nor can I find docs on the topic!
function(error, response, $){
// Headers are there
console.log(response.headers;
// Horrible hack to show body via jquery as response.body and response.data are undefined
console.log($('body').html());
}
Per the above, I can see the document data via jQuery, so it's there. I just can't find it inside response...
I think your jQuery usage is the intended way to use tobi. It consumes the response and gives you a $ to manipulate or examine it.