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