Tailwind CSS File Upload

File Upload enhances web forms with a Tailwind CSS-compatible, user-friendly interface that supports drag-and-drop, previews, and progress bars. It allows simultaneous multiple file uploads with options for automatic or manual submission and validation of file types and sizes.

Requires Additional Installation

Note that this component requires the use of the third-party Dropzone plugin.

Learn more

Requires JS

Note that this component requires the use of Preline UI's File Upload plugin, else you can skip this message if you are already using Preline UI as a package.

Learn more

Installation

Install Dropzone.

Install dropzone via npm

Terminal

                          
                            npm i dropzone

Add Lodash and Dropzone to the page.

Include the JavaScript <script> near the end of your </body> tag:
<script src="./assets/vendor/lodash/lodash.min.js"></script> <script src="./assets/vendor/dropzone/dist/dropzone-min.js"></script>
HTML
```
                          
                        
```
Certain JavaScript Helpers in Preline UI make use of Lodash plugin. Don't forget to install it, if you haven't done so already: npm i lodash

File upload patterns

Default file upload

Start with a dropzone-style uploader that supports previews, progress, and file removal.

<div class="mt-4 flex flex-wrap justify-center text-sm/6 text-muted-foreground-2">
                                  <span class="pe-1 font-medium text-foreground">
                                    Drop your file here or
                                  </span>
                                  <span class="bg-layer font-semibold text-primary hover:text-primary-hover rounded-lg decoration-2 hover:underline focus-within:outline-hidden focus-within:ring-2 focus-within:ring-primary-focus focus-within:ring-offset-2">browse</span>
                                </div>

<div data-hs-file-upload='{
                            "url": "/upload",
                            "extensions": {
                              "default": {
                                "class": "shrink-0 size-5"
                              },
                              "xls": {
                                "class": "shrink-0 size-5"
                              },
                              "zip": {
                                "class": "shrink-0 size-5"
                              },
                              "csv": {
                                "icon": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 22h14a2 2 0 0 0 2-2V7l-5-5H6a2 2 0 0 0-2 2v4\"/><path d=\"M14 2v4a2 2 0 0 0 2 2h4\"/><path d=\"m5 12-3 3 3 3\"/><path d=\"m9 18 3-3-3-3\"/></svg>",
                                "class": "shrink-0 size-5"
                              }
                            }
                          }'>
                            <template data-hs-file-upload-preview>
                              <div class="p-3 bg-layer border border-layer-line rounded-xl">
                                <div class="mb-1 flex justify-between items-center">
                                  <div class="flex items-center gap-x-3">
                                    <span class="size-10 flex justify-center items-center bg-layer border border-layer-line text-muted-foreground-1 rounded-lg" data-hs-file-upload-file-icon>
                                      <img class="rounded-lg hidden" src="data:," alt="" data-dz-thumbnail>
                                    </span>
                                    <div>
                                      <p class="text-sm font-medium text-foreground">
                                        <span class="truncate inline-block max-w-75 align-bottom" data-hs-file-upload-file-name></span>.<span data-hs-file-upload-file-ext></span>
                                      </p>
                                      <p class="text-xs text-muted-foreground-1" data-hs-file-upload-file-size></p>
                                    </div>
                                  </div>
                                  <div class="flex items-center gap-x-2">
                                    <button type="button" class="text-muted-foreground-1 hover:text-foreground focus:outline-hidden focus:text-foreground" data-hs-file-upload-remove>
                                      <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"></path><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"></path><line x1="10" x2="10" y1="11" y2="17"></line><line x1="14" x2="14" y1="11" y2="17"></line></svg>
                                    </button>
                                  </div>
                                </div>

File size validation

Validate uploads and show an error state when a selected file exceeds the configured size limit.

<!DOCTYPE html>
                        <html lang="en" dir="ltr" class="relative min-h-full h-full">
                          <head>
                            <meta charset="utf-8">
                            <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
                            <title>Preline UI</title>
                            <link rel="shortcut icon" href="../../favicon.ico">
                            <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
                            <link rel="stylesheet" href="../../assets/css/main.min.css">
                          </head>
                          <body class="w-full max-w-xl mx-auto mt-2">
                        <div id="hs-file-upload-with-limited-file-size" data-hs-file-upload='{
                          "url": "/upload",
                          "maxFilesize": 1,
                          "extensions": {
                            "default": {
                              "class": "shrink-0 size-5"
                            },
                            "xls": {
                              "class": "shrink-0 size-5"
                            },
                            "zip": {
                              "class": "shrink-0 size-5"
                            },
                            "csv": {
                              "icon": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 22h14a2 2 0 0 0 2-2V7l-5-5H6a2 2 0 0 0-2 2v4\"/><path d=\"M14 2v4a2 2 0 0 0 2 2h4\"/><path d=\"m5 12-3 3 3 3\"/><path d=\"m9 18 3-3-3-3\"/></svg>",
                              "class": "shrink-0 size-5"
                            }
                          }
                        }'>
                          <template data-hs-file-upload-preview>
                            <div class="p-3 bg-layer border border-layer-line rounded-xl">
                              <div class="mb-1 flex justify-between items-center">
                                <div class="flex items-center gap-x-3">
                                  <span class="size-10 flex justify-center items-center bg-layer border border-layer-line text-muted-foreground-1 rounded-lg" data-hs-file-upload-file-icon>
                                    <img class="rounded-lg hidden" src="data:," alt="" data-dz-thumbnail>
                                  </span>
                                  <div>
                                    <p class="text-sm font-medium text-foreground">
                                      <span class="truncate inline-block max-w-75 align-bottom" data-hs-file-upload-file-name></span>.<span data-hs-file-upload-file-ext></span>
                                    </p>
                                    <p class="text-xs text-muted-foreground-1" data-hs-file-upload-file-size data-hs-file-upload-file-success></p>
                                    <p class="text-xs text-red-500" style="display: none;" data-hs-file-upload-file-error>File exceeds size limit.</p>
                                  </div>
                                </div>
                                <div class="flex items-center gap-x-2">
                                  <span class="hs-tooltip [--placement:top] inline-block" style="display: none;" data-hs-file-upload-file-error>
                                    <span class="hs-tooltip-toggle text-red-500 hover:text-red-800 focus:outline-hidden focus:text-red-800 dark:text-red-500 dark:hover:text-red-200 dark:focus:text-red-200">
                                      <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" x2="12" y1="8" y2="12"/><line x1="12" x2="12.01" y1="16" y2="16"/></svg>
                                      <span class="hs-tooltip-content max-w-25 hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-md" role="tooltip">
                                        Please try to upload a file smaller than 1MB.
                                      </span>
                                    </span>
                                  </span>
                                  <button type="button" class="text-muted-foreground-1 hover:text-foreground focus:outline-hidden focus:text-foreground" data-hs-file-upload-reload>
                                    <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/></svg>
                                  </button>
                                  <button type="button" class="text-muted-foreground-1 hover:text-foreground focus:outline-hidden focus:text-foreground" data-hs-file-upload-remove>
                                    <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"></path><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"></path><line x1="10" x2="10" y1="11" y2="17"></line><line x1="14" x2="14" y1="11" y2="17"></line></svg>
                                  </button>
                                </div>
                              </div>

<div class="mt-4 flex flex-wrap justify-center text-sm/6 text-muted-foreground-2">
                                <span class="pe-1 font-medium text-foreground">
                                  Drop your file here or
                                </span>
                                <span class="bg-layer font-semibold text-primary hover:text-primary-hover rounded-lg decoration-2 hover:underline focus-within:outline-hidden focus-within:ring-2 focus-within:ring-primary-focus focus-within:ring-offset-2">browse</span>
                              </div>

<div class="mt-4 space-y-2 empty:mt-0" data-hs-file-upload-previews></div>
                        </div>
                        
                            <script src="../../assets/vendor/lodash/lodash.min.js"></script>
                            <script src="../../assets/vendor/dropzone/dist/dropzone-min.js"></script>
                            <script src="../../assets/vendor/preline/dist/index.js?v=4.2.0"></script>
                            <script>
                              (function() {
                                const { element } = HSFileUpload.getInstance('#hs-file-upload-with-limited-file-size', true);
    
                                element.dropzone.on('error', (file, response) => {
                                  if (file.size > element.concatOptions.maxFilesize * 1024 * 1024) {
                                    const successEls = document.querySelectorAll('[data-hs-file-upload-file-success]');
                                    const errorEls = document.querySelectorAll('[data-hs-file-upload-file-error]');
        
                                    successEls.forEach((el) => el.style.display = 'none');
                                    errorEls.forEach((el) => el.style.display = '');
                                    HSStaticMethods.autoInit(['tooltip']);
                                  }
                                });
                              })();
                            </script>
                          </body>
                        </html>

<div id="hs-file-upload-with-limited-file-size" data-hs-file-upload='{
                          "url": "/upload",
                          "maxFilesize": 1,
                          "extensions": {
                            "default": {
                              "class": "shrink-0 size-5"
                            },
                            "xls": {
                              "class": "shrink-0 size-5"
                            },
                            "zip": {
                              "class": "shrink-0 size-5"
                            },
                            "csv": {
                              "icon": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 22h14a2 2 0 0 0 2-2V7l-5-5H6a2 2 0 0 0-2 2v4\"/><path d=\"M14 2v4a2 2 0 0 0 2 2h4\"/><path d=\"m5 12-3 3 3 3\"/><path d=\"m9 18 3-3-3-3\"/></svg>",
                              "class": "shrink-0 size-5"
                            }
                          }
                        }'>
                          <template data-hs-file-upload-preview>
                            <div class="p-3 bg-layer border border-layer-line rounded-xl">
                              <div class="mb-1 flex justify-between items-center">
                                <div class="flex items-center gap-x-3">
                                  <span class="size-10 flex justify-center items-center bg-layer border border-layer-line text-muted-foreground-1 rounded-lg" data-hs-file-upload-file-icon>
                                    <img class="rounded-lg hidden" src="data:," alt="" data-dz-thumbnail>
                                  </span>
                                  <div>
                                    <p class="text-sm font-medium text-foreground">
                                      <span class="truncate inline-block max-w-75 align-bottom" data-hs-file-upload-file-name></span>.<span data-hs-file-upload-file-ext></span>
                                    </p>
                                    <p class="text-xs text-muted-foreground-1" data-hs-file-upload-file-size data-hs-file-upload-file-success></p>
                                    <p class="text-xs text-red-500" style="display: none;" data-hs-file-upload-file-error>File exceeds size limit.</p>
                                  </div>
                                </div>
                                <div class="flex items-center gap-x-2">
                                  <span class="hs-tooltip [--placement:top] inline-block" style="display: none;" data-hs-file-upload-file-error>
                                    <span class="hs-tooltip-toggle text-red-500 hover:text-red-800 focus:outline-hidden focus:text-red-800 dark:text-red-500 dark:hover:text-red-200 dark:focus:text-red-200">
                                      <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" x2="12" y1="8" y2="12"/><line x1="12" x2="12.01" y1="16" y2="16"/></svg>
                                      <span class="hs-tooltip-content max-w-25 hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-md" role="tooltip">
                                        Please try to upload a file smaller than 1MB.
                                      </span>
                                    </span>
                                  </span>
                                  <button type="button" class="text-muted-foreground-1 hover:text-foreground focus:outline-hidden focus:text-foreground" data-hs-file-upload-reload>
                                    <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/></svg>
                                  </button>
                                  <button type="button" class="text-muted-foreground-1 hover:text-foreground focus:outline-hidden focus:text-foreground" data-hs-file-upload-remove>
                                    <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"></path><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"></path><line x1="10" x2="10" y1="11" y2="17"></line><line x1="14" x2="14" y1="11" y2="17"></line></svg>
                                  </button>
                                </div>
                              </div>

<div class="mt-4 flex flex-wrap justify-center text-sm/6 text-muted-foreground-2">
                                <span class="pe-1 font-medium text-foreground">
                                  Drop your file here or
                                </span>
                                <span class="bg-layer font-semibold text-primary hover:text-primary-hover rounded-lg decoration-2 hover:underline focus-within:outline-hidden focus-within:ring-2 focus-within:ring-primary-focus focus-within:ring-offset-2">browse</span>
                              </div>

Image gallery upload

Turn uploads into a thumbnail gallery for multiple image files.

<div data-hs-file-upload='{
                            "url": "/upload",
                            "acceptedFiles": "image/*",
                            "autoHideTrigger": false,
                            "extensions": {
                              "default": {
                                "class": "shrink-0 size-5"
                              },
                              "xls": {
                                "class": "shrink-0 size-5"
                              },
                              "zip": {
                                "class": "shrink-0 size-5"
                              },
                              "csv": {
                                "icon": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 22h14a2 2 0 0 0 2-2V7l-5-5H6a2 2 0 0 0-2 2v4\"/><path d=\"M14 2v4a2 2 0 0 0 2 2h4\"/><path d=\"m5 12-3 3 3 3\"/><path d=\"m9 18 3-3-3-3\"/></svg>",
                                "class": "shrink-0 size-5"
                              }
                            }
                          }'>
                            <template data-hs-file-upload-preview>
                              <div class="relative mt-2 p-2 bg-white border border-gray-200 rounded-xl dark:bg-neutral-800 dark:border-neutral-700">
                                <img class="mb-2 w-full object-cover rounded-lg" src="data:," alt="" data-dz-thumbnail>

Single-image upload

Use a single-file image uploader for avatars, profile photos, or other one-image updates.

<div class="grow">
                                <div class="flex items-center gap-x-2">
                                  <button type="button" class="py-2 px-3 inline-flex items-center gap-x-2 text-xs font-medium rounded-lg bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover focus:outline-hidden focus:bg-primary-focus disabled:opacity-50 disabled:pointer-events-none" data-hs-file-upload-trigger>
                                    <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="17 8 12 3 7 8"></polyline><line x1="12" x2="12" y1="3" y2="15"></line></svg>
                                    Upload photo
                                  </button>
                                  <button type="button" class="py-2 px-3 inline-flex items-center gap-x-2 text-xs rounded-lg bg-layer border border-layer-line text-red-500 shadow-2xs hover:bg-layer-hover focus:outline-hidden focus:bg-layer-focus disabled:opacity-50 disabled:pointer-events-none" data-hs-file-upload-clear>Delete</button>
                                </div>
                              </div>
                            </div>
                          </div>
                          
                              <script src="../../assets/vendor/lodash/lodash.min.js"></script>
                              <script src="../../assets/vendor/dropzone/dist/dropzone-min.js"></script>
                              <script src="../../assets/vendor/preline/dist/index.js?v=4.2.0"></script>
                            </body>
                          </html>

<div data-hs-file-upload='{
                            "url": "/upload",
                            "acceptedFiles": "image/*",
                            "maxFiles": 1,
                            "singleton": true
                          }'>
                            <template data-hs-file-upload-preview>
                              <div class="size-20">
                                <img class="w-full object-contain rounded-full" src="data:," alt="" data-dz-thumbnail>
                              </div>
                            </template>

Input-style file picker

Use a compact input-style trigger when you only need single-file selection and a filename display.

<button type="button" class="relative flex w-full bg-layer border border-layer-line text-layer-foreground shadow-2xs rounded-lg text-sm focus:outline-hidden focus:z-10 focus:border-primary-focus focus:ring-1 focus:ring-primary-focus disabled:opacity-50 disabled:pointer-events-none">
                              <span class="h-full py-3 px-4 bg-surface text-surface-foreground text-nowrap rounded-s-lg">Choose File</span>
                              <span class="group grow flex overflow-hidden h-full py-3 px-4" data-hs-file-upload-previews>
                                <span class="group-has-[div]:hidden">No Chosen File</span>
                              </span>
                              <span class="absolute top-0 left-0 size-full" data-hs-file-upload-trigger></span>
                            </button>
                          </div>
                          
                              <script src="../../assets/vendor/lodash/lodash.min.js"></script>
                              <script src="../../assets/vendor/dropzone/dist/dropzone-min.js"></script>
                              <script src="../../assets/vendor/preline/dist/index.js?v=4.2.0"></script>
                            </body>
                          </html>

<div data-hs-file-upload='{
                            "url": "/upload",
                            "maxFiles": 1,
                            "singleton": true
                          }'>
                            <template data-hs-file-upload-preview>
                              <div class="flex items-center w-full">
                                <span class="grow-0 overflow-hidden truncate" data-hs-file-upload-file-name></span>
                                <span class="grow-0">.</span>
                                <span class="grow-0" data-hs-file-upload-file-ext></span>
                              </div>
                            </template>

Destroy and reinitialize

Use the destroy method to remove a file upload instance, then initialize it again when needed.

<div class="mt-4 flex flex-wrap justify-center text-sm/6 text-muted-foreground-2">
                              <span class="pe-1 font-medium text-foreground">
                                Drop your file here or
                              </span>
                              <span class="bg-layer font-semibold text-primary hover:text-primary-hover rounded-lg decoration-2 hover:underline focus-within:outline-hidden focus-within:ring-2 focus-within:ring-primary-focus focus-within:ring-offset-2">browse</span>
                            </div>

<div class="flex flex-wrap gap-2 mt-4">
                        <button type="button" id="hs-destroy-file-upload" class="py-1 px-2 inline-flex items-center gap-x-1 text-sm rounded-lg bg-layer border border-layer-line text-layer-foreground hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus">
                          <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg>
                          Destroy file upload
                        </button>
                        <button type="button" id="hs-auto-init-file-upload" class="py-1 px-2 inline-flex items-center gap-x-1 text-sm rounded-lg bg-surface border border-surface-line text-surface-foreground hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" disabled>
                          <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"></path><path d="M3 3v5h5"></path><path d="M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16"></path><path d="M16 16h5v5"></path></svg>
                          Reinitialize file upload
                        </button>
                      </div>
                      
                          <script src="../../assets/vendor/lodash/lodash.min.js"></script>
                          <script src="../../assets/vendor/dropzone/dist/dropzone-min.js"></script>
                          <script src="../../assets/vendor/preline/dist/index.js?v=4.2.0"></script>
                          <script>
                            window.addEventListener('load', () => {
                              (function() {
                                const fileUpload = document.querySelector('#hs-file-upload-to-destroy');
                                const destroy = document.querySelector('#hs-destroy-file-upload');
                                const autoInit = document.querySelector('#hs-auto-init-file-upload');

destroy.addEventListener('click', () => {
                                  const {element} = HSFileUpload.getInstance(fileUpload, true);

element.destroy();

destroy.setAttribute('disabled', 'disabled');
                                  autoInit.removeAttribute('disabled');
                                });

autoInit.addEventListener('click', () => {
                                  HSFileUpload.autoInit();

autoInit.setAttribute('disabled', 'disabled');
                                  destroy.removeAttribute('disabled');
                                });
                              })();
                            });
                          </script>
                        </body>
                      </html>

<div id="hs-file-upload-to-destroy" data-hs-file-upload='{
                          "url": "/upload",
                          "extensions": {
                            "default": {
                              "class": "shrink-0 size-5"
                            },
                            "xls": {
                              "class": "shrink-0 size-5"
                            },
                            "zip": {
                              "class": "shrink-0 size-5"
                            },
                            "csv": {
                              "icon": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 22h14a2 2 0 0 0 2-2V7l-5-5H6a2 2 0 0 0-2 2v4\"/><path d=\"M14 2v4a2 2 0 0 0 2 2h4\"/><path d=\"m5 12-3 3 3 3\"/><path d=\"m9 18 3-3-3-3\"/></svg>",
                              "class": "shrink-0 size-5"
                            }
                          }
                        }'>
                          <template data-hs-file-upload-preview>
                            <div class="p-3 bg-layer border border-layer-line rounded-xl">
                              <div class="mb-1 flex justify-between items-center">
                                <div class="flex items-center gap-x-3">
                                  <span class="size-10 flex justify-center items-center bg-layer border border-layer-line text-muted-foreground-1 rounded-lg" data-hs-file-upload-file-icon>
                                    <img class="rounded-lg hidden" src="data:," alt="" data-dz-thumbnail>
                                  </span>
                                  <div>
                                    <p class="text-sm font-medium text-foreground">
                                      <span class="truncate inline-block max-w-75 align-bottom" data-hs-file-upload-file-name></span>.<span data-hs-file-upload-file-ext></span>
                                    </p>
                                    <p class="text-xs text-muted-foreground-1" data-hs-file-upload-file-size></p>
                                  </div>
                                </div>
                                <div class="flex items-center gap-x-2">
                                  <button type="button" class="text-muted-foreground-1 hover:text-foreground focus:outline-hidden focus:text-foreground" data-hs-file-upload-remove>
                                    <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"></path><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"></path><line x1="10" x2="10" y1="11" y2="17"></line><line x1="14" x2="14" y1="11" y2="17"></line></svg>
                                  </button>
                                </div>
                              </div>

<div class="mt-4 flex flex-wrap justify-center text-sm/6 text-muted-foreground-2">
                                <span class="pe-1 font-medium text-foreground">
                                  Drop your file here or
                                </span>
                                <span class="bg-layer font-semibold text-primary hover:text-primary-hover rounded-lg decoration-2 hover:underline focus-within:outline-hidden focus-within:ring-2 focus-within:ring-primary-focus focus-within:ring-offset-2">browse</span>
                              </div>

<div class="flex flex-wrap gap-2 mt-4">
                          <button type="button" id="hs-destroy-file-upload" class="py-1 px-2 inline-flex items-center gap-x-1 text-sm rounded-lg bg-layer border border-layer-line text-layer-foreground hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus">
                            <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg>
                            Destroy file upload
                          </button>
                          <button type="button" id="hs-auto-init-file-upload" class="py-1 px-2 inline-flex items-center gap-x-1 text-sm rounded-lg bg-surface border border-surface-line text-surface-foreground hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" disabled>
                            <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"></path><path d="M3 3v5h5"></path><path d="M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16"></path><path d="M16 16h5v5"></path></svg>
                            Reinitialize file upload
                          </button>
                        </div>

destroy.addEventListener('click', () => {
                                const {element} = HSFileUpload.getInstance(fileUpload, true);

element.destroy();

destroy.setAttribute('disabled', 'disabled');
                                autoInit.removeAttribute('disabled');
                              });

autoInit.addEventListener('click', () => {
                                HSFileUpload.autoInit();

autoInit.setAttribute('disabled', 'disabled');
                                destroy.removeAttribute('disabled');
                              });
                            })();
                          });
                        </script>

Install Dropzone.

Add Lodash and Dropzone to the page.