---
title: File Uploads
---

{{#extend "layout-default"}}
  {{#content "css_vendor" mode="append"}}
    <link rel="stylesheet" href="{{global}}/vendor/blueimp-file-upload/jquery.fileupload.css">
    <link rel="stylesheet" href="{{global}}/vendor/dropify/dropify.css">
  {{/content}}


  {{#content "js_vendor" mode="append"}}
    <script src="{{global}}/vendor/jquery-ui/jquery-ui.js"></script>
    <script src="{{global}}/vendor/blueimp-tmpl/tmpl.js"></script>
    <script src="{{global}}/vendor/blueimp-canvas-to-blob/canvas-to-blob.js"></script>
    <script src="{{global}}/vendor/blueimp-load-image/load-image.all.min.js"></script>
    <script src="{{global}}/vendor/blueimp-file-upload/jquery.fileupload.js"></script>
    <script src="{{global}}/vendor/blueimp-file-upload/jquery.fileupload-process.js"></script>
    <script src="{{global}}/vendor/blueimp-file-upload/jquery.fileupload-image.js"></script>
    <script src="{{global}}/vendor/blueimp-file-upload/jquery.fileupload-audio.js"></script>
    <script src="{{global}}/vendor/blueimp-file-upload/jquery.fileupload-video.js"></script>
    <script src="{{global}}/vendor/blueimp-file-upload/jquery.fileupload-validate.js"></script>
    <script src="{{global}}/vendor/blueimp-file-upload/jquery.fileupload-ui.js"></script>
    <script src="{{global}}/vendor/dropify/dropify.min.js"></script>
  {{/content}}

  {{#content "js" mode="append"}}
    <script src="{{global}}/js/Plugin/dropify.js"></script>
  {{/content}}


  {{#content "scripts" mode="replace"}}
    <script src="{{assets}}/examples/js/forms/uploads.js"></script>
  {{/content}}

  {{#content "body"}}

    <!-- Page -->
    <div class="page">
      <div class="page-header">
        <h1 class="page-title">File Uploads</h1>
        <ol class="breadcrumb">
          <li class="breadcrumb-item"><a href="{{dest 'index.html'}}">Home</a></li>
          <li class="breadcrumb-item"><a href="javascript:void(0)">Forms</a></li>
          <li class="breadcrumb-item active">File Uploads</li>
        </ol>
        <div class="page-header-actions">
          <button type="button" class="btn btn-sm btn-icon btn-inverse btn-round" data-toggle="tooltip"
            data-original-title="Edit">
            <i class="icon md-edit" aria-hidden="true"></i>
          </button>
          <button type="button" class="btn btn-sm btn-icon btn-inverse btn-round" data-toggle="tooltip"
            data-original-title="Refresh">
            <i class="icon md-refresh" aria-hidden="true"></i>
          </button>
          <button type="button" class="btn btn-sm btn-icon btn-inverse btn-round" data-toggle="tooltip"
            data-original-title="Setting">
            <i class="icon md-settings" aria-hidden="true"></i>
          </button>
        </div>
      </div>
      <div class="page-content">
        <!-- Panel Dropify -->
        <div class="panel">
          <div class="panel-heading">
            <h3 class="panel-title">Dropify
              <small><a class="example-plugin-link" href="https://jeremyfagis.github.io/dropify/"
                  target="_blank">official website</a></small>
            </h3>
          </div>
          <div class="panel-body container-fluid">
            <div class="row row-lg">
              <div class="col-xl-4 col-md-6">
                <!-- Example Default -->
                <div class="example-wrap">
                  <h4 class="example-title">Your so fresh input file — Default version</h4>
                  <div class="example">
                    <input type="file" id="input-file-now" data-plugin="dropify" data-default-file=""
                    />
                  </div>
                </div>
                <!-- End Example Default -->
              </div>

              <div class="col-xl-4 col-md-6">
                <!-- Example Default Value -->
                <div class="example-wrap">
                  <h4 class="example-title">You can add a default value</h4>
                  <div class="example">
                    <input type="file" id="input-file-now-custom-1" data-plugin="dropify" data-default-file="{{global}}/photos/placeholder.png"
                    />
                  </div>
                </div>
                <!-- End Example Default Value -->
              </div>

              <div class="col-xl-4 col-md-6">
                <!-- Example height -->
                <div class="example-wrap">
                  <h4 class="example-title">You can set the height</h4>
                  <div class="example">
                    <input type="file" id="input-file-now-custom-2" data-plugin="dropify" data-height="500"
                    />
                  </div>
                </div>
                <!-- End Example height -->
              </div>

              <div class="col-xl-4 col-md-6">
                <!-- Example combine options -->
                <div class="example-wrap">
                  <h4 class="example-title">You can combine options</h4>
                  <div class="example">
                    <input type="file" id="input-file-now-custom-3" data-plugin="dropify" data-height="500"
                      data-default-file="{{global}}/photos/placeholder.png" />
                  </div>
                </div>
                <!-- End Example combine options -->
              </div>

              <div class="col-xl-4 col-md-6">
                <!-- Example disabled -->
                <div class="example-wrap">
                  <h4 class="example-title">You can disabled the input</h4>
                  <div class="example">
                    <input type="file" id="input-file-now-disabled-1" data-plugin="dropify" disabled="disabled"
                    />
                  </div>
                </div>
                <!-- End Example disabled -->
              </div>

              <div class="col-xl-4 col-md-6">
                <!-- Example default file -->
                <div class="example-wrap">
                  <h4 class="example-title">Also with a default file</h4>
                  <div class="example">
                    <input type="file" id="input-file-now-disabled-2" data-plugin="dropify" disabled="disabled"
                      data-default-file="{{global}}/photos/placeholder.png" />
                  </div>
                </div>
                <!-- End Example default file -->
              </div>

              <div class="col-xl-4 col-md-6">
                <!-- Example max file size -->
                <div class="example-wrap">
                  <h4 class="example-title">You can add a max file size</h4>
                  <div class="example">
                    <input type="file" id="input-file-max-fs" data-plugin="dropify" data-max-file-size="2M"
                    />
                  </div>
                </div>
                <!-- End Example max file size -->
              </div>

              <div class="col-xl-4 col-md-6">
                <!-- Example disable -->
                <div class="example-wrap">
                  <h4 class="example-title">You can disable remove button</h4>
                  <div class="example">
                    <input type="file" id="input-file-disable-remove" data-plugin="dropify" data-disable-remove="true"
                    />
                  </div>
                </div>
                <!-- End Example disable -->
              </div>

              <div class="col-xl-4 col-md-6">
                <!-- Example events -->
                <div class="example-wrap">
                  <h4 class="example-title">You can use events</h4>
                  <div class="example">
                    <input type="file" id="input-file-events" class="dropify-event" data-default-file="{{global}}/photos/placeholder.png"
                    />
                  </div>
                </div>
                <!-- End Example events -->
              </div>
            </div>
          </div>
        </div>
        <!-- End Panel Dropify -->
        <!-- Panel jQuery File Upload -->
        <div class="panel panel-transparent">
          <div class="panel-heading">
            <h3 class="panel-title px-0">jQuery File Upload
              <small><a class="example-plugin-link" href="https://blueimp.github.io/jQuery-File-Upload/"
                  target="_blank">official website</a></small>
            </h3>
          </div>
          <form class="upload-form" id="exampleUploadForm" method="POST">
            <input type="file" id="inputUpload" name="files[]" multiple="" />
            <div class="uploader-inline">
              <p class="upload-instructions">Click Or Drop Files To Upload.</p>
            </div>
            <div class="file-wrap container-fluid">
              <div class="file-list row"></div>
            </div>
          </form>
        </div>
        <!-- End Panel jQuery File Upload -->
      </div>
    </div>
    <!-- End Page -->

  {{/content}}
{{/extend}}