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.

        
            <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"

        
            <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.

        
            <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

Example 2

Example 3

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" />
        
    

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" />
        
    

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.

        
            <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.

        
            <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.

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" />