Published on

10 Tailwind Upload Form components

10 Tailwind Upload Form components

10 Tailwind Upload Form components

Tailwind: Upload Form Components With Code

These are 10 Tailwind Upload Form components along with their HTML and Tailwind classes:

  1. Basic Form With file input:

<div class="mt-4">
  <input
    type="file"
    name="file"
    id="file"
    class="rounded-lg border-gray-300 px-4 py-2"
  />
</div>

  1. Form With File input with label:

<div class="mt-4">
  <label for="file" class="mb-2 inline-block font-bold">Select a file:</label>
  <input
    type="file"
    name="file"
    id="file"
    class="rounded-lg border-gray-300 px-4 py-2"
  />
</div>

  1. Multiple file input Form:

<div class="mt-4">
  <input
    type="file"
    name="file"
    id="file"
    class="rounded-lg border-gray-300 px-4 py-2"
    multiple
  />
</div>

  1. Form With Custom styled file input button:

<div class="mt-4">
  <label
    for="file"
    class="mb-2 inline-block cursor-pointer rounded-lg bg-blue-500 px-4 py-2 font-bold text-white hover:bg-blue-700"
  >
    Select File
  </label>
  <input type="file" name="file" id="file" class="hidden" />
</div>

  1. Form With File input with preview image:

<div class="mt-4">
  <label for="file" class="mb-2 inline-block font-bold">Select an image:</label>
  <input
    type="file"
    name="file"
    id="file"
    class="rounded-lg border-gray-300 px-4 py-2"
    accept="image/*"
    onchange="previewImage(event)"
  />
  <img id="preview" class="mt-2 hidden" />
</div>

<script>
  function previewImage(event) {
    var output = document.getElementById("preview");
    output.src = URL.createObjectURL(event.target.files[0]);
    output.classList.remove("hidden");
  }
</script>

  1. Form With Upload progress bar:

    Upload Progress

    25%

<div class="relative mt-4 pt-1">
  <div class="mb-4 flex h-2 overflow-hidden rounded bg-gray-100 text-xs">
    <div
      style="width: 25%"
      class="flex flex-col justify-center whitespace-nowrap bg-green-500 text-center text-white shadow-none"
    ></div>
  </div>
  <div class="mb-2 flex items-center justify-between">
    <div>
      <span
        class="inline-block rounded bg-gray-200 px-2 py-1 text-xs font-semibold uppercase text-gray-600"
        >Upload Progress</span
      >
    </div>
    <div class="text-right">
      <span class="inline-block text-xs font-semibold text-gray-600">25%</span>
    </div>
  </div>
</div>

  1. Form With File input with dropzone:

    Drag and drop a file here or click to select a file.

<div class="mt-4">
  <div
    class="flex h-48 cursor-pointer flex-col items-center justify-center rounded-lg border-2 border-dashed border-gray-600"
    ondrop="dropFile(event)"
    ondragover="event.preventDefault()"
  >
    <svg
      class="mb-3 inline-block h-8 w-8 text-gray-600"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 20 20"
    >
      <path
        d="M14 7.414V2h-4v5.414l-1-1L9.707 8.12l3.182 3.182l1.415-1.414L14 9.828V7.414zM3 16h14v2H3v-2zM3 2h14v2H3v-2z"
      />
    </svg>
    <div class="text-gray-600">
      Drag and drop a file here or click to select a file.
    </div>
    <input
      type="file"
      name="file"
      id="file"
      class="hidden"
      onchange="changeFile(event)"
    />
  </div>
</div>

<script>
  function dropFile(event) {
    event.preventDefault();
    var dataTransfer = event.dataTransfer;
    document.getElementById("file").files = dataTransfer.files;
    previewFile(dataTransfer.files[0]);
  }

  function changeFile(event) {
    var input = event.target;
    var files = input.files;
    previewFile(files[0]);
  }

  function previewFile(file) {
    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onloadend = function () {
      var img = document.createElement("img");
      img.src = reader.result;
      img.classList.add("mt-2");
      document
        .getElementById("file")
        .parentNode.insertBefore(img, document.getElementById("file"));
    };
  }
</script>

  1. Form With Multiple file input with dropzone and thumbnail previews:

    Drag and drop files here or click to select files.

<div class="mt-4 border p-4">
  <div
    class="flex cursor-pointer flex-col items-center justify-center rounded-lg border-2 border-dashed border-gray-600"
    ondrop="dropFiles(event)"
    ondragover="event.preventDefault()"
  >
    <svg
      class="mb-3 inline-block h-8 w-8 text-gray-600"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 20 20"
    >
      <path
        d="M14 7.414V2h-4v5.414l-1-1L9.707 8.12l3.182 3.182l1.415-1.414L14 9.828V7.414zM3 16h14v2H3v-2zM3 2h14v2H3v-2z"
      />
    </svg>
    <div class="text-gray-600">
      Drag and drop files here or click to select files.
    </div>
    <input
      type="file"
      name="file"
      id="file"
      class="hidden"
      multiple
      onchange="changeFiles(event)"
    />
  </div>
  <div id="thumbnails" class="mt-2 flex flex-wrap"></div>
</div>

<script>
  function dropFiles(event) {
    event.preventDefault();
    var dataTransfer = event.dataTransfer;
    document.getElementById("file").files = dataTransfer.files;
    previewFiles(dataTransfer.files);
  }

  function changeFiles(event) {
    var input = event.target;
    var files = input.files;
    previewFiles(files);
  }

  function previewFiles(files) {
    var thumbnails = document.getElementById("thumbnails");
    while (thumbnails.firstChild) {
      thumbnails.removeChild(thumbnails.firstChild);
    }
    for (var i = 0; i < files.length; i++) {
      var reader = new FileReader();
      reader.index = i;
      reader.readAsDataURL(files[i]);
      reader.onloadend = function () {
        var img = document.createElement("img");
        img.src = reader.result;
        img.classList.add("inline-block");
        img.classList.add("mb-2");
        img.classList.add("mr-2");
        img.style.width = "75px";
        img.style.height = "75px";
        thumbnails.appendChild(img);
      };
    }
  }
</script>

  1. Form With AJAX file upload with progress bar:

<div class="mt-4">
  <form id="upload-form" method="POST" enctype="multipart/form-data">
    <label for="file" class="mb-2 inline-block font-bold">Select a file:</label>
    <input
      type="file"
      name="file"
      id="file"
      class="rounded-lg border-gray-300 px-4 py-2"
    />
    <div class="relative mt-4 pt-1">
      <div
        id="progress-bar"
        class="mb-4 flex h-2 overflow-hidden rounded bg-gray-100 text-xs"
      >
        <div
          id="progress"
          style="width: 0%"
          class="flex flex-col justify-center whitespace-nowrap rounded bg-green-500 text-center font-bold text-white shadow-none"
        ></div>
      </div>
      <button
        type="submit"
        class="rounded bg-blue-500 px-4 py-2 font-bold text-white hover:bg-blue-700"
      >
        Upload
      </button>
    </div>
  </form>
</div>

<script>
  var form = document.getElementById("upload-form");
  var progressBar = document.getElementById("progress-bar");
  var progress = document.getElementById("progress");
  form.addEventListener("submit", function (event) {
    event.preventDefault();

    var xhr = new XMLHttpRequest();
    xhr.open("POST", "/api/upload", true);
    xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");

    xhr.upload.addEventListener("progress", function (event) {
      if (event.lengthComputable) {
        var percentComplete = (event.loaded / event.total) * 100;
        progress.style.width = percentComplete + "%";
      }
    });

    xhr.addEventListener("load", function (event) {
      if (xhr.status === 200) {
        alert("File uploaded successfully");
      } else {
        alert("File upload failed");
      }
    });

    xhr.send(new FormData(form));
  });
</script>

  1. Form With Drag-and-drop file upload with AJAX:

    Drag and drop a file here or click to select a file.

<div class="mt-4 border p-4">
  <div
    class="flex h-64 cursor-pointer flex-col items-center justify-center rounded-lg border-2 border-dashed border-gray-600"
    ondrop="dropFile(event)"
    ondragover="event.preventDefault()"
  >
    <svg
      class="mb-3 inline-block h-8 w-8 text-gray-600"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 20 20"
    >
      <path
        d="M14 7.414V2h-4v5.414l-1-1L9.707 8.12l3.182 3.182l1.415-1.414L14 9.828V7.414zM3 16h14v2H3v-2zM3 2h14v2H3v-2z"
      />
    </svg>
    <div class="text-gray-600">
      Drag and drop a file here or click to select a file.
    </div>
    <form
      id="upload-form"
      class="hidden"
      method="POST"
      enctype="multipart/form-data"
    >
      <input type="file" name="file" id="file" />
    </form>
  </div>
  <div id="preview" class="mt-4 hidden"></div>
</div>

<script>
  var form = document.getElementById("upload-form");
  var preview = document.getElementById("preview");
  form.addEventListener("change", function (event) {
    previewFile(event.target.files[0]);
  });

  function dropFile(event) {
    event.preventDefault();
    var dataTransfer = event.dataTransfer;
    form.querySelector('input[name="file"]').files = dataTransfer.files;
    previewFile(dataTransfer.files[0]);
  }

  function previewFile(file) {
    preview.innerHTML = "";
    preview.classList.remove("hidden");
    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onloadend = function () {
      var img = document.createElement("img");
      img.src = reader.result;
      img.classList.add("mt-2");
      preview.appendChild(img);
    };

    var xhr = new XMLHttpRequest();
    xhr.open("POST", "/api/upload", true);
    xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
    xhr.send(new FormData(form));
  }
</script>