This component wraps but beautifies the default HTML File input. It allows users to select files from their computer. If the selected file is an image you get to see a preview of the file. Heavy images will take a couple of seconds to render the preview.
<x-bladewind.filepicker name="logo" />
It is possible to change the placeholder text
<x-bladewind.filepicker name="proof_of_payment" placeholder="Upload proof of payment" />
The component allows you to restrict the type of files users can upload by setting the
You can either specify one or a comma separated list of any of the MIME types available here.
You can either specify MIME types or file extensions. You can have a comma separated mixture of file extensions and MIME types. Note however, the file extensions need to have the dot prefix. Example:
accepted_file_types="image/*, .pdf, .xlsx"
<x-bladewind.filepicker name="pdf_only" placeholder="Upload a PDF" accepted_file_types=".pdf" />
You can restrict how big the files users upload should be by adding the
The file size is measured in megabytes (mb) and you don't need to add the 'mb'. Just the number. The default max_file_size is 5 (5mb).
The component will display an error if the user uploads a file larger than what is specified in
If you expect your users to upload really huge files, remember to set this attribute so your users don't get restricted by the default of 5mb.
<x-bladewind.filepicker name="pdf_only" placeholder="Upload a PDF" max_file_size="1" accepted_file_types=".pdf" />
nameattribute on the filepicker.
The table below shows a comprehensive list of all the attributes available for the Filepicker component.
|name||bw-filepicker||Name for the filepicker. So if you named the filepicker
|accepted_file_types||audio/*, video/*, image/*, .pdf||One or a comma separated list of any of the mimetypes available here.|
|placeholder||Select a file||Placeholder text to display|
|required||false||Determines if the placeholder text should have an asterisk appended to it or not. Value needs to be set as a string not boolean.
<x-bladewind.filepicker name="profile_pic" required="false" placeholder="Choose a profile picture" accepted_file_types=".jpg, .png" />
resources > views > components > bladewind > filepicker.blade.php