<style>
#prompt-form {
  display: inline-block;
  padding: 5px 5px 5px 70px;
  width: 200px;
  border: 1px solid black;
  background: white ;
  vertical-align: middle;
}

#prompt-form-container {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  display: none;
  width: 100%;
  height: 100%;
  text-align: center;
}

#prompt-form-container:before {
  display: inline-block;
  height: 100%;
  content: '';
  vertical-align: middle;
}

#cover-div {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9000;
  width: 100%;
  height: 100%;
  background-color: gray;
  opacity: 0.3;
}

#prompt-form input[name="text"] {
  display: block;
  margin: 5px;
  width: 180px;
}
</style>

<?
function show_btn_addfile(){
  echo "<input type='button' value='Add file' id='show-button' onclick='btn_onclick();' />";

}
?>
    

<div id="prompt-form-container">
  <form id="prompt-form"  method="post" enctype="multipart/form-data">>
    <div id="prompt-message"></div>
    <input type="hidden"   name="text"  />
    <input type="file"   name="file_upload"  />
    <input type="submit" name='Upload' value="Upload" />
    <input type="button" name="cancel" value="Cancel" />
  </form>
</div>

<script>
function process_form_file(value){
   if(value) {
     //alert('You entered: ' + value);
    let form = document.getElementById('prompt-form');
    form.submit();
   }   
}

function btn_onclick() {
    showPrompt('Enter something<br>...smart :)', function(value) {
      process_form_file(value);
    });
  };

  // Show a half-transparent DIV to "shadow" the page
  // (the form is not inside, but near it, because it shouldn't be half-transparent)
  function showCover() {
    let coverDiv = document.createElement('div');
    coverDiv.id = 'cover-div';

    // make the page unscrollable while the modal form is open
    document.body.style.overflowY = 'hidden';

    document.body.append(coverDiv);
  }

  function hideCover() {
    document.getElementById('cover-div').remove();
    document.body.style.overflowY = '';
  }

  function showPrompt(text, callback) {
    showCover();
    let form = document.getElementById('prompt-form');
    let container = document.getElementById('prompt-form-container');
    document.getElementById('prompt-message').innerHTML = text;
    //form.text.value = 'ฟฟฟ';

    function complete(value) {
      hideCover();
      container.style.display = 'none';
      document.onkeydown = null;
      callback(value);
    }

    form.onsubmit = function() {
      let value = form.file_upload.value;
      if (value == '') return false; // ignore empty submit

      complete(value);
      return false;
    };

    form.cancel.onclick = function() {
      complete(null);
    };

    document.onkeydown = function(e) {
      if (e.key == 'Escape') {
        complete(null);
      }
    };

    let lastElem = form.elements[form.elements.length - 1];
    let firstElem = form.elements[0];

    lastElem.onkeydown = function(e) {
      if (e.key == 'Tab' && !e.shiftKey) {
        firstElem.focus();
        return false;
      }
    };

    firstElem.onkeydown = function(e) {
      if (e.key == 'Tab' && e.shiftKey) {
        lastElem.focus();
        return false;
      }
    };

    container.style.display = 'block';
    form.elements.text.focus();
  }

</script>