## File Uploader

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

Documentation for DropzoneJS

#### 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'}`

    <div class="dropzone dropzone-multiple p-0" id="dropzone" 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-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 class="dz-preview dz-preview-multiple m-0 d-flex flex-column">
        <div class="d-flex pb-3 border-bottom border-translucent media px-2">
          <div class="border p-2 rounded-2 me-2"><img class="rounded-2 dz-image" src="../../../assets/img/icons/file.png" alt="..." data-dz-thumbnail="data-dz-thumbnail" /></div>
          <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-9 text-body-quaternary 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-10 text-danger" data-dz-errormessage="data-dz-errormessage"></span>
            </div>
            <div class="dropdown"><button class="btn btn-link text-body-quaternary 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 border-translucent py-2"><a class="dropdown-item" href="#!" data-dz-remove="data-dz-remove">Remove File</a></div>
            </div>
          </div>
        </div>
      </div>
    </div>

Drop your file here

######

#### Single image Upload

    <div class="dropzone dropzone-single p-0" id="dropzone-single" data-dropzone="data-dropzone" data-options='{"url":"valid/url","maxFiles":1,"maxFilesize":5,"acceptedFiles":"image/*","dictDefaultMessage":"Choose or Drop a file here"}'>
      <div class="fallback"><input type="file" name="file" /></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><button class="btn dz-upload-btn border-0 position-absolute z-5 bg-black bg-opacity-50 text-white mt-3 ms-3 px-3" data-dz-message="data-dz-message">Change Picture<span class="fa-solid fa-camera fs-10 ms-1"></span></button>
      </div>
      <div class="dz-preview d-block m-0">
        <div class="rounded-2 position-relative" style="height: 144px"><img class="rounded-2 w-100 h-100 object-fit-cover" src="../../../assets/img/icons/file-bg.png" alt="..." data-dz-thumbnail="data-dz-thumbnail" /><button class="btn border-0 position-absolute top-0 end-0 z-5 bg-black bg-opacity-50 text-white mt-3 me-3 px-3 cursor-pointer" data-dz-remove="data-dz-remove"><span class="fa-solid fa-xmark cursor-pointer"></span></button></div>
      </div>
    </div>

Drop your file here

#### Multiple File Upload

    <form class="dropzone dropzone-multiple p-0" id="dropzone-multiple" 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 mb-3 pb-3 border-bottom border-translucent media">
          <div class="border p-2 rounded-2 me-2"><img class="rounded-2 dz-image" src="../../../assets/img/icons/file.png" alt="..." data-dz-thumbnail="data-dz-thumbnail" /></div>
          <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-9 text-body-quaternary 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-10 text-danger" data-dz-errormessage="data-dz-errormessage"></span>
            </div>
            <div class="dropdown"><button class="btn btn-link text-body-tertiary 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 border-translucent py-2"><a class="dropdown-item" href="#!" data-dz-remove="data-dz-remove">Remove File</a></div>
            </div>
          </div>
        </div>
      </div>
    </form>

Drop your files here

######

#### Stylesheet

    <pre><code class="language-html">&lt;link href=&quot;vendors/dropzone/dropzone.css&quot; rel=&quot;stylesheet&quot; /&gt;</code></pre>

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

#### Javascript

    <pre><code class="language-html">&lt;script src=&quot;vendors/dropzone/dropzone-min.js&quot;&gt;&lt;/script&gt;</code></pre>

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

##### Demo widget

I need help with something

I can’t reorder a product I previously ordered

How do I place an order?

My payment method not working

##### Eric

Ask us anything – we’ll get back to you here or by email within 24 hours.

##### Theme Customizer

Explore different styles according to your preferences

##### Color Scheme

Light
Dark
Auto

##### RTL

Change text direction

##### Support Chat

Toggle support chat

##### Navigation Type

Vertical
Horizontal
Combo
Dual nav

##### Vertical Navbar Appearance

Default Default
Darker Lighter

##### Horizontal Navbar Shape

Default
Slim

##### Horizontal Navbar Appearance

Default
Darker Lighter
Purchase template
customize