I am creating a chat application using Node.js, and would like to have a file upload feature. While I can get the file uploaded, the browser would always be redirected to another link or page refreshed, and this of course disrupts the chat.
First I tried using Express to do it:
index.html:
<form id="fileSendButton" action="/" method="post" enctype="multipart/form-data">
<input type="text" name="title"><br>
<input type="file" name="upload" multiple="multiple"><br>
<input type="submit" value="Upload">
</form>
app.js:
app.post('/', function(req, res){
//some validation and rename file
res.send();
return false;
});
Next I tried using AJAX, but still couldnt do it, whenever the AJAX POST to the Node.js server, it would reload the page. My AJAX code anyway:
index.html:
$.ajax({
type: "POST",
url: "/",
data: formdata,
processData: false,
contentType: false,
success: function (res) {
document.getElementById("chatText").innerHTML = res;
}
});
return false;
Third I went to look at Uploadify, but didnt want to add Flash dependancy to my site, so I didnt implement it.
Anyone can help me please? I dont want a page reload when a file is uploaded.
You can do it with a dynamically created hidden frame on the client side.
see here for a detailed howto with expressjs.
Uploadify now has a pure HTML5 play.