Overview Sample
NOTE: the maximum allowed request size for this sample is 1024 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 is the overview sample, which demonstrates the basics of SlickUpload. The following concepts are covered in this sample:
Selecting files
The SlickUpload control is used to allow file selection. Files can be selected, removed, and uploaded. The SlickUpload control is fully templatable allowing customization of look and feel. This sample
uses the bare metal SlickUpload skin.
Maximum file limit
The SlickUpload control has the capability to limit the number of files selected. By default, unlimited files are allowed, but by setting the MaxFiles property of the SlickUpload control, you can limit
to any specific number. For example, to limit to three (3) files, you would set the MaxFiles property as follows:
<kw:SlickUpload ... MaxFiles="3" ... />
Require file selection
SlickUpload provides a rich client side object model that allows you to easily hook in and do validation checks. For this example, an ASP.NET CustomValidator is used, but you could easily replace
this with whatever validation framework you use. The validation javascript looks like this:
function Validate_SlickUploadRequiredFiles(source, args)
{
args.IsValid = (kw.get("<%=SlickUpload1.ClientID %>").get_Files().length > 0);
}
This validation function gets a reference to the SlickUpload control on the page, gets a list of the files currently selected, and checks its length to ensure at least one file has been selected.
To hook this into the ASP.NET validation framework, you can use a CustomValidator configured as follows:
<asp:CustomValidator runat="server" ClientValidationFunction="Validate_SlickUploadRequiredFiles" Text="Please select at least one file to upload." />
Confirm navigate message
If the user navigates away from the page during an upload (this can occur by clicking a link, using the back or forward button, typing
a url into the address bar, etc.), the upload will fail. This property allows you to specify a message
that will prompt the user to make sure they want to navigate away before the upload is cancelled.
<kw:SlickUpload ... ConfirmNavigateDuringUploadMessage="Leaving will cancel the current upload!" ... />
Extension validation
The SlickUpload control has built in file extension validation. By default, all extensions are allowed. To turn on validation, set the ValidExtensions property of the SlickUpload control to a comma seperated list of extensions that are considered valid. For example, to allow images
only, you might use a setting such as:
<kw:SlickUpload ... ValidExtensions=".png,.gif,.jpg" ... />
To set a validation message to be displayed next to each invalid file, set the InvalidExtensionMessage property of the SlickUpload control. For example:
<kw:SlickUpload ... InvalidExtensionMessage="Please select an image (*.png, *.gif, *.jpg)." ... />
You can also implement a seperate validator to display an additional message, or if you want a per page message instead of per file. To do this, use a validation javascript such as:
function Validate_SlickUploadValidExtensions(source, args)
{
var files = kw.get("<%=SlickUpload1.ClientID %>").get_Files();
args.IsValid = true;
for (var i = 0; i < files.length; i++)
{
if (!files[i].isValidExtension)
{
args.IsValid = false;
return;
}
}
}
This javascript is similar to the required file validation. It gets a reference to the SlickUpload control, gets a list of the files currently selected, and then iterates through the list to
determine if any invalid files have been selected. To hook this into the ASP.NET validation framework, you can use a CustomValidator configured as follows:
<asp:CustomValidator runat="server" ClientValidationFunction="Validate_SlickUploadValidExtensions" Text="Please select an image (*.png, *.gif, *.jpg)." />
|