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

Upload proof of payment
                        placeholder="Upload proof of payment"  />

Accept Only Specific File Types

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"

Upload a PDF
                        placeholder="Upload a PDF"
                        accepted_file_types=".pdf"  />

Restrict File Sizes

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.

Upload a PDF
                        placeholder="Upload a PDF"
                        accepted_file_types=".pdf"  />

To prevent erratic behaviour when using the filepicker multiple times on the same page, you should give each filepicker a unique name. You can do this by setting the name attribute on the filepicker.



Full List Of Attributes

The table below shows a comprehensive list of all the attributes available for the Filepicker component.

IMPORTANT: Projects running Laravel 8 please read this

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


Filepicker with all attributes defined

                        placeholder="Choose a profile picture"
                        accepted_file_types=".jpg, .png" />


The source file for this component is available in resources > views > components > bladewind > filepicker.blade.php