Looking for a good example on File upload with asp.net mvc3 & knockout.js

Question

I am trying to look for a good comprehensive example of multiple file upload with asp.net mvc3 & knockout.js. I been looking around but nothing that shows the solution from start to finish! There examples that show what the knockout binding needs to be, but doesn't show how to read the files in the "Controller". Goal is upload and save files to db. Example of saving to a AWS S3 storage is a plus. Please help.

ko binding:

<input type="file" data-bind="value: fileToUpload, fileUpload: fileToUpload, url : 'Client/Upload' " /> 

ko.bindingHandlers.fileUpload = {
     update: function (element, valueAccessor, allBindingsAccessor) {
            var value = ko.utils.unwrapObservable(valueAccessor())
            if (element.files.length && value) {
                var file = element.files[0];
                var url = allBindingsAccessor().url


xhr = new XMLHttpRequest();
            xhr.open("post", url, true);
            xhr.setRequestHeader("Content-Type", "image/jpeg");
            xhr.setRequestHeader("X-File-Name", file.name);
            xhr.setRequestHeader("X-File-Size", file.size);
            xhr.setRequestHeader("X-File-Type", file.type);
            console.log("sending")
            // Send the file (doh)
            xhr.send(file);
        }
    }
}



[HttpPost]
        public ActionResult Upload()
        {
           //Not sure what to do here.
        }

Also need to do multiple file upload? Not sure how to set the viewmodels.

edited the sample code i am using right now. – jmogera Mar 04 '13 at 16:23 — jmogera, Mar 04 '13 at 16:23

score 2 · Answer 1 · edited May 23 '17 at 12:13

On the javascript side I would suggest using fineuploader http://fineuploader.com/. you can create a custom binding for updating the viewmodel with the response.

<div data-bind="fileupload: viewModel.fileName"></div>

ko.bindingHandlers.fileUpload = {
 init: function (element, valueAccessor) {
       var $element = $(element);
       var fileNameVal = valueAccessor;
       var uploader = new qq.FineUploader({
          element: $element[0],
          request: {
            endpoint: 'server/your_upload_service'
          },
           multiple: true,
           validation: {
              allowedExtensions: ['jpeg', 'jpg', 'txt']
           },
          callbacks: {
             onComplete: function(id, fileName, responseJSON) {
                 if (responseJSON.success) {
                   // update your value
                   valueAccessor(fileName)
                   //may need to change this if you pass a reference back 
                   // in your responseJSON such as an s3 key
                }
             }
          }
       });
    }
};

as for the server side I am not familiar with ASP.net but you should be able to interact with the request data on your endpoint and extract the multipart encoded form parts that contain the image data.

might want to look at these answers

MVC 3 file upload and model binding

File Upload ASP.NET MVC 3.0

also note that fineuploader sends the file in the request with the key "qqfile"

http://fineuploader.com/ looks like a great tool, but I am looking for free version. I didn't see a trial version either. — jmogera, Mar 05 '13 at 15:15
you can just build it yourself https://github.com/valums/file-uploader/ it is MIT License. The fee is just a one time $15 to support the people maintaining the project. — BillPull, Mar 05 '13 at 17:50
I see thank. So i added the binding you suggested, but doesn't seem to work. here is link to the test project that I am working with. Can you please me look at it. http://sdrv.ms/WMJpSd — jmogera, Mar 05 '13 at 19:13
can you tell me where you implemented the binding in your project or maybe make a demo in a jsfiddle. — BillPull, Mar 05 '13 at 19:46
Sorry I was not able to look through your code but here is a similar answer that might help http://stackoverflow.com/questions/9882692/valums-file-uploader-doesnt-work-under-internet-explorer-9 — BillPull, Mar 08 '13 at 16:15

Looking for a good example on File upload with asp.net mvc3 & knockout.js

1 Answers1