title: how to upload image and save it in database using knockout js?
body: <p>hey m using mvc3 with knockout and trying to use knockout binding to upload and save uploaded image in database. i am able to browse and get the image but not getting as how to save that image.
  my html view is:</p>
  
  <pre><code>&lt;div data-bind="foreach: { data: images, beforeRemove: beforeRemoveSlot }"&gt;
          &lt;div&gt;
              &lt;input type="file" accept="image/*" data-bind="file: imageFile, fileObjectURL: imageObjectURL, fileBinaryData: imageBinary"/&gt;
              &lt;div data-bind="if: imageObjectURL"&gt;
                  &lt;img class="thumb" data-bind="attr: { src: imageObjectURL }"/&gt;
              &lt;/div&gt;
              &lt;div&gt;Size: &lt;span data-bind="text: fileSize"&gt;&lt;/span&gt;&amp;nbsp;bytes&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
          &lt;input type="submit" value="Upload Picture" data-bind="click: upload" /&gt;
  </code></pre>
  
  <p>my view model is:</p>
  
  <pre><code>var windowURL = window.URL || window.webkitURL;
  
  ko.bindingHandlers.file = {
      init: function (element, valueAccessor) {
          $(element).change(function () {
              var file = this.files[0];
              if (ko.isObservable(valueAccessor())) {
                  valueAccessor()(file);
              }
          });
      },
  
      update: function (element, valueAccessor, allBindingsAccessor) {
          var file = ko.utils.unwrapObservable(valueAccessor());
          var bindings = allBindingsAccessor();
  
          if (bindings.fileObjectURL &amp;&amp; ko.isObservable(bindings.fileObjectURL)) {
              var oldUrl = bindings.fileObjectURL();
              if (oldUrl) {
                  windowURL.revokeObjectURL(oldUrl);
              }
              bindings.fileObjectURL(file &amp;&amp; windowURL.createObjectURL(file));
          }
  
          if (bindings.fileBinaryData &amp;&amp; ko.isObservable(bindings.fileBinaryData)) {
              if (!file) {
                  bindings.fileBinaryData(null);
              } else {
                  var reader = new FileReader();
                  reader.onload = function (e) {
                      bindings.fileBinaryData(e.target.result);
                  };
                  reader.readAsArrayBuffer(file);
              }
          }
      }
  };
  
  var imageUploadModel = function () {
      var self = {};
  
      var slotModel = function () {
          var that = {};
  
          that.imageFile = ko.observable();
          that.imageObjectURL = ko.observable();
          that.imageBinary = ko.observable();
  
          that.fileSize = ko.computed(function () {
              var file = this.imageFile();
              return file ? file.size : 0;
          }, that);
  
          that.firstBytes = ko.computed(function () {
              if (that.imageBinary()) {
                  var buf = new Uint8Array(that.imageBinary());
                  var bytes = [];
                  for (var i = 0; i &lt; Math.min(10, buf.length); ++i) {
                      bytes.push(buf[i]);
                  }
                  return '[' + bytes.join(', ') + ']';
              } else {
                  return '';
              }
          }, that);
  
          return that;
      };
  
      self.beforeRemoveSlot = function (element, index, data) {
          if (data.imageObjectURL()) {
              windowURL.revokeObjectURL(data.imageObjectURL());
          }
          $(element).remove();
      };
  
      self.images = ko.observableArray([slotModel()]);
  
      self.addSlot = function () {
          self.images.push(slotModel());
      };
  
      self.removeSlot = function (data) {
          self.images.remove(data);
      };
  
      return self;
  } ();
  
  imageUploadModel.upload = function () {
  
  }
  
  $(document).ready(function () {
      ko.applyBindings(imageUploadModel);
  });
  </code></pre>
  
  <p>can anybody suggest me how can i save image on upload button click?????</p>