### File Uploader

Falcon uses DropzoneJS for file-uploader. DropzoneJS is an open-source library that provides drag & drop file uploads with image previews.

Documentation for Dropzone

##### Single File Upload

`Dropzone` requires a valid server-side url for the file upload. You can easily pass it through `data-options` attribute like `data-options!={ url: 'valid/url'}`

Drop your file here

    <div class="dropzone dropzone-single p-0" data-dropzone="data-dropzone" data-options='{"url":"valid/url","maxFiles":1,"dictDefaultMessage":"Choose or Drop a file here"}'>
      <div class="fallback">
        <input type="file" name="file" />
      </div>
      <div class="dz-preview dz-preview-single">
        <div class="dz-preview-cover dz-complete"><img class="dz-preview-img" src="../../../assets/img/generic/image-file-2.png" alt="..." data-dz-thumbnail="" /><a class="dz-remove text-danger" href="#!" data-dz-remove="data-dz-remove"><span class="fas fa-times"></span></a>
          <div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress=""></span></div>
          <div class="dz-errormessage m-1"><span data-dz-errormessage="data-dz-errormessage"></span></div>
        </div>
        <div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress=""></span></div>
      </div>
      <div class="dz-message" data-dz-message="data-dz-message">
        <div class="dz-message-text"><img class="me-2" src="../../../assets/img/icons/cloud-upload.svg" width="25" alt="" />Drop your file here</div>
      </div>
    </div>

##### Multiple File Upload

Drop your files here

######

    <form class="dropzone dropzone-multiple p-0" id="my-awesome-dropzone" data-dropzone="data-dropzone" action="#!">
      <div class="fallback">
        <input name="file" type="file" multiple="multiple" />
      </div>
      <div class="dz-message" data-dz-message="data-dz-message"> <img class="me-2" src="../../../assets/img/icons/cloud-upload.svg" width="25" alt="" />Drop your files here</div>
      <div class="dz-preview dz-preview-multiple m-0 d-flex flex-column">
        <div class="d-flex media mb-3 pb-3 border-bottom btn-reveal-trigger"><img class="dz-image" src="../../../assets/img/generic/image-file-2.png" alt="..." data-dz-thumbnail="data-dz-thumbnail" />
          <div class="flex-1 d-flex flex-between-center">
            <div>
              <h6 data-dz-name="data-dz-name"></h6>
              <div class="d-flex align-items-center">
                <p class="mb-0 fs-10 text-400 lh-1" data-dz-size="data-dz-size"></p>
                <div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress=""></span></div>
              </div><span class="fs-11 text-danger" data-dz-errormessage="data-dz-errormessage"></span>
            </div>
            <div class="dropdown font-sans-serif">
              <button class="btn btn-link text-600 btn-sm dropdown-toggle btn-reveal dropdown-caret-none" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="fas fa-ellipsis-h"></span></button>
              <div class="dropdown-menu dropdown-menu-end border py-2"><a class="dropdown-item" href="#!" data-dz-remove="data-dz-remove">Remove File</a></div>
            </div>
          </div>
        </div>
      </div>
    </form>

##### Stylesheet

    <link href="vendors/dropzone/dropzone.css" rel="stylesheet" />

##### Javascript

    <script src="vendors/dropzone/dropzone-min.js"></script>

#### Register

Please create your free Falcon account

Name
Email address
Password
Confirm Password
I accept the terms and privacy policy

or register with
google
facebook

##### Settings

Set your own customized style

##### Color Scheme

Choose the perfect color mode for your app.

##### RTL Mode

Switch your language direction

RTL Documentation

##### Fluid Layout

Toggle container layout system

Fluid Documentation

##### Navigation Position

Select a suitable navigation system for your web application

##### Vertical Navbar Style

Switch between styles for your vertical navbar

See Documentation

##### Like What You See?

Get Falcon now and create beautiful dashboards with hundreds of widgets.

Purchase
customize