send callback from nodejs backend to frontend

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";
        });
  };

First check your routes. You have /upload in the form and nodejs and /uploads in Angularjs. Second, you should submit the form through angular and not through regular html/action. You bind the message to the $scope and updated it after you receive 200 ok from the server. Check here link for submitting forms. — Bob
– Bob, Commented Feb 20, 2017 at 15:56

online Thomas · Accepted Answer · 2017-02-20 15:11:08Z

2

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:

edited Feb 20, 2017 at 15:11

answered Aug 29, 2016 at 14:56

online Thomas

9,4887 gold badges52 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

nolags Over a year ago

I would like to have an output if the upload worked. So when I understand you right I have to do this in the Frontend, but I would like to do it with angularJS so I start with $http.post('upload', function(... ? Is that right? How do I go on to get the output in <span>{{message}}</span>

nolags Over a year ago

tried something with angularjs but it didn't work. Edited it above.

online Thomas Over a year ago

@nolags then you might want to look at this Q&A stackoverflow.com/questions/13671031/…

nolags Over a year ago

this isn't what I'm looking for I think. I want to show if the file was uploaded to the server and I want to tell the frontend and show it in the <span>{{message}}</span> can you tell me what is wrong with my code?

online Thomas Over a year ago

The way you think the browser would still have to wait for a request to be send from the server. This can be done with websockets, however I would just ask for the answer every x seconds because it's easier to implement and websockets are overkill for what you want. Comet is an ugly solution as mentioned on the wiki so xhr is the best option that suits your needs.

|

Collectives™ on Stack Overflow

send callback from nodejs backend to frontend

1 Answer 1

12 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

12 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related