title: Drag & Drop upload file validation JQuery
body: <p>I am able to drag and drop a file and then send the data to a server side Application via RESTful interface.</p>
  
  <p>But, I want to validate the file on the client side before the data goes all the way...</p>
  
  <p>I know there are something called <code>.accept</code> for the droppeable but I couldn't make it work.</p>
  
  <p>I'll be happy if only could check if the file has a .CSV extension, but I could also touch the sky if I could check if the file is a real .CSV file </p>
  
  <p>here my code:</p>
  
  <pre><code>&lt;script&gt;
      $(document).ready(function () {
  
          $("#progress").hide();
  
          $("#fileBasket").on("dragenter", function (evt) {
              evt.preventDefault();
              evt.stopPropagation();
          });
  
          $("#fileBasket").on("dragover", function (evt) {
              evt.preventDefault();
              evt.stopPropagation();
          });
  
          $("#fileBasket").on("drop", function (evt) {
              evt.preventDefault();
              evt.stopPropagation();
  
              });
      });
  
      $("#fileBasket").on("drop", function (evt) {
          evt.preventDefault();
          evt.stopPropagation();
          var files = evt.originalEvent.dataTransfer.files;
          var fileNames = "";
  
          if (files.length &gt; 0 &amp;&amp; files.length &lt;2) {
              fileNames += "Uploading &lt;br/&gt;"
              for (var i = 0; i &lt; files.length; i++) {
                  fileNames += files[i].name + "&lt;br /&gt;";
              }
          }
  
  
          $("#fileBasket").html(fileNames)
  
          var data = new FormData();
          for (var i = 0; i &lt; files.length; i++) {
              data.append(files[i].name, files[i]);
          }
  
  
  
          $.ajax({
              type: "POST",
              url: "http://localhost:25516/api/Sales/uploadFile",
              contentType: false,
              processData: false,
              data: data,
              success: function (message) {
                  $("#fileBasket").html(message);
              },
              error: function () {
                  $("#fileBasket").html("There was error uploading files!");
              },
              beforeSend: function () {
                  $("#progress").show();
              },
              complete: function () {
                  $("#progress").hide();
              }
          });
      });
  
  &lt;/script&gt;
  </code></pre>