<!-- required files -->
<link href="../assets/plugins/blueimp-gallery/css/blueimp-gallery.min.css" rel="stylesheet" />
<link href="../assets/plugins/blueimp-file-upload/css/jquery.fileupload.css" rel="stylesheet" />
<link href="../assets/plugins/blueimp-file-upload/css/jquery.fileupload-ui.css" rel="stylesheet" />

<script src="../assets/plugins/blueimp-file-upload/js/vendor/jquery.ui.widget.js"></script>
<script src="../assets/plugins/blueimp-tmpl/js/tmpl.js"></script>
<script src="../assets/plugins/blueimp-load-image/js/load-image.all.min.js"></script>
<script src="../assets/plugins/blueimp-canvas-to-blob/js/canvas-to-blob.js"></script>
<script src="../assets/plugins/blueimp-gallery/js/jquery.blueimp-gallery.min.js"></script>
<script src="../assets/plugins/blueimp-file-upload/js/jquery.iframe-transport.js"></script>
<script src="../assets/plugins/blueimp-file-upload/js/jquery.fileupload.js"></script>
<script src="../assets/plugins/blueimp-file-upload/js/jquery.fileupload-process.js"></script>
<script src="../assets/plugins/blueimp-file-upload/js/jquery.fileupload-image.js"></script>
<script src="../assets/plugins/blueimp-file-upload/js/jquery.fileupload-audio.js"></script>
<script src="../assets/plugins/blueimp-file-upload/js/jquery.fileupload-video.js"></script>
<script src="../assets/plugins/blueimp-file-upload/js/jquery.fileupload-validate.js"></script>
<script src="../assets/plugins/blueimp-file-upload/js/jquery.fileupload-ui.js"></script>
<script src="../assets/js/demo/form-multiple-upload.demo.js"></script>

<!-- html -->
<form id="fileupload" action="../assets/global/plugins/jquery-file-upload/server/php/" method="POST" enctype="multipart/form-data">
  <div class="row fileupload-buttonbar">
    <div class="col-xl-7">
      <span class="btn btn-primary fileinput-button me-1">
        <i class="fa fa-fw fa-plus"></i>
        <span>Add files...</span>
        <input type="file" name="files[]" multiple>
      </span>
      <button type="submit" class="btn btn-primary start me-1">
        <i class="fa fa-fw fa-upload"></i>
        <span>Start upload</span>
      </button>
      <button type="reset" class="btn btn-default cancel me-1">
        <i class="fa fa-fw fa-ban"></i>
        <span>Cancel upload</span>
      </button>
      <button type="button" class="btn btn-default delete me-1">
        <i class="fa fa-fw fa-trash"></i>
        <span>Delete</span>
      </button>
      <!-- The global file processing state -->
      <span class="fileupload-process"></span>
    </div>
    <!-- The global progress state -->
    <div class="col-xl-5 fileupload-progress fade d-none d-xl-block">
      <!-- The global progress bar -->
      <div class="progress progress-striped active">
        <div class="progress-bar progress-bar-success" style="width:0%;"></div>
      </div>
      <!-- The extended global progress state -->
      <div class="progress-extended"> </div>
    </div>
  </div>
</form>

<!-- The template to display files available for upload -->
<script id="template-upload" type="text/x-tmpl">
  {% for (var i=0, file; file=o.files[i]; i++) { %}
    ...
  {% } %}
</script>

<!-- The template to display files available for download -->
<script id="template-download" type="text/x-tmpl">
  {% for (var i=0, file; file=o.files[i]; i++) { %}
    ...
  {% } %}
</script>

<!-- script -->
<script>
  $('#fileupload').fileupload({
    autoUpload: false,
    disableImageResize: /Android(?!.*Chrome)|Opera/.test(window.navigator.userAgent),
    maxFileSize: 5000000,
    acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i     
  });
  
  $('#fileupload').bind('fileuploadadd', function(e, data) {
  });

  $('#fileupload').bind('fileuploadfail', function(e, data) {
  });
</script>