Tailwind CSS File Upload Forms Blocks

All Blocks
Application UI
Forms
File Upload Forms

File Upload Forms

File upload forms for drag-and-drop fields, banner upload cards, and files app pickers.

Dropzone Upload Form Pro

Dashed dropzone combines a centered upload prompt with supported file type text.

<div class="space-y-2">
                      <label class="block block mb-2 text-sm font-medium text-foreground">
                        Upload form
                      </label>
                      <div class="p-12 flex justify-center bg-layer border border-dashed border-layer-line rounded-xl">
                        <div class="text-center">
                          <svg class="shrink-0 w-16 text-muted-foreground mx-auto" width="73" height="47" viewBox="0 0 73 47" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M54.519 40.4773V6.76876C54.519 3.92686 52.2121 1.62305 49.3664 1.62305H22.7076C19.8619 1.62305 17.555 3.92686 17.555 6.76876V40.4773M54.519 40.4773C54.519 43.3192 52.2121 45.6231 49.3664 45.6231H22.7076C19.8619 45.6231 17.555 43.3192 17.555 40.4773M54.519 40.4773L54.5189 34.6563L48.6564 28.3566L43.2612 34.6373C42.4421 35.5908 40.9662 35.5955 40.141 34.6472L30.3406 23.3844L17.555 36.9154V40.4773M6.20483 9.59424L17.707 7.6798V42.5188L12.6457 43.5828C9.25658 44.2954 5.94238 42.0892 5.29702 38.691L1.14643 16.8357C0.500082 13.4322 2.78322 10.1637 6.20483 9.59424ZM65.8691 9.59424L54.3669 7.6798V42.5188L59.4282 43.5828C62.8173 44.2954 66.1316 42.0892 66.7769 38.691L70.9274 16.8357C71.5738 13.4322 69.2907 10.1637 65.8691 9.59424ZM45.0584 15.3561C45.0584 17.7228 43.1372 19.6413 40.7673 19.6413C38.3974 19.6413 36.4762 17.7228 36.4762 15.3561C36.4762 12.9894 38.3974 11.0708 40.7673 11.0708C43.1372 11.0708 45.0584 12.9894 45.0584 15.3561Z" stroke="currentColor" stroke-width="2"/>
                          </svg>

<div class="mt-4 flex flex-wrap justify-center text-sm/6 text-muted-foreground-1">
                            <span class="pe-1 font-medium text-foreground">
                              Drop your files here or
                            </span>
                            <label for="hs-pro-dactc" class="relative cursor-pointer bg-transparent 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">
                              <span>browse</span>
                              <input id="hs-pro-dactc" type="file" class="sr-only">
                            </label>
                          </div>

Open related admin dashboard template

Banner upload card pairs one labeled file field with inline preview, progress, and delete actions.

<div>
                    <label class="block mb-2 font-medium text-sm text-foreground">
                      Banner image
                    </label>
  
                    <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-solid border-card-line rounded-lg">
                          <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 border border-card-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="flex items-center gap-x-3 whitespace-nowrap">
                            <div class="flex w-full h-2 bg-secondary rounded-full overflow-hidden" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" data-hs-file-upload-progress-bar>
                              <div class="flex flex-col justify-center rounded-full overflow-hidden bg-primary text-xs text-primary-foreground text-center whitespace-nowrap transition-all duration-500 hs-file-upload-complete:bg-green-500" style="width: 0" data-hs-file-upload-progress-bar-pane></div>
                            </div>
                            <div class="w-10 text-end">
                              <span class="text-sm text-foreground">
                                <span data-hs-file-upload-progress-bar-value>0</span>%
                              </span>
                            </div>
                          </div>
                        </div>
                      </template>
  
                      <div class="cursor-pointer p-4 flex bg-card border border-card-line rounded-lg" data-hs-file-upload-trigger>
                        <div class="flex items-center gap-4">
                          <svg class="shrink-0 size-10 text-foreground" width="73" height="47" viewBox="0 0 73 47" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M54.519 40.4773V6.76876C54.519 3.92686 52.2121 1.62305 49.3664 1.62305H22.7076C19.8619 1.62305 17.555 3.92686 17.555 6.76876V40.4773M54.519 40.4773C54.519 43.3192 52.2121 45.6231 49.3664 45.6231H22.7076C19.8619 45.6231 17.555 43.3192 17.555 40.4773M54.519 40.4773L54.5189 34.6563L48.6564 28.3566L43.2612 34.6373C42.4421 35.5908 40.9662 35.5955 40.141 34.6472L30.3406 23.3844L17.555 36.9154V40.4773M6.20483 9.59424L17.707 7.6798V42.5188L12.6457 43.5828C9.25658 44.2954 5.94238 42.0892 5.29702 38.691L1.14643 16.8357C0.500082 13.4322 2.78322 10.1637 6.20483 9.59424ZM65.8691 9.59424L54.3669 7.6798V42.5188L59.4282 43.5828C62.8173 44.2954 66.1316 42.0892 66.7769 38.691L70.9274 16.8357C71.5738 13.4322 69.2907 10.1637 65.8691 9.59424ZM45.0584 15.3561C45.0584 17.7228 43.1372 19.6413 40.7673 19.6413C38.3974 19.6413 36.4762 17.7228 36.4762 15.3561C36.4762 12.9894 38.3974 11.0708 40.7673 11.0708C43.1372 11.0708 45.0584 12.9894 45.0584 15.3561Z" stroke="currentColor" stroke-width="2"/>
                          </svg>
  
                          <div class="grow">
                            <div class="inline-flex flex-wrap gap-1 text-sm/6 text-foreground">
                              Drop your image here or
                              <span class="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-within:ring-offset-2">browse</span>
                            </div>
          
                            <p class="text-xs text-muted-foreground-1">
                              Image size should be 1200x630px
                            </p>
                          </div>
                        </div>
                      </div>
  
                      <div class="mt-4 space-y-2 empty:mt-0" data-hs-file-upload-previews></div>
                    </div>
                  </div>

File and Folder Upload Form Pro

One upload panel offers separate file, folder, and drag-and-drop entry options in card buttons.

<div class="px-4 md:py-8 min-h-56 relative w-full flex flex-col justify-center items-center text-center gap-y-5 bg-layer border border-dashed border-layer-line rounded-xl">
                      <div class="flex items-center gap-1">
                        <span class="font-medium text-foreground">
                          Drop files here or
                        </span>
                        <label for="hs-pro-dumfct" class="cursor-pointer underline underline-offset-4 decoration text-primary hover:text-primary-hover hover:decoration-2 focus:outline-hidden">
                          browse files
                        </label>
                        <input id="hs-pro-dumfct" type="file" class="sr-only" name="hs-pro-dumfct">
                      </div>

<div class="flex flex-wrap justify-center items-center gap-3">
                        
                        <label for="hs-pro-dumfctflu" class="group min-w-32 h-26 flex flex-col justify-center items-center gap-y-2 bg-layer rounded-xl cursor-pointer hover:bg-muted-hover focus:outline-hidden">
                          <span class="flex shrink-0 justify-center items-center size-8 bg-surface-1 text-surface-foreground rounded-full">
                            <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="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/><path d="M12 12v6"/><path d="m15 15-3-3-3 3"/></svg>
                          </span>
                          <span class="text-xs text-muted-foreground-2">
                            File upload
                          </span>
                        </label>
                        <input id="hs-pro-dumfctflu" type="file" class="sr-only" name="hs-pro-dumfctflu">

<label for="hs-pro-dumfctfru" class="group min-w-32 h-26 flex flex-col justify-center items-center gap-y-2 bg-layer rounded-xl cursor-pointer hover:bg-muted-hover focus:outline-hidden">
                          <span class="flex shrink-0 justify-center items-center size-8 bg-surface-1 text-surface-foreground rounded-full">
                            <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="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/><path d="M12 10v6"/><path d="m9 13 3-3 3 3"/></svg>
                          </span>
                          <span class="text-xs text-muted-foreground-2">
                            Folder upload
                          </span>
                        </label>
                        <input id="hs-pro-dumfctfru" type="file" class="sr-only" name="hs-pro-dumfctfru">

<label for="hs-pro-dumfctdnd" class="group min-w-32 h-26 hidden md:flex flex-col justify-center items-center gap-y-2 bg-layer rounded-xl cursor-pointer hover:bg-muted-hover focus:outline-hidden">
                          <span class="flex shrink-0 justify-center items-center size-8 bg-surface-1 text-surface-foreground rounded-full">
                            <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="m5 12 7-7 7 7"/><path d="M12 19V5"/></svg>
                          </span>
                          <span class="text-xs text-muted-foreground-2">
                            Drag-n-Drop
                          </span>
                        </label>
                        <input id="hs-pro-dumfctdnd" type="file" class="sr-only" name="hs-pro-dumfctdnd">
                      </div>
                    </div>

File Upload Forms

Dropzone Upload Form Pro

Banner Image Upload Card Pro

File and Folder Upload Form Pro