Filepicker

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.

Select a file

                
                    <x-bladewind.filepicker name="logo" />

It is possible to change the placeholder text

Upload proof of payment

                
                    <x-bladewind.filepicker
                        name="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

                
                    <x-bladewind.filepicker
                        name="pdf_only"
                        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

                
                    <x-bladewind.filepicker
                        name="pdf_only"
                        placeholder="Upload a PDF"
                        max_file_size="1"
                        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

                
                    <x-bladewind.filepicker
                        name="profile_pic"
                        required="false"
                        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