A dropzone form control that enables users to drag and drop files onto it.
<nve-dropzone name="files" style="--min-height: 200px"></nve-dropzone>
Installation
<script type="module">
import '@nvidia-elements/core/dropzone/define.js';
</script>
<nve-dropzone name="files" style="--min-height: 200px"></nve-dropzone>
Icon
Dropzone with custom icon slot showing visual feedback on hover and highlight states.
<style>
nve-dropzone nve-icon {
--color: red;
background: var(--nve-sys-layer-canvas-accent-background);
}
nve-dropzone[highlighted] nve-icon,
nve-dropzone:hover nve-icon {
--color: var(--nve-sys-text-white-color);
background: var(--nve-sys-accent-primary-background);
}
</style>
<nve-dropzone name="files">
<nve-icon slot="icon" name="document"></nve-icon>
</nve-dropzone>
Dropzone integrated with form validation showing file type and size constraint errors.
<form id="form-demo" nve-layout="column gap:lg">
<section>
<nve-control>
<nve-dropzone name="files" accept="image/gif, image/jpeg, image/png" max-file-size="1048576"></nve-dropzone>
<nve-control-message error="typeMismatch"
>Unsupported file type — this upload only accepts images</nve-control-message
>
<nve-control-message error="rangeOverflow">File too big - maximum 1.00 MB allowed</nve-control-message>
</nve-control>
</section>
<nve-button type="submit">submit</nve-button>
</form>
<script type="module">
const form = document.querySelector("#form-demo");
const dropzone = document.querySelector("#form-demo nve-dropzone");
dropzone.addEventListener("change", (e) => {
console.log("change", e.target.value);
const files = e.target.value;
console.log("Validity:", e.target.validity);
console.log("Validation Message:", e.target.validationMessage);
});
form.addEventListener("submit", (e) => {
e.preventDefault();
const formData = new FormData(e.target);
const files = formData.getAll("files");
if (form.checkValidity()) {
console.log("Form submitted successfully!");
} else {
console.log("Form validation failed");
}
});
</script>
Release Status
All elements and features go through 3 phases of stability, pre-release, beta and stable.
pre-release
Docs Preview
API Documentation
Fully Themeable
beta
Robust unit test coverages
Passed API Review
Passed Designer VQA Review
Included in library package
stable
No known outstanding AA WCAG issues
No known outstanding performance issues
Adapts to different screen/container sizes
No breaking API changes for at least 90 days