title: Drag and drop file upload (knockout + webapi + asp.net)
body: <p>I am looking for Drag And Drop File Upload component, using Knockout + .NET WebApi technologies.</p>
  
  <p>I have found File Api project, it doesn't support old browsers, but I can live with it. The code is here: <a href="https://github.com/khayrov/khayrov.github.com/tree/master/jsfiddle/knockout-fileapi" rel="nofollow">https://github.com/khayrov/khayrov.github.com/tree/master/jsfiddle/knockout-fileapi</a>.</p>
  
  <p>It creates custom Knockout Bindings, some code parts:</p>
  
  <p>HTML:</p>
  
  <pre><code> &lt;input type="file" accept="image/*" data-bind="file: imageFile, fileObjectURL: imageObjectURL, fileBinaryData: imageBinary"/&gt;
  </code></pre>
  
  <p>Knockout JS:</p>
  
  <pre><code>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);
              }
          }
      }
  </code></pre>
  
  <p>Unfourtunately I do not understand if I can reuse this code and integrated it within some Drag And Drop File upload component?</p>
  
  <p>Is there any existing DnD file upload component that can be used with knockout + webapi?</p>