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.

Create a responsive UI block named "Dropzone Upload Form" that visually and behaviorally matches the Preline source block. Use the destination project's existing framework, Tailwind setup, semantic tokens, component primitives, icon system, routing/link conventions, and dark-mode strategy.

Implementation preflight:
- Exact public block reference: https://preline.co/blocks/forms/file-upload-forms/#dropzone-upload-form. Open this exact anchored block and inspect its Preview and HTML tabs when browsing is available; do not use neighboring examples or surrounding docs chrome as source.
- Before writing code, inspect the destination project's package manifest, Tailwind/theme configuration, global styles, app shell/container conventions, icon system, and existing components. Reuse or compose an existing implementation when it already represents the same source partial or behavior; do not duplicate its markup, state, assets, or interaction logic.
- If neither the public reference nor local source paths are accessible, use only the explicit source-derived details in this prompt. If those details are insufficient, request the source HTML instead of guessing from the block title or category.

Build only this source block. Do not add unrelated page chrome, marketing sections, dashboard widgets, extra cards, extra modals, placeholder states, or footer content unless they are present in the source block.

Source metadata:
- Catalog family: forms/file-upload-forms
- Block ID: dropzone-upload-form
- Source description: Dashed dropzone combines a centered upload prompt with supported file type text.
- Preview iframe: https://preline.co/blocks/forms/file-upload-forms/iframes/pro/dropzone-upload-form.html (repo path: blocks/forms/file-upload-forms/iframes/pro/dropzone-upload-form.html)
- Source markup reference:
  - partials/pro/admin-dashboard/sources/drag-n-drop.html

Use the source HTML tab and referenced partials as the source of truth. Preserve exact visible copy, content order, hierarchy, component density, spacing relationships, borders, radii, icons, status markers, dropdown/menu rows, form states, responsive order, and interaction content. If the source imports shared partials or assets, reuse those local components/assets when the destination can import them; otherwise recreate their visible structure faithfully from the source.

Token and Tailwind rules:
- Treat source token classes as semantic roles, not fixed class names to blindly copy.
- Map every source `primary` role to the destination project's current primary token/config/CSS variable. Active links, checked states, progress lines, focus rings, primary gradients, logo primary fills/strokes, and primary buttons must share that destination primary color.
- Do not hardcode Preline blue or emit `text-blue-*`, `bg-blue-*`, `border-blue-*`, `fill-blue-*`, `stroke-blue-*`, `from-blue-*`, `via-blue-*`, `to-blue-*`, or fixed blue hex/rgb values for primary roles unless the destination primary is explicitly blue.
- Before using source-only token classes such as `text-foreground-inverse`, `bg-layer`, `border-layer-line`, `bg-navbar`, `border-line-2`, `bg-dropdown`, or similar Preline tokens, inspect the destination Tailwind config, global CSS/theme variables, and existing components for an equivalent utility/token.
- Prefer existing destination utilities such as `text-white`, `text-primary-foreground`, `text-foreground`, `text-muted-foreground`, `bg-background`, `bg-card`, `bg-popover`, `border-border`, `bg-muted`, `bg-accent`, `ring-ring`, or app-specific tokens when they match the source role.
- If no equivalent exists, add the smallest project-appropriate token or utility before using it. Do not leave undefined source classes in the generated markup.

Asset and icon rules:
- Use exact source images, avatars, product media, branded SVGs, payment marks, channel logos, and app icons when the source provides them.
- Do not replace source assets with initials, emojis, generic icons, generated placeholders, or different stock media.
- Ordinary interface icons should match the destination icon system. If the project uses Lucide-style outline icons, keep the 24 viewBox, `fill="none"`, `stroke="currentColor"`, rounded caps/joins, and source stroke widths.
- Brand/source SVG shape is fixed content. Only map semantic colors such as primary fill/stroke to the destination token.

Behavior and accessibility:
- Preserve source interactions: links, buttons, dropdowns, tooltips, tabs, menus, drawers, modals, toggles, search, filters, form controls, validation states, loading/empty states, and open/closed defaults.
- For source behavior powered by Preline JS or a third-party package, inspect installed dependencies and existing primitives first. Reuse a destination primitive only when it can preserve the source geometry, states, accessibility, and behavior.
- Treat new dependencies as allowed by default unless the user, repository instructions, or package policy explicitly prohibit them. When no faithful equivalent exists, install/use the Preline UI runtime/plugin or the exact source third-party package; do not silently substitute ad hoc JavaScript or custom React state.
- Only under an explicit dependency prohibition may you implement a scoped framework-native equivalent. It must preserve keyboard and focus management, placement and layering, responsive behavior, and accessibility; static or simplified approximations are not acceptable.
- Use semantic HTML and accessible names. Keep `aria-current`, `aria-expanded`, `aria-haspopup`, `role`, labels, focus states, and keyboard behavior when the source exposes them or the destination primitive requires them.
- Desktop and mobile states must not overlap text, clip controls, or shift layout unexpectedly. Controls with icons, counters, badges, and labels should keep stable dimensions across hover/focus/active states.

Final QA:
- Compare the result against the source preview and HTML tab.
- Verify primary color follows the destination project, not Preline's default blue.
- Verify all emitted classes exist in the destination or are added deliberately.
- Verify responsive layout, focus states, dropdown/popover layering, long-text truncation, and source asset paths.
- Keep the final implementation scoped to this block and avoid unrelated refactors.

<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

Receipt Dropzone With Preview New Pro

Dropzone that reveals the uploaded file beneath it with a progress bar and remove action.

Create a responsive UI block named "Receipt Dropzone With Preview" that visually and behaviorally matches the Preline source block. Use the destination project's existing framework, Tailwind setup, semantic tokens, component primitives, icon system, routing/link conventions, and dark-mode strategy.

Implementation preflight:
- Exact public block reference: https://preline.co/blocks/forms/file-upload-forms/#receipt-dropzone-with-preview. Open this exact anchored block and inspect its Preview and HTML tabs when browsing is available; do not use neighboring examples or surrounding docs chrome as source.
- Before writing code, inspect the destination project's package manifest, Tailwind/theme configuration, global styles, app shell/container conventions, icon system, and existing components. Reuse or compose an existing implementation when it already represents the same source partial or behavior; do not duplicate its markup, state, assets, or interaction logic.
- If neither the public reference nor local source paths are accessible, use only the explicit source-derived details in this prompt. If those details are insufficient, request the source HTML instead of guessing from the block title or category.

Source metadata:
- Catalog family: forms/file-upload-forms
- Block ID: receipt-dropzone-with-preview
- Source description: Dropzone that reveals the uploaded file beneath it with a progress bar and remove action.
- Preview iframe: https://preline.co/blocks/forms/file-upload-forms/iframes/pro/receipt-dropzone-with-preview.html (repo path: blocks/forms/file-upload-forms/iframes/pro/receipt-dropzone-with-preview.html)
- Source markup reference:
  - partials/pro/finance-tracker/sources/receipt-upload.html

Block-specific fidelity rules:
- Preserve labels, helper text, validation/error states, required markers, input grouping, focus behavior, control sizes, option order, selected/disabled states, and submit/cancel hierarchy.
- For selects, comboboxes, radios, checkboxes, switches, and upload controls, keep source trigger/control geometry and do not normalize intentionally different controls into generic pills or cards.
- Source content inventory (from the source markup):
  - The block is a `relative` wrapper carrying the `data-hs-file-upload` config (`maxFiles: 1`, `singleton: true`, accepting `image/png`, `image/jpeg` and `application/pdf`).
  - The drop field sits on top: `p-4 flex items-center gap-x-4 bg-layer border border-dashed border-layer-line rounded-xl`, with a receipt illustration, `Drop a receipt here or browse` where `browse` is the file-upload trigger, and a muted second line.
  - The uploaded file card is rendered *behind* the drop field and slides down from under it, so it keeps `pt-6` and a negative top margin to tuck beneath the dashed edge.
  - Each file row shows the receipt thumbnail, the truncated file name with its extension, an emerald progress bar, the file size in `tabular-nums`, and a round remove button.
  - The reveal animation is a named keyframe (`hs-ft-receipt-in`, 450ms) that is disabled under `prefers-reduced-motion`; it lives in a separate style partial, not inline.
  - This is a live HSFileUpload/Dropzone instance — `data-hs-file-upload-preview` template, `data-hs-file-upload-trigger`, `data-dz-thumbnail`, `data-dz-name`, `data-dz-size` and `data-dz-remove` are all present and must be preserved.

<div class="relative" data-hs-file-upload='{
                      "url": "/upload",
                      "maxFiles": 1,
                      "singleton": true,
                      "acceptedFiles": "image/png,image/jpeg,application/pdf"
                    }'>
                      <template data-hs-file-upload-preview>
                        <div class="hs-ft-receipt-in p-3 pt-6 flex justify-between items-center gap-x-3 bg-surface border border-surface-line rounded-xl">
                          <div class="flex items-center gap-x-3">
                            <span class="relative shrink-0 w-9 h-10 rounded-md overflow-hidden">
                              <svg class="w-full h-full" viewBox="0 0 38 44" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                                <rect width="38" height="44" class="fill-surface-1 dark:fill-surface"/>
                                <path d="M9.5 8.55078C9.5 8.06527 10.1222 7.86465 10.4058 8.25873L12.7754 11.5514C12.9749 11.8287 13.3876 11.8287 13.5871 11.5514L16.4567 7.56394C16.6562 7.28668 17.0688 7.28668 17.2683 7.56394L20.1379 11.5514C20.3374 11.8287 20.7501 11.8287 20.9496 11.5514L23.8192 7.56394C24.0187 7.28668 24.4313 7.28668 24.6308 7.56394L27.5004 11.5514C27.6999 11.8287 28.1126 11.8287 28.3121 11.5514L31.1817 7.56394C31.3812 7.28668 31.7938 7.28668 31.9933 7.56394L34.8629 11.5514C35.0624 11.8287 35.4751 11.8287 35.6746 11.5514L38.0442 8.25873C38.3278 7.86465 38.95 8.06527 38.95 8.55079V44.5C38.95 44.7761 38.7261 45 38.45 45H10C9.72386 45 9.5 44.7761 9.5 44.5V8.55078Z" class="fill-layer dark:fill-surface-1"/>
                                <rect x="15.2" y="20" width="14.25" height="3" rx="1.5" class="fill-surface-1 dark:fill-surface"/>
                                <rect x="15.2" y="28" width="20.9" height="3" rx="1.5" class="fill-surface-1 dark:fill-surface"/>
                                <rect x="15.2" y="36" width="20.9" height="3" rx="1.5" class="fill-surface-1 dark:fill-surface"/>
                              </svg>

<button type="button" class="shrink-0 size-8 flex justify-center items-center bg-layer text-layer-foreground rounded-full hover:bg-layer-hover focus:outline-hidden focus:bg-layer-focus" data-hs-file-upload-remove>
                            <span class="sr-only">Remove receipt</span>
                            <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" aria-hidden="true"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>
                          </button>
                        </div>
                      </template>

<span class="grow">
                          <span class="block text-sm text-foreground">
                            Drop a receipt here or <span class="font-medium text-foreground">browse</span>
                          </span>
                          <span class="block mt-0.5 text-xs text-muted-foreground-1">
                            Upload a receipt or check and we’ll fill in the fields below for you.
                          </span>
                        </span>
                      </div>

<div class="min-w-0">
                              <p class="text-sm font-medium text-foreground">
                                <span class="truncate inline-block max-w-40 align-bottom">invoice-2026</span>.<span>pdf</span>
                              </p>

<button type="button" class="shrink-0 size-8 flex justify-center items-center bg-layer text-layer-foreground rounded-full hover:bg-layer-hover focus:outline-hidden focus:bg-layer-focus">
                            <span class="sr-only">Remove receipt</span>
                            <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" aria-hidden="true"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>
                          </button>
                        </div></div>
                    </div>

Open related finance tracker template

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

Create a responsive UI block named "Banner Image Upload Card" that visually and behaviorally matches the Preline source block. Use the destination project's existing framework, Tailwind setup, semantic tokens, component primitives, icon system, routing/link conventions, and dark-mode strategy.

Implementation preflight:
- Exact public block reference: https://preline.co/blocks/forms/file-upload-forms/#banner-image-upload-card. Open this exact anchored block and inspect its Preview and HTML tabs when browsing is available; do not use neighboring examples or surrounding docs chrome as source.
- Before writing code, inspect the destination project's package manifest, Tailwind/theme configuration, global styles, app shell/container conventions, icon system, and existing components. Reuse or compose an existing implementation when it already represents the same source partial or behavior; do not duplicate its markup, state, assets, or interaction logic.
- If neither the public reference nor local source paths are accessible, use only the explicit source-derived details in this prompt. If those details are insufficient, request the source HTML instead of guessing from the block title or category.

Source metadata:
- Catalog family: forms/file-upload-forms
- Block ID: banner-image-upload-card
- Source description: Banner upload card pairs one labeled file field with inline preview, progress, and delete actions.
- Preview iframe: https://preline.co/blocks/forms/file-upload-forms/iframes/pro/banner-image-upload-card.html (repo path: blocks/forms/file-upload-forms/iframes/pro/banner-image-upload-card.html)
- Source markup reference:
  - partials/pro/cms-admin/forms/content-file-upload.html
  - scripts/plugins/dropzone.html

Block-specific fidelity rules:
- Preserve labels, helper text, validation/error states, required markers, input grouping, focus behavior, control sizes, option order, selected/disabled states, and submit/cancel hierarchy.
- For selects, comboboxes, radios, checkboxes, switches, and upload controls, keep source trigger/control geometry and do not normalize intentionally different controls into generic pills or cards.
- Preserve row/list density, column meaning, trailing metadata/action gutters, truncation mechanics, sorting/filter controls, pagination, status icons, and empty/loading states.
- Text columns should truncate before reserved metadata/action lanes rather than wrapping under them or reaching the row edge.
- Source content inventory (from the source markup):
  - Preview column is `max-w-sm mx-auto`; the block is one field group whose visible label is `Banner image`.
  - The uploader is a Preline HSFileUpload instance: the wrapper carries `data-hs-file-upload` configured with `"url": "/upload"` and per-extension icon/class entries for `default`, `xls`, `zip`, and `csv`, and the page loads Dropzone.js from the shared plugin partial. Do not substitute a bare `<input type="file">`.
  - The trigger is `cursor-pointer p-4 flex bg-card border border-card-line rounded-lg` with `data-hs-file-upload-trigger`, containing the fixed 73x47 stroked file illustration at `size-10`, the text `Drop your image here or` followed inline by a primary `browse`, and helper text `Image size should be 1200x630px`.
  - The `<template data-hs-file-upload-preview>` row holds a `size-10` bordered icon/thumbnail tile, a truncated file name plus `.` plus extension, the file size line, a trash-icon `data-hs-file-upload-remove` button, an `h-2` rounded progress bar starting at `style="width: 0"` that flips to `hs-file-upload-complete:bg-green-500`, and a right-aligned value that starts at `0` followed by `%`.
  - On first load the `data-hs-file-upload-previews` container is empty, so no file row, thumbnail, or progress bar is visible until a file is added.
  - There is no card header and no submit/cancel button; the preview page's open-overlay-on-init script is iframe chrome, not part of the block.

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

Create a responsive UI block named "File and Folder Upload Form" that visually and behaviorally matches the Preline source block. Use the destination project's existing framework, Tailwind setup, semantic tokens, component primitives, icon system, routing/link conventions, and dark-mode strategy.

Implementation preflight:
- Exact public block reference: https://preline.co/blocks/forms/file-upload-forms/#file-and-folder-upload-form. Open this exact anchored block and inspect its Preview and HTML tabs when browsing is available; do not use neighboring examples or surrounding docs chrome as source.
- Before writing code, inspect the destination project's package manifest, Tailwind/theme configuration, global styles, app shell/container conventions, icon system, and existing components. Reuse or compose an existing implementation when it already represents the same source partial or behavior; do not duplicate its markup, state, assets, or interaction logic.
- If neither the public reference nor local source paths are accessible, use only the explicit source-derived details in this prompt. If those details are insufficient, request the source HTML instead of guessing from the block title or category.

Source metadata:
- Catalog family: forms/file-upload-forms
- Block ID: file-and-folder-upload-form
- Source description: One upload panel offers separate file, folder, and drag-and-drop entry options in card buttons.
- Preview iframe: https://preline.co/blocks/forms/file-upload-forms/iframes/pro/file-and-folder-upload-form.html (repo path: blocks/forms/file-upload-forms/iframes/pro/file-and-folder-upload-form.html)
- Source markup reference:
  - partials/pro/admin-dashboard/forms/files-upload-form.html

<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

Receipt Dropzone With Preview New Pro

Banner Image Upload Card Pro

File and Folder Upload Form Pro