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

data:fr.readAsDataURL(file), extra comma is there, may b it will be an issue — Ravi Gadag
– Ravi Gadag, Commented Sep 20, 2013 at 9:47

s.matushonok · Accepted Answer · 2013-09-20 10:13:29Z

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

Collectives™ on Stack Overflow

File data null in File uploading using REST

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related