Layr
⌘K
Ctrl K
Design Systems
AI Designer
Account
Roadmap
Sign in
Twilio Paste - file-uploader
Getting started
Twilio Paste
Paste UI
Pro
Components
Account Switcher
Ai Chat Log
Alert
Alert Dialog
Anchor
Aspect Ratio
Avatar
Badge
Blockquote
Breadcrumb
Button
Button Group
Callout
Card
Chart Provider
Chat Composer
Chat Log
Checkbox
Code Block
Combobox
Corner Ornament
Data Grid
Date Picker
Description List
Detail Text
Disclosure
Display Heading
Display Pill Group
Editable Code Block
Example Text
File Picker
File Uploader
Flex
Form Layout
Form Pill Group
Grid
Heading
Help Text
Icon
In Page Navigation
Inline Code
Input
Keyboard Key
Label
List
Media Object
Menu
Meter
Minimizable Dialog
Modal
Multiselect Combobox
Page Header
Pagination
Paragraph
Popover
Product Switcher
Progress Bar
Progress Steps
Radio Button Group
Radio Group
Screen Reader Only
Select
Separator
Side Modal
Side Panel
Sidebar
Sidebar Navigation
Skeleton Loader
Slider
Spinner
Stack
Status Badge
Status Menu
Summary Detail
Switch
Table
Tabs
Textarea
Time Picker
Timeline
Toast
Tooltip
Topbar
Truncate
User Dialog
Visual Picker
<div class="example-section"> <div class="file-uploader-container" id="disabled-example"> <!-- Disabled example will be rendered here --> </div> </div> <h3>Loading File Uploader</h3> <p>Use the loading state of FileUploaderItem so the user doesn't move on before their action is complete or while the upload might still fail.</p> <div class="example-section"> <div class="file-uploader-container" id="loading-example"> <!-- Loading example will be rendered here --> </div> </div> <h3>Error File Uploader</h3> <p>If an upload fails or doesn't meet the acceptable criteria, use the File Uploader in its error state.</p> <div class="example-section"> <div class="file-uploader-container" id="error-example"> <!-- Error example will be rendered here --> </div> </div> <h2>Composition Notes</h2> <h3>File Uploader Label</h3> <p>Always include a Label with the File Uploader. Labels should clearly describe the file(s) being requested. They should be concise and descriptive, not instructional.</p> <h3>File Uploader Help Text</h3> <p>File limitations should be communicated to the user up front to help avoid errors, like uploading an incompatible file type or one that's too large.</p> <table> <thead> <tr> <th>Requirements</th> <th>Recommended phrasing</th> </tr> </thead> <tbody> <tr> <td>File type</td> <td>You can upload [x], [x] and [x] file formats.</td> </tr> <tr> <td>File size</td> <td>Files can be up to [file limit].</td> </tr> <tr> <td>Number of files</td> <td>You can upload up to [max #] files.</td> </tr> </tbody> </table> <h3>When to use File Uploader</h3> <div class="do-dont-grid"> <div class="do-card"> <div class="do-title">Do</div> <p>Use a File Uploader when you need users to upload multiple files.</p> </div> <div class="dont-card"> <div class="dont-title">Don't</div> <p>Use File Uploader for a single file upload if you're tight on UI space – use File Picker instead.</p> </div> </div> <div class="do-dont-grid"> <div class="do-card"> <div class="do-title">Do</div> <p>Always include a label with the File Uploader (use the FileUploaderLabel).</p> </div> <div class="dont-card"> <div class="dont-title">Don't</div> <p>Use FileUploader without FileUploaderLabel.</p> </div> </div> <h2 id="feedback">Feedback</h2> <p>Help us improve this component by providing feedback, asking questions on Slack, or updating this file on GitHub.</p> </div> <script> // Wait for components to load setTimeout(() => { if (window.FileUploaderComponents) { const { FileUploader, FileUploaderLabel, FileUploaderHelpText, FileUploaderDropzone, FileUploaderDropzoneText, FileUploaderItemsList, FileUploaderItem, FileUploaderErrorText, FileUploaderItemTitle, FileUploaderItemDescription, DownloadIcon, Button, Spinner } = window.FileUploaderComponents; // Default File Uploader Example const defaultContainer = document.getElementById("default-example"); if (defaultContainer) { defaultContainer.innerHTML = ` <div data-paste-element="FILE_UPLOADER"> <label data-paste-element="FILE_UPLOADER_LABEL">Upload documents</label> <div data-paste-element="FILE_UPLOADER_HELP_TEXT">You can upload PDF, DOC, and TXT file formats. Files can be up to 10MB.</div> <div data-paste-element="FILE_UPLOADER_DROPZONE"> <input type="file" multiple style="position: absolute; opacity: 0; pointer-events: none;" /> <div data-paste-element="FILE_UPLOADER_DROPZONE_TEXT"> <svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor"> <path d="M10 1l-5.5 6h3.5v9h4v-9h3.5l-5.5-6zm-7.5 14v2h15v-2h-15z"/> </svg> Choose files or drag and drop </div> </div> </div> `; } // Required File Uploader Example const requiredContainer = document.getElementById("required-example"); if (requiredContainer) { requiredContainer.innerHTML = ` <div data-paste-element="FILE_UPLOADER"> <label data-paste-element="FILE_UPLOADER_LABEL">Upload documents <span style="color: #D61F1F;">*</span></label> <div data-paste-element="FILE_UPLOADER_HELP_TEXT">You can upload PDF, DOC, and TXT file formats. Files can be up to 10MB.</div> <div data-paste-element="FILE_UPLOADER_DROPZONE"> <input type="file" multiple required style="position: absolute; opacity: 0; pointer-events: none;" /> <div data-paste-element="FILE_UPLOADER_DROPZONE_TEXT"> <svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor"> <path d="M10 1l-5.5 6h3.5v9h4v-9h3.5l-5.5-6zm-7.5 14v2h15v-2h-15z"/> </svg> Choose files or drag and drop </div> </div> </div> `; } // Disabled File Uploader Example const disabledContainer = document.getElementById("disabled-example"); if (disabledContainer) { disabledContainer.innerHTML = ` <div data-paste-element="FILE_UPLOADER" style="opacity: 0.5; pointer-events: none;"> <label data-paste-element="FILE_UPLOADER_LABEL">Upload documents</label> <div data-paste-element="FILE_UPLOADER_HELP_TEXT">You can upload PDF, DOC, and TXT file formats. Files can be up to 10MB.</div> <div data-paste-element="FILE_UPLOADER_DROPZONE" style="background-color: #F4F4F6; border-color: #C4C8D6;"> <input type="file" multiple disabled style="position: absolute; opacity: 0; pointer-events: none;" /> <div data-paste-element="FILE_UPLOADER_DROPZONE_TEXT" style="color: #8891AA;"> <svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor"> <path d="M10 1l-5.5 6h3.5v9h4v-9h3.5l-5.5-6zm-7.5 14v2h15v-2h-15z"/> </svg> Choose files or drag and drop </div> </div> </div> `; } // Loading File Uploader Example const loadingContainer = document.getElementById("loading-example"); if (loadingContainer) { loadingContainer.innerHTML = ` <div data-paste-element="FILE_UPLOADER"> <label data-paste-element="FILE_UPLOADER_LABEL">Upload documents</label> <div data-paste-element="FILE_UPLOADER_HELP_TEXT">You can upload PDF, DOC, and TXT file formats. Files can be up to 10MB.</div> <div data-paste-element="FILE_UPLOADER_DROPZONE"> <input type="file" multiple style="position: absolute; opacity: 0; pointer-events: none;" /> <div data-paste-element="FILE_UPLOADER_DROPZONE_TEXT"> <svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor"> <path d="M10 1l-5.5 6h3.5v9h4v-9h3.5l-5.5-6zm-7.5 14v2h15v-2h-15z"/> </svg> Choose files or drag and drop </div> </div> <div data-paste-element="FILE_UPLOADER_ITEMS_LIST" style="margin-top: 16px;"> <div data-paste-element="FILE_UPLOADER_ITEM" style="display: flex; align-items: center; padding: 12px; border: 1px solid #E1E3EA; border-radius: 8px; background-color: white;"> <div style="margin-right: 12px;"> <div style="width: 16px; height: 16px; border: 2px solid #0263E0; border-top: 2px solid transparent; border-radius: 50%; animation: spin 1s linear infinite;"></div> </div> <div style="flex: 1;"> <div data-paste-element="FILE_UPLOADER_ITEM_TITLE" style="font-weight: 600; color: #121C2D;">document.pdf</div> <div data-paste-element="FILE_UPLOADER_ITEM_DESCRIPTION" style="color: #606B85; font-size: 14px;">Uploading...</div> </div> </div> </div> </div> <style> @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } </style> `; } // Error File Uploader Example const errorContainer = document.getElementById("error-example"); if (errorContainer) { errorContainer.innerHTML = ` <div data-paste-element="FILE_UPLOADER"> <label data-paste-element="FILE_UPLOADER_LABEL">Upload documents</label> <div data-paste-element="FILE_UPLOADER_HELP_TEXT">You can upload PDF, DOC, and TXT file formats. Files can be up to 10MB.</div> <div data-paste-element="FILE_UPLOADER_DROPZONE" style="border-color: #D61F1F;"> <input type="file" multiple style="position: absolute; opacity: 0; pointer-events: none;" /> <div data-paste-element="FILE_UPLOADER_DROPZONE_TEXT"> <svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor"> <path d="M10 1l-5.5 6h3.5v9h4v-9h3.5l-5.5-6zm-7.5 14v2h15v-2h-15z"/> </svg> Choose files or drag and drop </div> </div> <div data-paste-element="FILE_UPLOADER_ERROR_TEXT" style="color: #D61F1F; font-size: 14px; margin-top: 8px;"> Something went wrong. Try uploading your files again. </div> <div data-paste-element="FILE_UPLOADER_ITEMS_LIST" style="margin-top: 16px;"> <div data-paste-element="FILE_UPLOADER_ITEM" style="display: flex; align-items: center; padding: 12px; border: 1px solid #D61F1F; border-radius: 8px; background-color: #FEF7F7;"> <div style="margin-right: 12px;"> <svg width="16" height="16" viewBox="0 0 20 20" fill="#D61F1F"> <path d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"/> </svg> </div> <div style="flex: 1;"> <div data-paste-element="FILE_UPLOADER_ITEM_TITLE" style="font-weight: 600; color: #121C2D;">large-document.pdf</div> <div data-paste-element="FILE_UPLOADER_ITEM_DESCRIPTION" style="color: #D61F1F; font-size: 14px;">This file size is too big. You can upload files up to 10MB.</div> </div> <button style="background: none; border: none; color: #606B85; cursor: pointer; padding: 4px;"> <svg width="16" height="16" viewBox="0 0 20 20" fill="currentColor"> <path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"/> </svg> </button> </div> </div> </div> `; } } }, 1000); </script></body></html>' width="100%" height="1200" frameborder="0" sandbox="allow-scripts allow-same-origin allow-popups">