File data null in File uploading using REST

Question

And i have the following code

self.upload = function (file) {
            var path = $('#fileUpload').val();
           var fr= new FileReader();
            var ID = JSON.stringify({
               ID:23,
               Name: file.name,
               Type: file.type,
               Size: file.size,
               Path: path,
               data:fr.readAsDataURL(file),


            });

            $.ajax({
                cache: false,
                url: "http://localhost:49589/api/files",
                type: "POST",
                dataType: "json",
                data: ID,
                contentType: "application/json; charset=utf-8",
                processData: false,
                success: function (json) {
                            alert("Data Returned: " + JSON.stringify(json));
                        },
                error: function (json) {
                alert("error" + JSON.stringify(json));
            }

            });

im performing file upload . and my controller is

[HttpPost]
        public string upload(filesUpload f)
        {

            byte[] jj = f.data; // **getting null here** 
            string givenId = f.Path;
            return givenId;

        }

when i execute this and upload a file im getting null file data . where filesUpload is my model

what went wrong in my code . Im using Knockout.js for viwe and drundal SPA framework

is there any other way to do . kindly help me

Answer 1

FileReader.readAsDataURL reads the file asyncronically and return nothing. You should at first start read the file, then catch fr.onload event and from here create your json object and call ajax.

upd: The code will look like this:

    self.upload = function (file) {
               var path = $('#fileUpload').val();
               var fr= new FileReader();
               fr.onload = function (frEvent) {
                     var ID = JSON.stringify({
                     ID:23,
                     Name: file.name,
                     Type: file.type,
                     Size: file.size,
                     Path: path,
                     data:frEvent.target.result,
                    });

                    $.ajax({
                      cache: false,
                      url: "http://localhost:49589/api/files",
                      type: "POST",
                      dataType: "json",
                      data: ID,
                      contentType: "application/json; charset=utf-8",
                      processData: false,
                      success: function (json) {
                                alert("Data Returned: " + JSON.stringify(json));
                            },
                      error: function (json) {
                       alert("error" + JSON.stringify(json));
                      }
                    });
                   };
                 fr.readAsDataURL(file);
            };