bladewindUI
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 accepted_file_types
attribute.
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 max_file_size
attribute.
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 max_file_size
.
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" />
name
attribute on the filepicker.
The table below shows a comprehensive list of all the attributes available for the Filepicker component.
Option | Default | Available Values |
---|---|---|
name | bw-filepicker | Name for the filepicker. So if you named the filepicker profile_pic , the resulting html will be
<input type="file" class="bw-profile_pic" name="profile_pic" ../> |
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.true false |
<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