Проблема с "перетаскиванием" значения файла в jquery

Question

У меня есть форма с областью перетаскивания и опциональной кнопкой «Выбрать файл».

<form method="post" action="upload.php" enctype="multipart/form-data" novalidate class="box">
(.....)
<input type="file" name="files" id="file" class="box__file" />
(.....)
</form>

Файл должен быть загружен с помощью ajax после проверки хеша md5.Выглядит это так:

    $( '.box' ).each( function()
            {
                var $form        = $( this ),
                    $input       = $form.find( 'input[type="file"]' ),
                    $label       = $form.find( 'label' ),
                    $errorMsg    = $form.find( '.box__error span' ),
                    $restart     = $form.find( '.box__restart' ),
                    droppedFiles = false,
                    showFiles    = function( files )
                    {
                        $label.text( files.length > 1 ? ( $input.attr( 'data-multiple-caption' ) || '' ).replace( '{count}', files.length ) : files[ 0 ].name );
                    };

                // letting the server side to know we are going to make an Ajax request
                $form.append( '<input type="hidden" name="ajax" value="1" />' );

                // automatically submit the form on file select
                $input.on( 'change', function( e )
                {
                    showFiles( e.target.files );                
                    $form.trigger( 'submit' );              
                });


                // drag&drop files if the feature is available
                if( isAdvancedUpload )
                {
                    $form
                    .addClass( 'has-advanced-upload' ) // letting the CSS part to know drag&drop is supported by the browser
                    .on( 'drag dragstart dragend dragover dragenter dragleave drop', function( e )
                    {
                        // preventing the unwanted behaviours
                        e.preventDefault();
                        e.stopPropagation();
                    })
                    .on( 'dragover dragenter', function() //
                    {
                        $form.addClass( 'is-dragover' );
                    })
                    .on( 'dragleave dragend drop', function()
                    {
                        $form.removeClass( 'is-dragover' );
                    })
                    .on( 'drop', function( e )
                    {
                        droppedFiles = e.originalEvent.dataTransfer.files; // the files that were dropped
                        $form.trigger( 'submit' ); // automatically submit the form on file drop
                    });
                }


// if the form was submitted
$form.on( 'submit', function( e ) {
// preventing the duplicate submissions if the current one is in progress
if( $form.hasClass( 'is-uploading' ) ) return false;
$form.addClass( 'is-uploading' ).removeClass( 'is-error' );

    if( isAdvancedUpload ) {                        
      var ajaxData = new FormData( $form.get( 0 ) );                                    
      var input = document.getElementById('file'); // <<<< PROBLEM
      if (!input.files.length) {  return;  }
      var file = input.files[0];
      var bufferSize = Math.pow(1024, 2) * 50;  
      calculateMD5Hash(file, bufferSize).then((result) => {
        if(result) { ....... 

Если я загружаю с помощью кнопки «Выбрать файл», он отлично работает .

Но функция перетаскивания проходит через .on ('drop', function (e)), запускает кнопку отправки, как и должна, но затем останавливается на

var input = document.getElementById('file');
if (!input.files.length) {  return;  }

, потому чтодоступ к файлу невозможен. Поэтому мне может понадобиться как-то перенести удаленный файл с функцией on drop в поле ввода, чтобы получить к нему доступ. Можете ли вы мне помочь ??