Pass drag and drop file data to input value

Question

I am trying to pass the file to input value after drop. I have tried using set attribute, prop but there is no value can be found in the request. Click and select file is able to work. The label text content able to show the file name when drop.

Form Input

<input type="file" name="files" id="file" class="box__file"/>

JS

            var input        = form.querySelector( 'input[type="file"]' ),
            label        = form.querySelector( 'label' ),
            showFiles    = function( files )
            {
                label.textContent = files[ 0 ].name;
                input.setAttribute( 'value', files  );
            };

                 form.addEventListener( 'drop', function( e )
                    {
                        droppedFiles = e.dataTransfer.files; // the files that were dropped
    
                        showFiles( droppedFiles );

                });