Drag & Drop upload file validation JQuery

Question

I am able to drag and drop a file and then send the data to a server side Application via RESTful interface.

But, I want to validate the file on the client side before the data goes all the way...

I know there are something called .accept for the droppeable but I couldn't make it work.

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

here my code:

<script>
    $(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 > 0 && files.length <2) {
            fileNames += "Uploading <br/>"
            for (var i = 0; i < files.length; i++) {
                fileNames += files[i].name + "<br />";
            }
        }


        $("#fileBasket").html(fileNames)

        var data = new FormData();
        for (var i = 0; i < 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();
            }
        });
    });

</script>

Answer 1

Note

$("#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();
});

could be

$("#fileBasket").on("drop dragenter dragover", function(evt) {
  evt.preventDefault();
  evt.stopPropagation();
});

Try the use of a regular expression to trim everything before final dot

var extension = filename.replace(/^.*\./, '');