Download file from dropdown

Discussion Ask a question
,
1

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

2

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:

1920×1219 203 KB

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

982×572 18 KB

3. Add an onChange event to the dropdown:

632×1048 55.5 KB

  1. Add the following code to the page code editor:
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.

3

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 !

4

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

5

Tal,

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

6

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

7

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.

1121×85 4.33 KB

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.

8

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

868×452 22.4 KB

9

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

In the code :

wixData.query("documents")

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

Try :


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

10

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