Browse Components
File Upload
Select, validate, and review files before uploading.
Basic
Select or drop files to review them. These examples keep files on your device and make no upload requests.
PDF, PNG, or JPEG. Up to 5 files, 5 MB each.
View Code
<div class="file-upload" data-file-upload data-max-size="5242880" data-max-files="5">
<div class="upload-dropzone">
<svg
xmlns="http://www.w3.org/2000/svg"
viewbox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.75"
stroke-linecap="round"
stroke-linejoin="round"
class="icon"
aria-hidden="true"
focusable="false"
>
<path d="M12 15V3m-5 5 5-5 5 5M4 16v3a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-3">
</path>
</svg>
<label for="attachments">
Choose Files or Drop Them Here
</label>
<p id="upload-help">
PDF, PNG, or JPEG. Up to 5 files, 5 MB each.
</p>
<input
id="attachments"
name="attachments"
type="file"
accept=".pdf,image/png,image/jpeg"
multiple
aria-describedby="upload-help"
>
</div>
</div>Image previews
Local raster image previews are released when files are removed.
PNG or JPEG. Up to 5 files, 5 MB each.
View Code
<div
class="file-upload"
data-file-upload
data-upload-preview
data-max-size="5242880"
data-max-files="5"
>
<div class="upload-dropzone">
<svg
xmlns="http://www.w3.org/2000/svg"
viewbox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.75"
stroke-linecap="round"
stroke-linejoin="round"
class="icon"
aria-hidden="true"
focusable="false"
>
<path d="M12 15V3m-5 5 5-5 5 5M4 16v3a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-3">
</path>
</svg>
<label for="attachments">
Choose Files or Drop Them Here
</label>
<p id="upload-help">
PNG or JPEG. Up to 5 files, 5 MB each.
</p>
<input
id="attachments"
name="attachments"
type="file"
accept="image/png,image/jpeg"
multiple
aria-describedby="upload-help"
>
</div>
</div>Single file
A new valid selection replaces the previous file.
PDF, PNG, or JPEG. One file, 5 MB each.
View Code
<div class="file-upload" data-file-upload data-max-size="5242880" data-max-files="1">
<div class="upload-dropzone">
<svg
xmlns="http://www.w3.org/2000/svg"
viewbox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.75"
stroke-linecap="round"
stroke-linejoin="round"
class="icon"
aria-hidden="true"
focusable="false"
>
<path d="M12 15V3m-5 5 5-5 5 5M4 16v3a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-3">
</path>
</svg>
<label for="attachments">
Choose a File or Drop Them Here
</label>
<p id="upload-help">
PDF, PNG, or JPEG. One file, 5 MB each.
</p>
<input
id="attachments"
name="attachments"
type="file"
accept=".pdf,image/png,image/jpeg"
aria-describedby="upload-help"
>
</div>
</div>Disabled
Disabled inputs cannot accept files or drops.
PDF, PNG, or JPEG. Up to 5 files, 5 MB each.
View Code
<div class="file-upload" data-file-upload data-max-size="5242880" data-max-files="5">
<div class="upload-dropzone">
<svg
xmlns="http://www.w3.org/2000/svg"
viewbox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.75"
stroke-linecap="round"
stroke-linejoin="round"
class="icon"
aria-hidden="true"
focusable="false"
>
<path d="M12 15V3m-5 5 5-5 5 5M4 16v3a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-3">
</path>
</svg>
<label for="attachments">
Choose Files or Drop Them Here
</label>
<p id="upload-help">
PDF, PNG, or JPEG. Up to 5 files, 5 MB each.
</p>
<input
id="attachments"
name="attachments"
type="file"
disabled
accept=".pdf,image/png,image/jpeg"
multiple
aria-describedby="upload-help"
>
</div>
</div>Form reset
Native form reset clears the selection and previews. Applications own actual upload submission.
View Code
<form>
<div class="file-upload" data-file-upload data-max-size="5242880" data-max-files="5">
<div class="upload-dropzone">
<svg
xmlns="http://www.w3.org/2000/svg"
viewbox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.75"
stroke-linecap="round"
stroke-linejoin="round"
class="icon"
aria-hidden="true"
focusable="false"
>
<path d="M12 15V3m-5 5 5-5 5 5M4 16v3a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-3">
</path>
</svg>
<label for="attachments">
Choose Files or Drop Them Here
</label>
<p id="upload-help">
PDF, PNG, or JPEG. Up to 5 files, 5 MB each.
</p>
<input
id="attachments"
name="attachments"
type="file"
accept=".pdf,image/png,image/jpeg"
multiple
aria-describedby="upload-help"
>
</div>
</div>
<button class="btn secondary" type="reset">
Reset Files
</button>
</form>Installation
Download these files into the matching paths in your project, or use Create to assemble a kit. Include each dependency once. Do not also load app.css.
<link rel="stylesheet" href="/library/assets/base.css">
<link rel="stylesheet" href="/library/assets/button.css">
<link rel="stylesheet" href="/library/assets/file-upload.css">
<script defer src="/library/assets/file-upload.js"></script>12,655 bytes CSS including base · 7,258 bytes runtime JavaScript
Usage
Start with real files
Keep a labeled native file input with a name, visible type and size limits, and multiple only when needed. Selecting files does not upload them.
Connect your own transport
Read upload:change detail.files or FormData and make your application request. Reflect real progress using layoutUpload.setStatus; handle retry, cancellation and server errors in your application.
Validate twice
Client checks help users correct mistakes. Validate file contents, size and permissions again on your server; accept is only a picker hint.
Release previews
Raster previews stay on the device. Call layoutUpload.destroy(root) before unmounting to revoke object URLs and release listeners.
Building with AI? The AI Manifest has these notes and the full contract. See the AI Guide.