Create a download button for uploaded documents

Hopefully you already know that you can create an Upload Button which lets your users upload a file or image to a collection.

But did you know that you can also let your users download uploaded documents? Without code?

To do this:

  • Select an element that you can add a link to (buttons, tables, images, galleries)

  • Go to their Connect to Data panel and under “Link Connects to” set the link to the field in your collection where you stored the document
    When a user clicks the linked element, the document downloads automatically - and that’s it.

Note that you can only download documents using this method, not images.

5 Likes

Beautiful!!! <3 <3 <3 <3

But, in a dynamicDataset through dynamic URL, how to check if the document to be downloaded is there or not?

On a dynamic page I have a button ‘downButton’ which is linked to the ‘document’ field in same dataset. I need the button lable to change depending on if the document is empty or has some document uploaded.

Following is the two codes I used, but none working:

===============Code 1====================
$w.onReady(function () {
var doc = $w(“#dynamicDataset”).getCurrentItem().doc;
if(doc === null) {
console.log(“no document found”);
$w(‘#downButton’).label = “Judgment to be uploaded soon”;
}
else {
console.log("document: " + doc);
$w(‘#downButton’).label = “Download Judgment”;
}
});

Here irrespective of whether document is there or not, everytime console only logs

document: undefined

and lable changes to “Download Judgment”

===============Code 2====================

$w.onReady(function () {

if ($w("#downButton").link !== null) {	 
	$w('#downButton').label = "Download Judgment"; 
} 
else { 
	$w('#downButton').label = "Judgment to be uploaded soon"; 

}
});

Here again console shows “Wix code SDK Warning: The link parameter that is passed to the link method cannot be set to null or undefined”, twice on each run.

and everytime lable changes to “Download Judgment”, irrespective of whether document is there or not.

=========================================

How to check if any document for download is there or not?

Please guide.

Thanking in anticipation.

Anupam Dubey

Do you only one doc per collection entry?

I did this: upload button for form, input field to ‘name doc’

dynamic page connected to dataset
2nd dataset connected to table
filter dataset table using code to match current record on dynamic dataset.

results on table, list of docs for that record.

Link row click on table to doc link.

Thanks for the response Nayeli,

Being a novice, it’s cumbersome for me.

Yes, each row in dataset can have only one document. Now, for the download button, linked to the document field, it’ll naturally download the document it it exists. I just need to change the lable of the download button to specify whether the document is there for the download or is it yet to be uploaded.

Please guide, how to go about it.

Hey Anupam and Nayeli,

Here’s how I got it to work. In addition to changing the button label I disable the button so it can’t be clicked when there’s nothing to download and enable it if there is.

$w.onReady(function () {
	$w("#dynamicDataset").onReady( () => {
		//assign the hasDoc variable the value of the field that holds the document in the current item of the dataset.
		const hasDoc = $w("#dynamicDataset").getCurrentItem().docField;
		if (hasDoc) {   //check if hasDoc is true
			$w("#button1").label = "Download";  //change button label
			$w("#button1").enable();	//enable the button
		}
		else {   	//check if haDoc is false
			$w("#button1").label = "No Doc";   //change the button label
			$w("#button1").disable();	//disable the button
		}
	});
});

Make sure you are in the onReady function for the page and the onReady function for the dataset.

To display the current item’s data you can connect a table to the dynamic page dataset or you can connect individual elements to the dynamic page dataset. Either way you can then add a download button to the page, and link it to the doc field of the same collection the dataset is connected to.

@Nayeli - Why use the second dataset to get the table data to match the current record of the dynamic dataset? AFAI can see, you can connect the table in your solution directly to the dynamic page dataset, which already contains the current item for the page.

It’s an important point to remember - The dynamic page dataset is like a regular dataset. It just comes pre-filtered only for whatever data the dynamic page is currently displaying.

Oh the reason i connected to a 2nd dataset is because i have docs in a different collection.

Collection 1 = Property
Collection 2 = Documents

Whenever a member uploads a document, they tag the property it’s for. One property can have 1 or 100 documents.

Gotcha.

Thanks for guiding Jeff

Are there any GB limits/restrictions to the amount that can be uploaded/downloaded?

Thanks for help Anupam and Jeff

Hey Jason,
See here for field type limitations.

Sorry but i have tried the code and don’t work properly…
const hasDoc = $w(“#dynamicDataset”).getCurrentItem().docField return false for every records in database collection (also these have document stored into).
I have only one field (document field) and use a upload field to store the document into database (input form)
hasDoc should store the URL of document uploaded ?
Thanks for your help.
P.S. What mean " Make sure you are in the onReady function for the page and the onReady function for the dataset." I have insert the code in onReady function of data page

Hey Fabio,
Couple of things (sorry if these are obvious):

  1. Did you replace docField with the field key of the field in your collection where you store the document?

  2. Did you replace dynamicDataset with the ID of the dataset on your page?

  3. About the dataset onReady, see this post: https://www.wix.com/code/home/forum/advanced-tips-tricks/datasets-have-an-onready-function
    -Jeff

Ok Jeff, i didn’t understand docField is a “template”; i have replace with key field but to work properly i had to insert code in “export function dynamicDataset_currentIndexChanged()” point to allow change data in form every record I’m selecting in data grid view.
I have also disabled upload file button when hasDoc is True to denie uploading of more than one document for a single record in my database collection.

in my form i have two field that are reference of two database collection (sponsor and upline)
Why when I select a record in data view grid and this is shown in form field , this two field is shown empty (i must click on list box field to view and select the value ?
I have attached a print screen of my test site for your convenience.
Thanks

Hey Fabio,

Do you want those dropdowns to only display their values or will the user be able to change what’s there also?

Also FYI - the upload button only allows a user to select 1 file, it doesn’t handle multiple files. If a file is selected and the user tries to select another one, it just replaces the first one.

Hello Jeff : )

When will downloading images be available (through button and/or code)?

NVM. Figured it out.
:wink:

Hi Jeff. I have a similar issue to Fabio. I have a dropdown connected to a dateset. The element is in a dynamic page where I view tha data of a specific user. The problem is the dropdown does not display the value recorded in the dataset. The list options is diplayed correctly. I would like to view on the dropdown the actual value in the dataset and eventually change it with a value in the options list. Thank you.

Good-day, I’ve been following you on YouTube. I’ll love to make a request if you could make a video regarding on this particular topic… Thanks so much. .Lotachi…