Drag & drop file to pass its name to controller.. NO UPLOAD

See more:

C#

ASP.NET

Javascript

MVC

I am trying to drag and drop a .pdf file and then pass its name as a parameter to controller. I don't want to save the file in any directory.
I have the drop area and the list group to show file name:

<h2>Drag & Drop your file</h2>
<div id="dropArea">
    Drop your file here
</div>
<h4>Dropped files : </h4>
<ul class="list-group" id="uploadList"></ul>

What I have tried:

<script type="text/javascript">
        $(document).ready(function () {
            alert("Hi");
            $("#dropArea").on("dragover", function (event) {
                event.preventDefault();
                event.stopPropagation();
                $(this).addClass('active-drop');
            });
            $("#dropArea").on("dragleave", function (event) {
                event.preventDefault();
                event.stopPropagation();
                $(this).removeClass('active-drop');
            });
            $("#dropArea").on("drop", function (event) {
                event.preventDefault();
                $.ajax({
                    type: "POST",
                    url: "Home/Index",
                    contentType: "application/json; charset=utf-8",

                    data: { // How do I pass the file's name to pass it here?? },

                    dataType: "json",
                    success: function (result) {
                        alert('Worked!');
                    },
                    error: function (result) {
                        alert("Didn't work");
                    }
                });
   $('#uploadList').append('<li class="list-group-item">' + /*fileName*/ + '</li>')
                alert("Dropped!");
            });
        });
</script>

FIRST: dragover and dragleave are not triggered.
SECOND: How to pass file name in data section of ajax?