Перетащите файл, чтобы передать его имя контроллеру.. НЕ МОГЛА ЗАГРУЗИТЬ

---

Я пытаюсь перетащить файл .pdf, а затем передать его имя в качестве параметра контроллеру. Я не хочу сохранять файл ни в одном каталоге.
У меня есть область выпадения и группа списков для отображения имени файла:

<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>

Что я уже пробовал:

<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>

ПЕРВЫЙ: dragover и dragleave не срабатывают.
ВТОРОЙ: Как передать имя файла в data раздел "Аякса"?

---