Input File Component

The Input File component provides a seamless file upload experience powered by Cloudinary. It supports custom labels, error handling, and automatic Livewire property updates.

Basic Usage

The simplest way to use the input-file component:

<x-input-file name="avatar" />

With Custom Label

Customize the upload button text using the label prop:

<x-input-file name="profile_image" label="Upload Profile Photo" />

Livewire Integration

Automatically update a Livewire component property when a file is uploaded using the target and componentId props:

<x-input-file 
    name="avatar" 
    label="Upload Avatar"
    target="avatarUrl" 
    :componentId="$this->getId()" />

In your Livewire component:

class ProfileSettings extends Component
{
    public string $avatarUrl = '';

    public function save()
    {
        // $this->avatarUrl will automatically contain the uploaded file URL
        $this->validate([
            'avatarUrl' => 'required|url',
        ]);
        
        auth()->user()->update([
            'avatar' => $this->avatarUrl,
        ]);
    }
}

Props Reference

Prop	Type	Default	Description
name	string	-	Input field name. Used for validation error display.
label	string|null	null	Text label for the default upload button. Defaults to "Upload File" if not provided and slot is empty.
error	bool	false	Manually set error state. When true, displays the component in an error state.
errorMessage	string|array|null	null	Custom error message(s) to display. Can be a string or array of strings. Overrides validation errors.
target	string|null	null	Livewire property name to update with the uploaded file URL. Requires componentId.
componentId	string|null	null	Livewire component ID. Use $this->getId() in Livewire components. Requires target.

Slots

Slot	Description
Default slot	Optional custom upload button content. When provided, replaces the default upload button. The slot content will be wrapped with the Cloudinary upload widget functionality.

References

Category	Path / Name	Description
Component	resources/views/components/input-file.blade.php	Input File component file
Package	cloudinary-labs/cloudinary-laravel	Cloudinary Laravel integration package