{"name":"file-upload","title":"File Upload","description":"A dropzone and file picker for uploading files, with drag-and-drop and a list of accepted files.","installCommand":"bunx marko-ui add file-upload -y","usageTags":"<FileUpload>","importSnippet":"import FileUpload from \"@/components/ui/file-upload/file-upload.marko\";","usageSnippet":"<FileUpload filesChange(files) { /* ... */ }/>","tags":["FileUpload"],"parts":[],"props":[{"name":"accept","type":"Record<string, string[]> | FileMimeType | FileMimeType[] | undefined","required":false,"description":"The accept file types"},{"name":"acceptedFiles","type":"File[] | undefined","required":false,"description":"The controlled accepted files"},{"name":"allowDrop","type":"boolean | undefined","required":false,"default":"true","description":"Whether to allow drag and drop in the dropzone element"},{"name":"capture","type":"'user' | 'environment' | undefined","required":false,"description":"The default camera to use when capturing media"},{"name":"defaultAcceptedFiles","type":"File[] | undefined","required":false,"description":"The default accepted files when rendered.\nUse when you don't need to control the accepted files of the input."},{"name":"dir","type":"'ltr' | 'rtl' | undefined","required":false,"default":"ltr","description":"The document's text/writing direction."},{"name":"directory","type":"boolean | undefined","required":false,"description":"Whether to accept directories, only works in webkit browsers"},{"name":"disabled","type":"boolean | undefined","required":false,"description":"Whether the file input is disabled"},{"name":"getRootNode","type":"(() => ShadowRoot | Document | Node) | undefined","required":false,"description":"A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron."},{"name":"ids","type":"ElementIds | undefined","required":false,"description":"The ids of the elements. Useful for composition."},{"name":"invalid","type":"boolean | undefined","required":false,"description":"Whether the file input is invalid"},{"name":"locale","type":"string | undefined","required":false,"default":"en-US","description":"The current locale. Based on the BCP 47 definition."},{"name":"maxFiles","type":"number | undefined","required":false,"default":"1","description":"The maximum number of files"},{"name":"maxFileSize","type":"number | undefined","required":false,"default":"Infinity","description":"The maximum file size in bytes"},{"name":"minFileSize","type":"number | undefined","required":false,"default":"0","description":"The minimum file size in bytes"},{"name":"name","type":"string | undefined","required":false,"description":"The name of the underlying file input"},{"name":"preventDocumentDrop","type":"boolean | undefined","required":false,"default":"true","description":"Whether to prevent the drop event on the document"},{"name":"readOnly","type":"boolean | undefined","required":false,"description":"Whether the file input is read-only"},{"name":"required","type":"boolean | undefined","required":false,"description":"Whether the file input is required"},{"name":"transformFiles","type":"((files: File[]) => Promise<File[]>) | undefined","required":false,"description":"Function to transform the accepted files to apply transformations"},{"name":"translations","type":"IntlTranslations | undefined","required":false,"description":"The localized messages to use."},{"name":"validate","type":"((file: File, details: FileValidateDetails) => FileError[] | null) | undefined","required":false,"description":"Function to validate a file"}],"events":[{"name":"filesChange","arg":"FileUploadFileInfo[]"},{"name":"onFileAccept","arg":"FileAcceptDetails","description":"Function called when the file is accepted"},{"name":"onFileChange","arg":"FileChangeDetails","description":"Function called when the value changes, whether accepted or rejected"},{"name":"onFileReject","arg":"FileRejectDetails","description":"Function called when the file is rejected"}],"keyboard":[],"accessibilityNotes":[],"examples":[{"id":"file-upload-demo","title":"Basic","source":"import FileUpload from \"@marko-ui/shadcn/ui/file-upload/file-upload.marko\";\n\n<FileUpload/>","description":"Drag and drop files onto the dropzone, or click browse to pick them."},{"id":"file-upload-accept","title":"Accepted file types","source":"import FileUpload from \"@marko-ui/shadcn/ui/file-upload/file-upload.marko\";\n\n<FileUpload accept=\"image/*\" maxFiles=3/>","description":"Pass `accept` to restrict file types and `maxFiles` to cap how many can be selected."},{"id":"file-upload-max-size","title":"Max file size","source":"import FileUpload from \"@marko-ui/shadcn/ui/file-upload/file-upload.marko\";\n\n<FileUpload maxFileSize=1000000/>","description":"Pass `maxFileSize` (in bytes) to reject files above a size limit."},{"id":"file-upload-controlled","title":"Change callback","source":"import FileUpload from \"@marko-ui/shadcn/ui/file-upload/file-upload.marko\";\n\n<let/lastFiles=[] as { name: string; size: number; type: string }[]/>\n\n<p class=\"text-muted-foreground mb-4 text-sm\">\n  Files: ${lastFiles.map((file) => file.name).join(\", \") || \"none\"}\n</p>\n<FileUpload filesChange(files) { lastFiles = files; }/>","description":"Use `filesChange` to read the accepted files whenever the selection changes.","essential":true}],"importInstallCommand":"bun add @marko-ui/shadcn marko-zag","nativeAttributes":"input"}