Basic Sample

Features

The application shows how to embed File Downloader into a Web page and how to automatically create file lists using a server-side script.

Usage

This sample contains three folders:

1. Folder1/ corresponds to the Photos of the ocean item in the drop-down list.
2. Folder2/ corresponds to the Photos of the sky item in the drop-down list.
3. Folder3/ corresponds to the Photos of a mountain item in the drop-down list.

When the Download button is clicked, the server-side script of this sample scans the selected folder and automatically creates a file list based on the folder content. It means that you can put any files into these folders, and your files will be downloaded along with the default ones.

Client-Side Code

The client-side code of this demo contains HTML code, File Downloader initialization code, and an event handler.

HTML Code

The most important part of the HTML code is a drop-down menu which allows the user to select a desired folder. The values of the options contain folder IDs.

File Downloader Initialization Code

The initialization code contains two specific settings.

The addParam instruction changes the ButtonDownloadText property value. This property sets the text of the Download button. For more details on how to change File Downloader text labels, see the Localization Sample topic.

The addEventListener instruction adds a handler for the DownloadStep event. The handler itself is discussed below. To read more about the event, see the DownloadStep event reference.

DownloadStep Event Handler

The DownloadStep event handler is called each time when a new step of the download process starts. But as we are interested only in providing an appropriate file list URL, actions are performed only on the second step (file list download is about to start). The onDownloadStep function reads the selected value from the folder selection menu and adds this value as a parameter to the URL of a server script. The server script returns the file list based on the passed value.

Server-Side Code

File Downloader can download files only if the URLs to the files are provided. For that a file list is used. The file list can be static or can be generated dynamically. If you need the latter one, you should write your own code.

This sample demonstrates how to perform a basic set of actions on the server. It does three things:

1. Reads a parameter passed to it.
2. Based on the parameter value, the script scans one of the folders on the server.
3. Creates a plain text list of files from the folder selected on the previous step.
4. Returns the file list to the browser.

The script works in the following way:

1. It parses the GET request that called the script. If a valid id parameter is passed, the default folder on the server can be changed to another one. That is the folder from which the files will be downloaded.
2. The script checks if the selected folder exists, and if yes, reads all file names from it.
3. Based on each file properties, the script constructs a file list in a loop and returns it to the browser.

Keep in mind, this code just gives some guidelines how to use File Downloader with your website. It is not supposed to be used in the production environment. For brevity reasons, it intentionally omits some handy things and checks that you may want to have. This is a matter of your application rather than of File Downloader.

See Also

Samples

• Localization Sample

Reference

• FileList Property
• ButtonDownloadText Property

Manual

• Evaluating and Registering File Downloader