whmcsDNSManager/modules/addons/DNSManager2/templates/admin/pages/tools/modal/add-backupFile.tpl

<div class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">{$MGLANG->T('close')}</span></button>
                <h4 class="modal-title">{$MGLANG->T('addBackupFile')}</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" role="form">
                    <div class="form-group">
                        <label for="a1" class="col-sm-3 control-label">{$MGLANG->T('chooseFileToUpload')}</label>
                        <div class="col-sm-9">
                            <div class="fileUpload btn btn btn-info btn-inverse"> 
                                {$MGLANG->T('selectFile')} 
                                <input type="file" class="upload" name="fileName" id="a1" required onChange="prepareUpload(event);"/>
                            </div> 
                        </div>                      
                    </div>
                    <div class="form-group" name="selectedFileInfo" style="display:none">
                        <label class="col-sm-3 control-label">{$MGLANG->T('selectedFileToUpload')}</label>
                        <div class="col-sm-3">
                            <label name="selectedFile" class="col-sm-3 control-label"></label>
                        </div>                      
                    </div>                                
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default btn-inverse" data-dismiss="modal">{$MGLANG->T('close')}</button>
                <button type="button" class="btn btn-primary btn-inverse" data-act="uploadBackupFile">{$MGLANG->T('upload')}</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->  
<style>
    .fileUpload {
        position: relative;
        overflow: hidden;
        margin: 10px;
    }
    .fileUpload input.upload {
        position: absolute;
        top: 0;
        right: 0;
        margin: 0;
        padding: 0;
        font-size: 20px;
        cursor: pointer;
        opacity: 0;
        filter: alpha(opacity=0);
    }
</style>
<script data-cfasync="false" type="text/javascript">
    function prepareUpload(event)
    {
        filesToUpload = event.target.files;
        input = jQuery('input[name="fileName"]');
        nameArray = input.val().split("\\");
        fileName  = nameArray[nameArray.length - 1];
        jQuery('label[name="selectedFile"]').html(fileName);
        jQuery('div[name="selectedFileInfo"]').show();
    }
</script>