Uploading image via AJAX without form

Question

I need to send Image using AJAX to my Node.js server.

I am pretty much confident how to handle things on the server side. I will get the image and do what I need to do with it, short example:

fs.readFile(req.files.image.path, function (err, data) {

    var imageName = req.files.image.name

What is the problem for me is the client (backbone.js). On client I have a Vehicle profile that has fields such as name, type, etc and also I have choose image button.

My idea is to let the user change image, and send that image to server (along with vehicle id). Then the server will save the image. In backbone model, I will only save image location and not the whole image.

I know I need to have a form that will accept image and some Ajax code. I was experimenting based on this

But with limited results. When I click submit button, I am being redirected from the current page. I just need the upload to perform silently.

AFter more investigation, do I need form at all? Can I not some how grab the value from the <input id='file-image' type='file'>

and simply send it via AJAX?

Answer 1

Have a look at jQuery File Upload . It is quite mature, well documented (it even seems to have some Node examples) and eases a lot of the pain points that come from cross-browser compatibility issues.