How do you create a dropdown list that allows users to download a selection of document files?

I’d like to create a dropdown list entitled ‘Download PDF’. The dropdown will have 3 items. ‘PDF 1’, ‘PDF 2’ and ‘PDF 3’. When the user selects the item, the relevant PDF would then be downloaded. Any help with this much appreciated.

Hi barry.

I took the liberty to make a tutorial for you.
Take a look at my webpage.
[https://volkaertskristof.wixsite.com/helpcenter/downloadusingdropdown](https://volkaertskristof.wixsite.com/helpcenter/downloadusingdropdown

Hope)

Hope this is what you are looking for.

Kind regards,
Kristof.

Hi Kristof
Thanks very much for your help! I’ve put in the example from your tutorial and it works great. However, I’ve created a dropdown with 3 items, and they all download the same PDF file.

To give you a bit more detail. I have a collection of songs (for guitar playing) set up and would like to give the users the opportunity to download the sheetmusic PDF for each song with either guitar track only or with guitar track and vocal track. Presumably these files need to be in different columns of each row?
Kind regards
Barry

I’m struggling with this, the sample from Kristof fixed the dropdown so now users can select their language, but it’s not downloading the file once the language is selected and all the other conversations on this forum has outdated links to tutorials. Has anyone made a video that can explain this? One day when I figure this out I’ll make a friggen YouTube video and post it. I’m beyond frustrated.

Hi Nikita,
When selecting the dropdown item, does it download imidiatly or is there a button?

Hi Kristof! I’m so happy you’re still active here. I would like for it to download immediately. I have not added a download button.

This is the error that I’m getting.

@nikita
When i see a reaction on one of my post’s i try to always answer them :slight_smile:

I will take a look and see what is happening,

can you also post the code that you are using?

Kind regards,
kristof.

Seems like i had a small fault in my code wich didn’t change the currentItem from the dataset.

use thiscode for the onChange of the dropdown.

$w("#dataset1").setCurrentItemIndex($w("#dropdown1").selectedIndex).then(()=>{
        wixLocation.to($w("#dataset1").getCurrentItem().link)
    })

Here is set the current index of the dataset to the selected index from the dropdown and after this is done you get the currentitem link

Kind regards,
Kristof

Hi Kristof, Thank you so much.
This is the code that I’m currently using:

import wixLocation from 'wix-location';
import wixData from 'wix-data';
let documents;

$w.onReady(function () {
//getting all documents from the collection
    wixData.query("documents")
        .find()
        .then((results) => {
        //setting the results to the variable declared above
            documents = results.items; //see item below
        })
        .catch((err) => {
 let errorMsg = err;
        });
});

export function dropdown1_change(event, $w) {
 let selectedOption = $w('#dropdown1').value;

 switch (selectedOption) {
 //these options are the values that were set to the dropdown
 case 'ENGLISH US':
        wixLocation.to(File[1].doc);
 break;
 case 'ENGLISH UK':
        wixLocation.to(File[2].doc);
 break;
 case 'Sample':
        wixLocation.to(File[3].doc);
 break;
    }
}

Do I add the string you mentioned like this under export function?

import wixLocation from 'wix-location';
import wixData from 'wix-data';
let documents;

$w.onReady(function () {
//getting all documents from the collection
    wixData.query("documents")
        .find()
        .then((results) => {
        //setting the results to the variable declared above
            documents = results.items; //see item below
        })
        .catch((err) => {
 let errorMsg = err;
        });
});

export function dropdown1_change(event, $w) {
 let selectedOption = $w("#dataset1").setCurrentItemIndex($w("#dropdown1").selectedIndex).then(()=>{
        wixLocation.to($w("#dataset1").getCurrentItem().link)
    })

 switch (selectedOption) {
 //these options are the values that were set to the dropdown
 case 'ENGLISH US':
        wixLocation.to(File[1].doc);
 break;
 case 'ENGLISH UK':
        wixLocation.to(File[2].doc);
 break;
 case 'Sample':
        wixLocation.to(File[3].doc);
 break;
    }

I missed a } at the end of the second snippet.
I’m getting this error, I think that it wants to display text and not a download URL?

Can you show me the way your database is made? :slight_smile:

As you can see it says the document collection does not exist,
Are you sure thats the name of your collection?


It does not give me the option to connect the Value to the File dataset - only Title (Text)

Like this

Try this.


export function dropdown1_change(event,$w){
$w("#dataset1").setCurrentItemIndex($w("#dropdown1").selectedIndex)
.then(()=>{ 
wixLocation.to($w("#dataset1").getCurrentItem().doc)
})

And remove your query to the document database

wixData.query("documents")
.find()
.then((results)=>{
//setting the results to the variable declared above
documents = results.items;
//see item below
})
.catch((err)=>{
leterrorMsg=err;
});

You don’t need this since documents doesn’t exist.
This gives an error and the other code might fail.

Also you don’t need the swich function.

So the code should be like this:

import wixLocation from 'wix-location';
import wixData from 'wix-data';
$w.onReady(function(){
})
export function dropdown1_change(event,$w){
$w("#dataset1").setCurrentItemIndex($w("#dropdown1").selectedIndex)
.then(()=>{
wixLocation.to($w("#dataset1").getCurrentItem().doc)
})

Okay, so I cleared and updated as you said and I’m still getting this error :confused:

Wix code SDK error: The url parameter that is passed to the to method cannot be set to the value . It must be of type string.

Oow sorry use .file instead of .doc :sweat_smile:

@volkaertskristof you magnificent coder! It works! Gosh, I’ve been struggling with this for over a week!
You have saved my sanity haha, thank you so much!

@nikita
No problem, I’m happy i could help :slight_smile:

I have tried everything that this post says, it still doesnt work. I can get it so the dropdown menu shows the selection but when i press something nothing downloads. I also cant get the dropdown to link to documents only to title. Anybody who can help me?