File Inputs

File inputs are used to receive files from the user.

Select a file

1<x-input.file id="file01" />

With Preview

You can also add a preview image to the file input by using the preview="<element-id>" attribute. This feature is only available for images.

Using the preview attribute, the initial image src attribute will be temporary saved. When selecting an image, the preview will be updated with the selected image. When removing the image, the preview will be reset to the initial image.

Select a file

1<img id="preview02" src="{{ $this->file02?->temporaryUrl() ?? Vite::image('avatar/01.jpg') }}" class="avatar radius-circle" style="width: 3rem; height: 3rem;">
2 
3<x-input.file id="file02" wire:model="file02" wire:loading max="200" preview="preview02" accept="image/*" />