Click here to Skip to main content
15,885,767 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more: , +
Hi every one
I am working with knockout js. I want to upload an image to the folder and other data save to database.
This is html code
<form method="post" enctype="multipart/form-data">
<input type="text" id="txteno" data-bind="value: $root.PersonId" disabled="disabled" />
<input type="text" id="txtename" data-bind="value: $root.PersonName" />
<input type="file" id="file" data-bind="file: {data: Photo, name: PersonPhoto, reader: someReader} " />
button data-bind="click :$root.save">Save</button>
</form>
and javascript code
C#
var ViewModel = function () {

               var self = this;
               self.PersonId = ko.observable("0");
               self.PersonName = ko.observable("");
               self.PersonPhotourl = ko.observable("");
               self.Photo = ko.observable();
               someReader= new FileReader()

               var PerData = {
                   PersonId: self.PersonId,
                   PersonName: self.PersonName,
                   Photo: self.Photo,
               };

               self.save = function () {
                   //Ajax call to Insert the Employee
                   $.ajax({
                       type: "POST",
                        url: "/Person/FileUpload",                                               
                        data: ko.toJSON(PerData),
                        contentType: "application/json",
                        dataType: 'json',
                        //cache: false,
                        mimeType: "multipart/form-data",
                        //processData: false,
                       success: function () {
                           alert("successful");
                       },
                       error: function () {
                           alert("fail");
                       }
                   });
               };
           };
           var vm = new ViewModel();
           ko.applyBindings(vm);

and my action result
public ActionResult Upload(Person item, HttpPostedFileBase files)
{
//some code
}
My image not sending to controller
Thank you
Posted
Updated 1-Sep-15 21:15pm
v3
Comments
F-ES Sitecore 24-Jul-15 6:37am    
Use Fiddler or the network tools of your browser to see if a more exact error message is being returned. You have no provided enough information to say much more than that. However you won't be able to upload files that way. Google for "uploading files html5 fileapi jquery" for sample code.
Hi
I think you have rejected my answer by mistake. In that case, please accept it again.

Thanks,
Tadit
Member 11745984 5-Sep-15 13:57pm    
Hello
Thank you for your solution, by this,I can get image in view model. but I have a problem with posting image to my controller(sending null).Can we post an image to controller with other data?
thanks

1 solution

Refer - knockoutjs-file-binding[^].

You need a reader.
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900