logo
v2.5.8

Filepicker

This component invokes the default HTML File input but adds a few aesthetic options. 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. Large images will take a couple of seconds to render a preview.

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

It is possible to change the placeholder text and even mark the field as required.

Upload proof of payment *
        
            <x-bladewind.filepicker
                name="proof_of_payment"
                required="true"
                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 the size of files your users are allowed to upload by defining 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"  />
        
    

Edit Mode

Getting the Filepicker to work in edit mode is a little tricky, especially since people save files differently in their projects. Let's take a look at three ways files are probably stored in projects at the database level.

Example 1

id file_name date_created
13 user-profile-for-usr-13.jpg 2023-08-26 15:11:12

Example 2

id file_name date_created
13 /uploads/profiles/usr-13.jpg 2023-08-26 15:11:12

Example 3

id file_name date_created
13 https://cdn.bldw.io/images/usr-13.jpg 2023-08-26 15:11:12


You can tell from the examples above that FILE_NAME is saved in three different ways. Some save just the file name, others the file name and the directories they can be found in, others save the entire url to the file. These three variations make it difficult to display a preview in the Filepicker component when in edit mode. To solve this, when in edit mode, you will need to pass the full URL of the file in the url attribute. If the file passed is an image, a preview will be displayed.

        
            <x-bladewind.filepicker
                url="https://bladewindui.com/images/404.svg"
                placeholder="Profile Picture"
                name="dp" />
        
    

Profile Picture


Let us assume you have the filepicker as part of a longer form. In edit mode, the user can either select a new file, keep the current file or remove the file that was saved earlier. If the user decides to keep the current file, and edits other fields in the form, you will probably need to write the FILE_NAME value (from the examples above) back to your API or database. But mind you, the Filepicker does not know what your FILE_NAME is since the url attribute has the full http url to your file. In order for the Filepicker to send you back just the file name you intend to save to your API or database, pass just the FILE_NAME in the selected_value attribute. FILE_NAME here refers to the exact value of the file as received from your API or database.

        
            <x-bladewind.filepicker
                url="https://bladewindui.com/images/404.svg"
                selected_value="404.svg"
                placeholder="Profile Picture"
                name="dp" />
        
    

From the example above, if the user does not select a new file and submits the form, BladewindUI will send back "404.svg" as the value of the file since that was what it received in edit mode and the user made no changes.

In this case, the Filepicker creates a hidden input field with the value of selected_value as shown below.

        
            // note the name of the hidden field takes the name of the Filepicker and
            // prefixes it with selected_

            <input type="hidden" value="404.svg" name="selected_dp" />
        
    

We named our filepicker dp. When the form is submitted you will be able to access the file name using any of the ways below.

        
            $request->get('selected_dp');
            $request->input('selected_dp');
            $request->selected_dp;
        
    

Non Image Files

The preview below is displayed when the url passed in edit mode is not an image.

        
            <x-bladewind.filepicker
                url="https://bladewindui.com/files/2023-Financials.pdf"
                selected_value="2023-Financials.pdf"
                placeholder="Select Report"
                name="report" />
        
    

Select Report

Accessing Filepicker Values

The Filepicker component by default creates a regular HTML file input field using the name you pass to the component. Let us assume our filepicker is named "report", the following HTML file input is generated.

        
            <input type="file" name="report" class="bw-report " id="bw_report" accept=".pdf" />
        
    

You can retrieve the value of the above field when the form is submitted using any of the methods below:

        
            // vanilla PHP
            $file = $_FILES["report"];

            // the Laravel way
            $file = $request->file('report');
        
    

File As Base64

The BladewindUI Filepicker also generates a base64 version of the selected file and stores it in a hidden HTML textarea field. Still using our report example, the below textarea will be created.

Note the b64_ prefix used in the name of the textarea field. Also note, if a selected_value is passed in edit mode, there will be no base64 version generated unless the user explicitly selects a new file. The field will exist but be empty.
        
            <textarea class="b64-report" name="b64_report"></textarea>
        
    

You can retrieve the value of the above field when the form is submitted using any of the methods below:

        
            $file_b64 = $request->get('b64_report');
            $file_b64 = $request->input('b64_report');
            $file_b64 = $request->b64_report;
        
    

Value While In Edit Mode

The Edit Mode section has extensively highlighted this but in summary, if a selected_value is passed to the Filepicker in edit mode and the user makes no changes to the field (user does not select a new file), the following HTML hidden input field is generated.

Note the selected_ prefix used in the name of the input field.
        
            <input type="hidden" name="selected_report" class="selected_report" />
        
    

You can retrieve the value of the above field when the form is submitted using any of the methods below:

        
            $file = $request->get('selected_report');
            $file = $request->input('selected_report');
            $file = $request->selected_report;
        
    

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
selected_value blank File name when in edit mode
selected_value_class blank Relevant only when in edit mode and url is an image. This is CSS applied to the image preview.
url blank Useful in edit mode. Full path to the file to be displayed in the filepicker. If the url ends with an image file a preview is displayed, otherwise the selected_value will be displayed.
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"
                selected_value="404.svg"
                selected_value_class="h-72"
                url="https://bladewindui.com/images/404.svg" />
        
    
The source file for this component is available in resources > views > components > bladewind > filepicker.blade.php

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