Upload file using knockout-file-bind

Question

I am trying to send a multipart form consist of text and file type using knockoutjs. There is an error regarding data-bind file.

Here's my formView:

<div class="form-horizontal">
     <div class="form-group">
           <div class="col-md-12">
            <label class="control-label">Supplier</label>
            <input type="text" name="Supplier" id="Supplier" data-bind="value: Supplier" class="form-control col-md-8 form-control-sm" required />
           </div>
      </div>
      
      <div class="form-group">
           <div class="col-md-12">
             <label class="control-label">Picture</label>
              <input type="file" name="fileInput" id="fileInput" data-bind="file: {data: fileInput, reader: someReader}" class="form-control" />
           </div>
      </div>
</div>

@section scripts {
    <script src="~/Scripts/SDSScripts/RegisterSdsView.js"></script>
}

ViewModel:

function RegisterSdsView() {
    var self = this;
    self.Supplier = ko.observable();
    self.fileInput = ko.observable();
    someReader =  new FileReader();

    self.RegisterSds = function () {
        if (self.errors().length > 0) {
            self.errors.showAllMessages();
            return;
        }
        var Supplier = self.Supplier();
        var fileInput = self.fileInput();
        $.ajax({
            url: '/SdsView/RegisterSds',
            cache: false,
            type: 'POST',
            data: {Supplier, fileInput},
            success: function (data) {
                //some code
            },
            error: function (data) {
               //some code
            }
        });
   }
}

ko.applyBindings(new RegisterSdsView());

Controller:

public ActionResult RegisterSds(string Supplier, HttpPostedFileBase fileInput)
        {
            var db = new SDSDatabaseEntities();
            if (fileInput.ContentLength > 0)
            {

                string fileName = Path.GetFileNameWithoutExtension(fileInput.FileName);
                string fileExtension = Path.GetExtension(fileInput.FileName);
                string path = Path.Combine(Server.MapPath("~/UploadedFiles"), fileName);
                fileInput.SaveAs(path);

                var doc = new SDSDocument()
                {
                    DocName = fileName,
                    DocType = fileExtension,
                    DocPath = path
                };
                db.SDSDocuments.Add(doc);
            }
            db.SaveChanges();
            var result = new { status = "OK" };
            return Json(result, JsonRequestBehavior.AllowGet);
        }

The problem is the fileInput(viewModel) return null to my controller(HttpPostedFileBase fileInput).

Am I doing these the right way? This is actually my very first C# .NET project. I can't seem to find a good example related to knockoutjs file data-bind. Basically how to POST Based64 to controller?

Here the api that I use https://github.com/TooManyBees/knockoutjs-file-binding

Answer 1

Well I solved it. I gonna update it here just in case. Basically I just have to POST Base64 string to controller via FormData. I don't know why my previous method cannot send large string value, maybe there are limitation on POST method or browser on how large you can send a data via AJAX.

Here is the reference https://stackoverflow.com/a/46864228/13955999