# Download file from dropdown

**URL:** <https://forum.wixstudio.com/t/download-file-from-dropdown/37625>\
**Category:** Ask the community\
**Tags:** code, question\
**Created:** [April 23, 2018, 10:35am UTC](https://forum.wixstudio.com/t/download-file-from-dropdown/37625 "2018-04-23T10:35:23Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![oscar-aveline](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/oscar-aveline/32/3212_2.png) [@oscar-aveline](https://forum.wixstudio.com/u/oscar-aveline)\
**Post date:** [April 23, 2018, 10:35am UTC](https://forum.wixstudio.com/t/download-file-from-dropdown/37625/1 "2018-04-23T10:35:23Z")

</div>

Hi all,

I can’t figure how to make a dropdown that allow to download a file when the user choose an option.

I am new to code and don’t know how to write it, so code exemple would be a great help.

The files are pdfs documents  
There is one pdf for each option in the dropdown

Hope someone can help me on this,

Thanks

---

<div class="post-metadata">

**Author:** ![\_tal](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/_tal/32/669_2.png) [@\_tal](https://forum.wixstudio.com/u/_tal)\
**Post date:** [April 23, 2018, 4:07pm UTC](https://forum.wixstudio.com/t/download-file-from-dropdown/37625/2 "2018-04-23T16:07:45Z")

</div>

Hi,  
Here’s the instructions:

1. Add a dropdown to the page and set the list items and their values. I’ve added a screenshot to demonstrate:

 ![](https://us1.discourse-cdn.com/wix/original/3X/b/8/b8f1dd9b29c84eda203fc85f70d0216a9155fc13.jpeg)

1. Create a DB collection and add the documents to the collection:

 ![](https://us1.discourse-cdn.com/wix/original/3X/3/0/30faf3c35916081777bcf03af1fade5c567f7b25.png)  
3. Add an onChange event to the dropdown:

 ![](https://us1.discourse-cdn.com/wix/original/3X/e/8/e821264fc9116ecfeb843485515e8140edd4e2bb.png)

1. Add the following code to the page code editor:

```javascript
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 'firstItem':
        wixLocation.to(documents[0].doc);
 break;
 case 'secondItem':
        wixLocation.to(documents[1].doc);
 break;
 case 'thirdItem':
        wixLocation.to(documents[2].doc);
 break;
    }
}

```

I hope it’s clear.  
Good luck!

Tal.

---

<div class="post-metadata">

**Author:** ![oscar-aveline](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/oscar-aveline/32/3212_2.png) [@oscar-aveline](https://forum.wixstudio.com/u/oscar-aveline)\
**Post date:** [April 24, 2018, 5:16am UTC](https://forum.wixstudio.com/t/download-file-from-dropdown/37625/3 "2018-04-24T05:16:07Z")

</div>

Nice ! Thanks a lot !

I am going to try this as soon as possible, and I let you know, but that is a BIG thank you !

---

<div class="post-metadata">

**Author:** ![eanderson](https://avatars.discourse-cdn.com/v4/letter/e/5f9b8f/32.png) [@eanderson](https://forum.wixstudio.com/u/eanderson)\
**Post date:** [June 19, 2018, 7:35pm UTC](https://forum.wixstudio.com/t/download-file-from-dropdown/37625/4 "2018-06-19T19:35:44Z")

</div>

This method kind of works in “preview” mode, but not on the live site

---

<div class="post-metadata">

**Author:** ![felipesuprani](https://avatars.discourse-cdn.com/v4/letter/f/258eb7/32.png) [@felipesuprani](https://forum.wixstudio.com/u/felipesuprani)\
**Post date:** [July 31, 2018, 10:14pm UTC](https://forum.wixstudio.com/t/download-file-from-dropdown/37625/5 "2018-07-31T22:14:01Z")

</div>

Tal,

not working for me… do I need to route the DB name somewhere?

---

<div class="post-metadata">

**Author:** ![joshuabarbour](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/joshuabarbour/32/13955_2.png) [@joshuabarbour](https://forum.wixstudio.com/u/joshuabarbour)\
**Post date:** [August 13, 2019, 6:08pm UTC](https://forum.wixstudio.com/t/download-file-from-dropdown/37625/6 "2019-08-13T18:08:30Z")

</div>

You say add a dropdown, but I can’t find where that is?

---

<div class="post-metadata">

**Author:** ![nikita](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/nikita/32/32405_2.png) [@nikita](https://forum.wixstudio.com/u/nikita)\
**Post date:** [February 24, 2022, 7:51am UTC](https://forum.wixstudio.com/t/download-file-from-dropdown/37625/7 "2022-02-24T07:51:25Z")

</div>

It’s been 4 years since the original post and no update or comment from WIX Devs. When I try the above process, I get this error.

 ![](https://us1.discourse-cdn.com/wix/original/3X/4/0/40a834b98589de84ce2bc716c9a80babfda2ef81.png)

Any comments or suggestions? I don’t know much Javascript and it’s starting to feel like I’m going to have to learn Javascript just to add a stupid dropdown with a download link.

---

<div class="post-metadata">

**Author:** ![nikita](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/nikita/32/32405_2.png) [@nikita](https://forum.wixstudio.com/u/nikita)\
**Post date:** [February 24, 2022, 8:00am UTC](https://forum.wixstudio.com/t/download-file-from-dropdown/37625/8 "2022-02-24T08:00:27Z")

</div>

The code from Tal, wouldn’t connect the Titles from the Dataset to the dropdown options for me, the below code at least linked that.  
I still get the same error about the documents selection not existing - Is there something in my code which does not link to the document column of my dataset?

**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** ;  
}  
}

 ![](https://us1.discourse-cdn.com/wix/original/3X/a/b/ab4e6823530c59bbba5301dda6ffc02020e0a65e.png)

![](https://us1.discourse-cdn.com/wix/original/3X/2/3/23a9c39a8a2c7727f6782f365a3e5c2fb23a9050.png)

---

<div class="post-metadata">

**Author:** ![oscar-aveline](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/oscar-aveline/32/3212_2.png) [@oscar-aveline](https://forum.wixstudio.com/u/oscar-aveline)\
**Post date:** [February 24, 2022, 8:05am UTC](https://forum.wixstudio.com/t/download-file-from-dropdown/37625/9 "2022-02-24T08:05:26Z")

</div>

The error says "the “documents” collection doesn’t exists.  
This means you haven’t named your collections “documents” but something else.

In the code :

```javascript
wixData.query("documents")

```

“documents” must be replaced by your collection name, which is “downloadFile”

Try :

```javascript

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

$w.onReady(function () {
//getting all documents from the collection
    wixData.query("downloadFile")
        .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;
    }
}

```

Bests

---

<div class="post-metadata">

**Author:** ![davide-verardi93](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/davide-verardi93/32/9501_2.png) [@davide-verardi93](https://forum.wixstudio.com/u/davide-verardi93)\
**Post date:** [April 12, 2023, 3:08pm UTC](https://forum.wixstudio.com/t/download-file-from-dropdown/37625/10 "2023-04-12T15:08:33Z")

</div>

Hi Guys,  
the code doesn’t work, my dropdown menu simply displaces the option that I set