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" 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>

Thank you for creating with Phoenix|
2024 ©Themewagon

v1.19.0

Theme Customizer

Explore different styles according to your preferences

Color Scheme
RTL

Change text direction

Support Chat

Toggle support chat

Navigation Type
Vertical Navbar Appearance
Horizontal Navbar Shape
Horizontal Navbar Appearance
Purchase template
customize