Upload file using knockout-file-bind - asp.net

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