send callback from nodejs backend to frontend - html

Question

I have got a fileUpload (made with NodeJS) and i want to show the success of the upload in the html in the {{upload.message}}. I implemented it with AngularJS but it didn't work. What am I doing wrong?
HTML
<form enctype="multipart/form-data" action="/upload"
method="POST">
<div class="form-group">
<input type="file" name="file" />
<p></p>
<input type="file" name="file" />
<p></p>
<input type="file" name="file" />
<br> <br>
<input type="submit" value="Upload File" name="submit"
class="btn btn-primary">
</form>
<span>{{upload.message}}</span>
</div>
NodeJS
router.post('/upload', function(req,res){
upload(req,res,function(err) {
var fileNames = [];
req.files.forEach(function(element){
fileNames.push(element.filename);
})
console.log('Selected Files: ', fileNames);
if(err){
res.end("Error: '" , err , "'");
}else{
res.sendStatus(204);
}
});
});
AngularJS
var self = this;
this.message = "";
this.upload= function(){
$http.post('/uploads')
.then(function success(result){
self.message = "Upload worked";
},
function error(response){
self.message = "Error upload failed";
});
};

Answer 1

edit: You should read this book: http://www.allitebooks.com/read/index.php?id=7630
You normally make a request from browser to the server and not the other way around. I suggest using Ajax with polling. If you insist on sending a request from the server to the browser you could use Comet (but I do not recommend that solution).
With jQuery (altough not mentioned in your question), you would write something like this to poll every x seconds:
function doPoll() {
$.ajax({
url: "/uploads",
type: "POST",
data: {
//Set an empty response to see the error
xml: "<response></response>"
},
dataType: "text xml",
success: function(xml, textStatus, xhr) {
if (xhr.status == "200") {
//do the thing you wanted to do on succes
}
},
complete: function(xhr, textStatus) {
console.log(xhr.status);
}
});
setTimeout(doPoll,5000);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
P.S. Totally forgot about sockets I also like that solution, but beware sockets are not REST like HTTP.
You should think of it like this: a browser is meant to make stateless
requests, not to keep open a connection, however with commet or
websockets it's possible. With polling which I would recommend you ask
the server a lot of times for the info until you get the desired
response.
From the wiki about Comet:
None of the above streaming transports work across all modern browsers
without negative side-effects. This forces Comet developers to
implement several complex streaming transports, switching between them
depending on the browser. Consequently, many Comet applications use
long polling, which is easier to implement on the browser side, and
works, at minimum, in every browser that supports XHR. As the name
suggests, long polling requires the client to poll the server for an
event (or set of events). The browser makes an Ajax-style request to
the server, which is kept open until the server has new data to send
to the browser, which is sent to the browser in a complete response.
The browser initiates a new long polling request in order to obtain
subsequent events. Specific technologies for accomplishing
long-polling include the following: