Krystalware

SlickUpload Demos
» Overview Demonstrates the basics of SlickUpload. Selecting files, maximum file limit, file type validation, require files to be selected.
» FileNameGenerator How to control and generate server filenames for files as they are uploaded.
» Additional Fields How to add additional input fields for each selected file.
» Custom Progress Display custom progress information during a postprocessing step after files are uploaded.
» Localization How to localize the SlickUpload control.
» Modal Progress Show the progress display in a modal.
» Skinned Skin the file list and progress display.
» Upload to Amazon S3 How to upload to Amazon's Simple Storage Service with progress display.
» Upload to SQL Server Upload directly to a SQL Server, streaming with no memory usage.
Clustered» Use a StatusManager configuration to allow uploads with progress to a cluster/web farm/web garden.
» Custom UploadStreamProvider How to develop your own upload stream provider – this example shows how to zip files as they are uploaded.
» SimpleThe bare metal SlickUpload control, drag-dropped onto the page.

Additional Fields Sample

Select files to upload:

NOTE: the maximum allowed request size for this sample is 1000 MB. If you attempt to upload files larger than this, you will recieve a oversized upload error which SlickUpload will handle gracefully. This is controlled by the maxRequestLength attribute of the httpRuntime key in the web.config file.

Description

This sample demonstrates how to add additional form elements for each file, and then read out the values that are entered. To add form elements, simply add any form element (input, select, etc.) to the <FileTemplate> template. Give them a unique name (this is how you will read them back after an upload). For this example, the template is as follows:

<kw:FileListRemoveLink runat="server" Title="Remove">
    [x]
</kw:FileListRemoveLink>
<kw:FileListFileName runat="server" />
<kw:FileListValidationMessage runat="server" ForeColor="Red" />
<br />
Name: <input type="text" name="name" />
Category:
<select name="category">
    <option value="Public">Public</option>
    <option value="Private">Private</option>
    <option value="All">All</option>
</select>
<br />
Description:<br />
<textarea name="description" rows="5" cols="50"></textarea>

Notice the additional input elements at the end of the template. This adds three additional elements to each file item:

  • An <input> named "name"
  • An <select> named "category"
  • A <textarea> named "description"

SlickUpload takes care of templating and managing the names for each element as the files are selected and uploaded. After an upload, you can access the values that were posted for each file via the UploadedFile.FormValues dictionary. So, for this example, given an UploadedFile named "file", you could write the following code in the UploadComplete event to read back the form values that were posted for that file:

string name = file.FormValues["name"];
    string category = file.FormValues["category"];
    string description = file.FormValues["description"];