<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
var
This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)