File Upload generator
Attachment fields on cases, opportunities and custom objects rely on lightning-file-upload. Style the dropzone border, hover state and helper text so it is obvious the area accepts drag-and-drop.
Your changes autosave in this browser, and the link above reproduces this exact configuration for anyone you send it to.
Live preview
Generated code
<template>
<lightning-file-upload
label="Attach files"
name="fileUploader"
accept={acceptedFormats}
record-id={recordId}
onuploadfinished={handleUploadFinished}
class="studio-upload"
></lightning-file-upload>
</template>Design tips for file uploads
- Always state accepted file types and the size limit directly in the dropzone helper text.
- Use a dashed border, not a solid one — dashed borders are a near-universal "drop files here" convention.
- Give the dropzone a hover background change so drag-and-drop feels responsive before the drop even happens.