This documentation is for the old version. Go to the latest Upload Suite docs

Uploading Folders in Other Platforms

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.

Note

Image Uploader Express does not display and upload folders. See the Comparison of Image Uploader Editions topic for details.

Uploading Folders on Client Side

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:

  • Skip does not show subfolders in the folder pane, so it is impossible to select a whole folder if it is not a current folder. Only files are uploaded.
  • Show makes subfolders visible in the folder pane, so a user can select whole folders. However, restoring folders structure on server side is impossible, since no file path information is uploaded. Only files are uploaded, even if a folder is selected.
  • Upload shows subfolders in the folder pane, so a user can select whole folders. Moreover, it is possible to restore folders structure on a server, because Image Uploader sends each file along with its path relative to the selected folder. Folders and files are uploaded.
Note

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:

JavaScript
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.

Note

Image Uploader sends only relative paths along with uploaded files and never absolute because of the security reason.

Restoring Folders Structure on Server Side

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:

  1. Define the folder to save uploaded folders to.
  2. Iterate through all files uploaded in the current package (their total number is contained in the PackageFileCount field).

    In this loop:

    1. Read a relative path to each received file from the SourceName_i POST field, where i is an index of this file.
    2. Parse this path to get all the folder names and the file name.
    3. Append the relative path to the path defined on the first step.
    4. Save the file to this path.
Note

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:

pseudocode
//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)
}

See Also

Reference

Manual