Fomantic-UI Sandbox

HTML

<script src="https://fomantic-ui.com/dist/semantic.js"></script>
<link rel="stylesheet" href="https://fomantic-ui.com/dist/semantic.css">
<div class="ui primary buttons">
  <div class="ui button">Add</div>
  <div class="ui floating dropdown icon button">
    <i class="dropdown icon"></i>
    <div class="menu">
      <div class="item" id="DocumentUpload"><i class="archive icon"></i> Upload 1</div>
      <div class="item" onclick="openDialog();"><i class="archive icon"></i> Upload 2</div>
      <div class="item" onclick="javascript:document.getElementById('fileToUpload').click();"><i class="archive icon"></i> Upload 3</div>
    </div>
  </div>
</div> 

<form method="post" style="display: none;" enctype="multipart/form-data">
  <label for="fileToUpload" id="fileToUpload2"></label>
  <input type="file" name="fileToUpload" id="fileToUpload" style="display: none;" onchange="this.form.submit();">
</form>

JavaScript

$('.ui.dropdown')
    .dropdown()
  ;

  document.getElementById('DocumentUpload').addEventListener('click', openDialog);
  
  function openDialog() {
    document.getElementById('fileToUpload2').click();
    alert("Triggered");
  }