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>

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(); }); — Mark Schultheiss
– Mark Schultheiss, Commented Feb 11, 2018 at 7:41
Try the use of a regular expression to trim everything before final dot var extension = filename.replace(/^.*\./, ''); — Mark Schultheiss
– Mark Schultheiss, Commented Feb 11, 2018 at 8:01

Mark Schultheiss · Accepted Answer · 2018-02-11 15:06:40Z

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(/^.*\./, '');

answered Feb 11, 2018 at 15:06

Mark Schultheiss

34.3k13 gold badges75 silver badges116 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Drag & Drop upload file validation JQuery

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related