mds components
mds:file-upload
Drag-and-drop uploads — an open version of a Flux Pro component.
<mds:file-upload name="photos" label="Upload images" description="You can pick several files at once." accept="image/*" multiple class="max-w-md">
<mds:file-upload.dropzone
heading="Drop your images here or click to browse"
text="JPG, PNG or GIF up to 10 MB"
/>
</mds:file-upload>Inline
A compact single-row dropzone, with an optional upload progress bar.
<div class="w-full max-w-md space-y-4">
<mds:file-upload name="invoice" label="Compact" accept="application/pdf">
<mds:file-upload.dropzone heading="Drop a file, or click to choose" text="PDF only, up to 5 MB" inline />
</mds:file-upload>
<mds:file-upload name="attachment" label="With a progress bar">
<mds:file-upload.dropzone heading="Add an attachment" text="Any format up to 20 MB" inline with-progress />
</mds:file-upload>
</div>File list
mds:file-item renders the chosen files. Give it a byte count and it formats the size — "159 KB" here, Persian units under a Persian config.
Profile_pic.jpg
159 KB
archive.zip
This file is over the 10 MB limit.
<div class="w-full max-w-md space-y-2">
<mds:file-item heading="Profile_pic.jpg" image="https://picsum.photos/seed/phone/80/80" :size="162400">
<x-slot name="actions">
<mds:file-item.remove label="Remove Profile_pic.jpg" />
</x-slot>
</mds:file-item>
<mds:file-item heading="archive.zip" text="This file is over the 10 MB limit." icon="exclamation-triangle" invalid>
<x-slot name="actions">
<mds:file-item.remove label="Remove archive.zip" />
</x-slot>
</mds:file-item>
</div>Error and disabled
The selected file is over the size limit.
<div class="w-full max-w-md space-y-4">
<mds:file-upload name="broken" label="With a validation error" error="The selected file is over the size limit.">
<mds:file-upload.dropzone heading="Product image" text="JPG or PNG up to 2 MB" inline />
</mds:file-upload>
<mds:file-upload label="Disabled" disabled>
<mds:file-upload.dropzone heading="Uploading is unavailable" text="Place the order first" inline />
</mds:file-upload>
</div>Custom uploader
Any markup inside mds:file-upload gets the full upload behaviour. Style the states with the in-data-dragging: and in-data-loading: variants.
<mds:file-upload name="avatar" accept="image/*">
<div class="relative flex size-20 cursor-pointer items-center justify-center rounded-full border border-zinc-200 bg-zinc-100 transition-colors hover:bg-zinc-200 in-data-dragging:border-accent dark:border-white/10 dark:bg-white/10">
<mds:icon icon="user" class="text-zinc-500 dark:text-zinc-400" />
<div class="absolute bottom-0 end-0 rounded-full bg-white dark:bg-zinc-800">
<mds:icon icon="arrow-up-circle" class="size-5 text-zinc-500 dark:text-zinc-400" />
</div>
</div>
</mds:file-upload>Persian output
config('mds.persian_digits') — on by default in a real app, off in these docs — switches the digits and the built-in strings (the dropzone's default heading, the remove button's label, the size units) to Persian. :fa="true" flips the upload progress on mds:file-upload and the size on mds:file-item; the dropzone has no fa prop, so this example passes its heading in Persian directly.
گوشی-گلکسی.jpg
۱۵۹ کیلوبایت
<div class="w-full max-w-md space-y-4">
<mds:file-upload name="photos" label="بارگذاری تصاویر" accept="image/*" multiple :fa="true">
<mds:file-upload.dropzone
heading="فایلها را اینجا رها کنید یا کلیک کنید"
text="JPG، PNG یا GIF تا ۱۰ مگابایت"
/>
</mds:file-upload>
<mds:file-item heading="گوشی-گلکسی.jpg" image="https://picsum.photos/seed/phone/80/80" :size="162400" :fa="true">
<x-slot name="actions">
<mds:file-item.remove label="حذف فایل" />
</x-slot>
</mds:file-item>
</div>Reference
mds:file-upload
| Prop | Description |
|---|---|
| name | Field name, or the Livewire property to upload into. |
| label | Field label. |
| description | Smaller text under the label. |
| accept | Accepted MIME types or extensions. |
| multiple | Allows several files. Default: false. |
| error | Validation message shown under the control. |
| invalid | Marks the control as invalid. |
| disabled | Disables the control. |
| fa | Persian digits in the upload progress. Default: config('mds.persian_digits'). |
| wire:model | Binds to a Livewire property for real uploads. |
mds:file-upload.dropzone
| Prop | Description |
|---|---|
| heading | Main line inside the dropzone. Default: "Drop a file here or click to browse", or the Persian equivalent — follows the config. |
| text | Supporting line, usually the accepted types and size. |
| icon | Icon name. Default: cloud-arrow-up. |
| inline | Compact single-row layout. Default: false. |
| with-progress | Shows the Livewire upload progress bar. Default: false. |
mds:file-item
| Prop | Description |
|---|---|
| heading | File name. |
| text | Secondary line. Derived from size when absent. |
| size | Byte count, formatted into a readable size — "159 KB", or ۱۵۹ کیلوبایت in Persian. |
| image | Thumbnail URL. |
| icon | Icon when there is no thumbnail. Default: document. |
| invalid | Marks the file as rejected. |
| fa | Persian digits and size units. Default: config('mds.persian_digits'). |
| Slot | Description |
|---|---|
| actions | Buttons on the trailing edge, e.g. remove. |
mds:file-item.remove
| Prop | Description |
|---|---|
| label | Accessible label. Default: "Remove file", or حذف فایل in Persian. |
| icon | Icon name. Default: x-mark. |