Uploading folders is extremely useful when users are allowed to upload large amounts of files. This topic describes how to set up uploading folders on client side and restore folders structure on a server.
Image Uploader Express does not display and upload folders. See the Comparison of Image Uploader Editions topic for details.
Configuring folders uploading in Image Uploader is straight-forward and simple. You use only one property - Uploader.FolderProcessingMode to say to the control how to deal with folders. Let us describe all FolderProcessingMode possible values:
When a user selects a folder to upload, all its subfolders become selected recursively, in Show and Upload modes.
To allow uploading folder set the FolderProcessingMode property to Upload, like it is shown in the following configuration:
<aur:Uploader ID="Uploader1" runat="server" FolderProcessingMode="Upload" />
In this case, if a user selects a whole folder, all the files in this folder will be recursively added to the upload pane; so a user can
clearly see all the files selected at once. When a user clicks Upload, the structure of this folder will be sent to a server via relative paths
to each of the selected files. For instance, if a user sends a MyDocuments folder, which contains a MyPhotos subfolder, all
files inside this subfolder will be sent to a server along with MyDocuments\MyPhotos\filename relative paths and
all files contained directly in the MyDocuments folder will have MyDocuments\filename
relative paths.
Image Uploader sends only relative paths along with uploaded files and never absolute because of the security reason.
There are three ways to restore folders structure on server side corresponding to approaches described in the Saving Uploaded Files in ASP.NET topic. Let us examine each of them in detail, beginning with the simplest one.
In this case all the uploaded files and folders are saved on a server automatically. All you need is just to enable the autosave feature for chosen
Image Uploader ASP.NET server-side component. If you do not know what component to choose, either Uploader, UploadRequest, or UploadHandler, please, see the server-side components section.
In order to configure the component set the Autosave property to true and
specify the DestinationFolder with a path where uploaded files and folders should be saved. For more
information on this approach see the uploading files to the specified folder section.
Here is the example which allows uploading folders and enables autosave for the Uploader control.
<aur:Uploader ID="Uploader1" runat="server" FolderProcessingMode="Upload"
Autosave="true" DestinationFolder="~/Catalog" />
Here you recreate uploaded folders manually using one of the following server-side components: Uploader, UploadRequest, or UploadHandler. If you are unfamiliar with these classes, please, read the server-side components section first. Each of these components exposes the FileUploaded and AllFilesUploaded events allowing you to access all the uploaded file details via the UploadedFile properties. In particular, a relative path is available through the UploadedFile.RelativePath property. For more information about these events see the extended processing of uploaded data section.
The following example uses the FileUploaded event to create a folder for the currently uploaded file (if it was uploaded within a folder, of course) and save this file in it.
<aur:Uploader ID="Uploader1" runat="server" FolderProcessingMode="Upload"
OnFileUploaded="FileUploaded" />
protected void FileUploaded(object sender, Aurigma.ImageUploader.FileUploadedEventArgs e)
{
string absPath = System.IO.Path.Combine(Server.MapPath("Gallery/"), e.UploadedFile.RelativePath);
System.IO.DirectoryInfo destFolder = new System.IO.DirectoryInfo(absPath);
if (!destFolder.Exists)
destFolder.Create();
string fileName = System.IO.Path.Combine(destFolder.FullName, e.UploadedFile.SourceName);
e.UploadedFile.ConvertedFiles[0].SaveAs(fileName);
}
This method requires only a standard ASP.NET Request object to get a relative path to the uploaded file. The path is stored in the SourceName field of received POST request, so you can use it to restore folder structure manually. We also recommend you to use the PostFields class to get names of POST fields. For more information about saving files this way, see the parsing POST requests using standard ASP.NET Request object section.
Image Uploader sends a HEAD request before the POST one to check if authentication is needed. So, you should check the type of Request and handle POST requests only.
The example below parses the received request via the standard ASP.NET Request object, creates uploaded folders, and saves files to them.
protected void Page_Load(System.Object sender, System.EventArgs e)
{
if (string.Equals(Request.RequestType, "POST"))
{
int fileCount = int.Parse(Request.Params[Aurigma.ImageUploader.PostFields.PackageCount]);
for (int i = 0; i < fileCount; i++)
{
if (Request.Files[string.Format(Aurigma.ImageUploader.PostFields.File, 0, i)] != null)
{
string fileName = System.IO.Path.Combine(Server.MapPath("Uploads/"),
Request[string.Format(Aurigma.ImageUploader.PostFields.SourceName, i)]);
Request.Files[string.Format(Aurigma.ImageUploader.PostFields.File, 0, i)].SaveAs(fileName);
}
}
}
}