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 media px-2">
      <div class="border border-300 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--1 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--2 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>
</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 media">
      <div class="border border-300 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--1 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--2 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>
Drop your files here
Stylesheet
<link href="vendors/dropzone/dropzone.min.css" rel="stylesheet" />
Javascript
<script src="vendors/dropzone/dropzone.min.js"></script>

Thank you for creating with Phoenix|
2023 ©Themewagon

v1.9.0

Theme Customizer

Explore different styles according to your preferences

Color Scheme
RTL

Change text direction

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