how to make upload progessbar possible for drag and drop uploads

Question

For uploading files, i use a uploadprogressbar related to this article: File upload progress bar with jQuery. This works fine. This is my js:

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);
},


});

And this is my form with on top the drag and drop area:

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


    <form class="sfmform" action="" method="post" enctype="multipart/form-data">

     <b>or...</b>
     <br /><br />
        <input type="file" name="file" id="file" />
        <br />
        <input type="submit" class="Button Primary" name="upload" value="Upload" />
        <br /><br />

    </form>

The uploadprogressbar works fine when uploading via the form. How can i make this also possible for the drag and drop area?