Файл перетаскивания MVC на тег для вставки

Question

Я пытаюсь сделать мой тег для вставки зоной сброса. В тот момент, когда я перетаскиваю файл в тег для встраивания, я хочу изменить его на желтый. Но это не работает. Я хочу, чтобы он работал так же, как в Gmail, где у вас есть текстовый раздел, и вы можете перетаскивать на него файлы.

Я использую плагин jquery.filedrop.

Вот что у меня есть:

$(function() {
  $("#dropSection").filedrop({
    fallback_id: 'btnUpload',
    fallback_dropzoneClick: true,
    url: '@Url.Action("Upload")',
    //allowedfiletypes: ['image/jpeg', 'image/png', 'image/gif', 'application/pdf', 'application/doc'],
    allowedfileextensions: ['.doc', '.docx', '.pdf', '.jpg', '.jpeg', '.png', '.gif'],
    paramname: 'fileData',
    maxfiles: 5, //Maximum Number of Files allowed at a time.
    maxfilesize: 2, //Maximum File Size in MB.
    dragOver: function() {
      $('#dropSection').addClass('active');
    },
    dragLeave: function() {
      $('#dropSection').removeClass('active');
    },
    drop: function() {
      $('#dropSection').removeClass('active');
    },
    uploadFinished: function(i, file, response, time) {
      $('#uploadedFiles').append(file.name + '<br />')
    },
    afterAll: function(e) {
      //To do some task after all uploads done.
    }
  })
})

body {
  font-family: Arial;
  font-size: 10pt;
}

#dropSection {
  height: 300px;
  width: 600px;
  background-color: skyblue;
}

#btnUpload {
  display: none;
}

.active {
  background-color: yellow !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://rawgit.com/weixiyen/jquery-filedrop/master/jquery.filedrop.js"></script>

<div id="dropSection">
  <embed id="pdf" style="width:100%; height:600px;" src="~/Uploads/mypdf.pdf" />
</div>
<br />
Uploaded Files:
<hr />
<div id="uploadedFiles"></div>
<input type="button" id="btnUpload" value="Upload" />

Я что-то упустил? Любая помощь будет оценена.