Ajax request to upload image and save in server

Question

I am trying to save an image in server location following is my HTML code:

HTML code:

<form>
 <input type="file" accept="image/*"/>
</form>

Javascript

        var file    = document.querySelector('input[type=file]').files[0];
        var reader  = new FileReader();
        if (file) {
            reader.readAsDataURL(file);
        }
        reader.addEventListener("load", function () {
            $.ajax({
                type: 'POST',
                url: 'http://localhost/MyProject/src/images',
                data: {filename: file.filename, data: file.data},
                succes: function(response){
                    alert(response.responseText);
                },
                error: function(error) {
                    alert(error.responseText);
                }
            });
        }, false);

The success method of ajax is being called but on debugging I found that file.data is undefined. What variable should be used instead of file.data ?I need the uploaded image to be saved in my server

EDIT

I followed the answer in the mentioned duplicate question here is the new code

HTML:

<form id='uploadForm' enctype="multipart/form-data">
    <input name="file" type="file" id="fileName" />                 
    <button ng-click="signIn()">Upload</button>
</form>

Javascript:

var fileInput = document.getElementById('fileName');
        var file = fileInput.files[0];
        var form = document.getElementById('uploadForm');
        var formdata = new FormData(form);
        formdata.append('file', file)
            //Save image in serverBase
                $.ajax({
                    type: 'POST',
                    url: 'http://localhost/MyProject/src/images',
                    // Form data
                    data: formdata,
                    // Tell jQuery not to process data or worry about content-type
                    // You *must* include these options!
                    cache: false,
                    contentType: false,
                    processData: false,
                    success: function(response){
                        alert(response);
                    },
                    error: function(error) {
                        alert(error.responseText);
                    }
                });         

Using the above code my image is not getting saved in the mentioned 'http://localhost/MyProject/src/images' directory , although the ajax call is successful but the alert I get in response is some HTML code .Not sure whats happening. Any idea?

EDIT

On browsing some of the questions like this How to store uploaded file into server path using either javascript or jquery

It seems javascript being a client side scripting language isnt enough to store image on server path. I am using firebase for communicating with database . Do I have to include some other language too just to save data on my server?Does firebase have provisions to help me with the same?