как создать прогрессбар при загрузке файла перетаскиванием

Для загрузки файлов у меня есть индикатор выполнения, который прекрасно работает с формой.
Это моя форма:

 <form class="sfmform" action="" method="post" enctype="multipart/form-data">
<input type="file" name="file" id="file" />
<br />
<input type="submit" class="Button Primary" name="upload" value="Upload" />

</form>

и это js, который генерирует индикатор выполнения:

 /* progression upload status in %*/

var bar = $('.bar');
var percent = $('.percent');
var status = $('#status');

$('.sfmform').ajaxForm({
beforeSend: function() {
status.empty();
var percentVal = '0%';
bar.width(percentVal)
percent.html(percentVal);
},
uploadProgress: function(event, position, total, percentComplete) {
var percentVal = percentComplete + '%';
bar.width(percentVal)
percent.html(percentVal);
},
success: function(data) {

var percentVal = '100%';
bar.width(percentVal)
percent.html(percentVal);
status.html(data);
},
complete: function(data) {

var percentVal = '0%';
bar.width(percentVal)
percent.html(percentVal);
status.html(data);
},});

Теперь я также использую перетаскивание div для загрузки файлов. Это div для перетаскивания:

<div class="sfmform" id="drop-area"><h3 class="drop-text">Drag and Drop Files Here</h3></div>

Как я могу вызвать тот же индикатор выполнения, когда файл загружен с помощью перетаскивания?