Skip Navigation

[Resolved] populate drop-down list with custom field type file

This thread is resolved. Here is a description of the problem and solution.

Problem:

You need to create a dropdown in Toolset that lists custom field file types and allows users to download the selected file.

Solution:

Follow these steps to achieve this:

Ensure Custom Fields Exist:

- In Toolset > Custom Fields, create a custom field group containing a File Upload field (e.g., custom_file).
- Assign the field group to the appropriate post type.

Enable Legacy Views:

- Navigate to Toolset > Settings > General.
- Under Editing Experience, enable the option "Show both the legacy and Blocks interface and let me choose which to use for each item I build."
- Reload the page and go to Toolset > Views.

Create a View to Display Files:

- Go to Toolset > Views > Add New View.
Select the post type that contains the uploaded files.
- Add a Query Filter to ensure only posts with files are displayed (optional).
- In the Loop Editor, add the following HTML for the dropdown:

<select id="file-download-dropdown">
    [wpv-items-found]
        <option value="[types field='custom_file' output='raw'][/types]">[wpv-post-title]</option>
    [/wpv-items-found]
    [wpv-no-items-found]
        <option value="">No files available</option>
    [/wpv-no-items-found]
</select>
<button id="download-button">Download</button>

Add JavaScript for File Download:

In the content template add a Javascript for download:

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const dropdown = document.getElementById('file-download-dropdown');
        const button = document.getElementById('download-button');

        button.addEventListener('click', function () {
            const selectedFile = dropdown.value;
            if (selectedFile) {
                window.location.href = selectedFile;
            } else {
                alert('Please select a file to download.');
            }
        });
    });
</script>

Embed the View:

Use the Toolset-generated View shortcode and insert it into the page:

[wpv-view name="your-view-name"]

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

This topic contains 1 reply, has 1 voice.

Last updated by Christopher Amirian 2 weeks ago.

Assisted by: Christopher Amirian.

Author
Posts
#2791865

Tell us what you are trying to do?
I need to make a dropdown to which lists some custom field file type and when we select it from the dropdown it download it
Are you following any documentation?

Is there a similar example that we can see?
nope
What is the link to your site?

#2791907

Christopher Amirian
Supporter

Languages: English (English )

Hi,

Welcome to Toolset support. You can follow the steps below:

In Toolset, ensure you have created a custom field group that includes a file field where the files are uploaded. For example, you might call this field custom_file.

Enable the legacy views:

- Go to "Toolset > Settings > General".
- Find the "Editing experience" section.
- Check the "Show both the legacy and Blocks interface and let me choose which to use for each item I build" checkbox.
- Reload the browser page.
- Go to the newly added "Toolset > Views" menu.
- There you will be able to edit the views.

For more information:
https://toolset.com/course-lesson/enabling-legacy-version-of-toolset-views/

Create a View to List Files

Navigate to Toolset > Views and create a new View.

In the View, set the Content Selection to the post type containing the custom field files.

Add a Query Filter to include only posts where the file field is not empty (optional but useful).

In the Loop Editor, create a dropdown <select> structure. Use the file custom field URL for the value attribute and the file name for the visible text. For example:

<select id="file-download-dropdown">
    [wpv-items-found]
        <option value="[types field='custom_file' output='raw'][/types]">[wpv-post-title]</option>
    [/wpv-items-found]
    [wpv-no-items-found]
        <option value="">No files available</option>
    [/wpv-no-items-found]
</select>
<button id="download-button">Download</button>

Add JavaScript for Download Functionality

Add a small JavaScript snippet to handle the dropdown's onchange event and trigger the file download when the button is clicked.

Add this script in Toolset > Content Templates or the View Editor:

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const dropdown = document.getElementById('file-download-dropdown');
        const button = document.getElementById('download-button');

        button.addEventListener('click', function () {
            const selectedFile = dropdown.value;
            if (selectedFile) {
                window.location.href = selectedFile;
            } else {
                alert('Please select a file to download.');
            }
        });
    });
</script>

Use the Toolset-generated shortcode for your View and insert it on the page where you want the dropdown to appear.

Thanks.