Profile: omarK-5

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