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:
var u = $au.uploader({
id: 'Uploader1',
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.
As stated in the previous section, the Upload folder processing mode allows uploading entire folders. As a result, the SourceName_i POST field will contain not only the filename but also a relative path to the ith file. So, if you want to restore folders structure on the server, you should parse the SourceName_i field and recreate a path to the ith file, folder by folder. The following algorithm describes this idea more detailed:
Iterate through all files uploaded in the current package (their total number is contained in the PackageFileCount field).
In this loop:
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 examined algorithm may look in pseudocode as follows:
//The folder to save uploaded folders to
string catalogPath
iterate through each file (i)
{
// Check if it is POST request
if not (RequestMethod is POST)
exit();
//Take the value from the SourceName_i POST field
string relativePath = POST["SourceName_" + i]
//The 'split' function splits a string into an array of substrings using
//the specified delimiter ('\' in our case)
array folderStructure = split(relativePath, "\")
//The 'count' function returns number of elements in array
integer folderCount = count(folderStructure)
//This value containes only the name of received file
string fileName = folderStructure[folderCount]
//The 'goToFolder' function changes the current working folder to the specified one
goToFolder(catalogPath)
//iterate through all but last one folder names
iterate through folderCount-1 elements of folderStructure (j)
{
//The 'exists' function checks if the specified folder exists under the current location
if not exists(folderStructure[j])
{
//The 'createFolder' function creates a subfolder
createFolder(folderStructure[j])
}
goToFolder(folderStructure[j])
}
//The 'save' function saves the i-th file in the current working folder with the fileName name
save(file[i], fileName)
}