File Input

Input field for file uploads.

Examples

File Upload

blade

<x-plume::form 
    formData="{ 'avatar': null }">
    <x-plume::form.file name="avatar" label="Upload Avatar" class="max-w-sm" model="avatar" />
</x-plume::form>

Immediate Upload

Files are uploaded immediately to a temporary storage endpoint as soon as they are selected. The main form then receives a file ID.

Note: On local environments, the progress bar might move very quickly until it reaches the "Processing..." state.

blade

<div class="space-y-4 w-full max-w-md">
    <x-plume::form  :formData="['avatar' => null]"
        action="/api/profile">
        <x-plume::form.file name="avatar" label="Instant Avatar Upload" upload-url="/api/upload"
            model="avatar" accept="image/*" />
        <x-plume::button type="submit" class="mt-4" ::disabled="busy || processing">
            <span x-text="busy ? 'Uploading...' : (processing ? 'Saving...' : 'Save Profile')">Save
                Profile</span>
        </x-plume::button>
    </x-plume::form>

    <p class="text-[10px] text-foreground/40 italic">Note: On local environments, the progress bar
        might move very quickly until it reaches the "Processing..." state.</p>
</div>

Multiple Files

blade

<x-plume::form 
    formData="{ 'gallery': [] }">
    <x-plume::form.file name="gallery" label="Upload Gallery" multiple class="max-w-md"
        model="gallery" />
</x-plume::form>

Images Only

blade

<x-plume::form 
    formData="{ 'photos': [] }">
    <x-plume::form.file name="photos" label="Images Only" accept="image/*" multiple
        class="max-w-md" model="photos" />
</x-plume::form>

Prop	Type	Default	Description
label	string	null	The label for the file input.
name	string	null	HTML name attribute.
id	string	null	HTML id attribute. Auto-generated if not provided.
model	string	null	AlpineJS model name. Stores the uploaded file ID(s).
multiple	bool	false	Allow selecting and uploading multiple files.
accept	string	null	Accepted file types (e.g., 'image/*', '.pdf').
uploadUrl	string	null	API endpoint for immediate pre-upload. If provided, files are uploaded as soon as they are selected.
onFileSelect	string	null	AlpineJS expression or function to call when files are selected.
onClear	string	null	AlpineJS expression or function to call when the file list is cleared.

Usage

blade

<x-plume::form >
    <x-plume::form.file name="file" label="File" model="file" />
</x-plume::form>