When users want to upload large amounts of images, it is often more convenient to allow them to upload whole folders. This topic contains basic instructions on setting up the client-side and server-side environment for this case.

Client Side

There are two properties in Image Uploader that are related to folder upload. The first one is AllowFolderUpload. This property permit the recursive upload of the whole folders. Note that in case of folder upload, a file mask and other restrictions are applied to the content of the folders selected for upload, just like they are applied to single files.

NoteNote

Image Uploader recursively uploads all folder content that satisfies requirements. The only files that are never uploaded are hidden files.

Another important property is ShowSubfolders. If it is set to true, subfolders are also displayed on the folder pane, along with files.

Server Side

On the server side, you will need to receive the uploaded files, as usually. However, you will need to slighlty modify a common scenario.

In case of simple file upload, you usually:

  1. Iterate through all uploaded files (their total number is received in the FileCount POST field).
  2. If needed, in this loop read the name of each succesive file from the FileName_i POST field, where i is the number of the successive file.
  3. In the same loop iteration save the file using some pre-defined path value of your gallery.

When handling folder upload, you will need to modify the second and the third steps. The thing is that the FileName_i POST field will contain not only the file name but also a relative path to the file like this: My Pictures\photo01.jpg. As you see, parts of the path are separated with the back slash symbol (\). So, on Step 2, you will need to parse the path contained in the FileName_i POST field and create all required folders under the gallery path. On Step 3 you will need to append the relative path to the gallery path.

In pseudocode this may look as follows.

CopyCode imageCopy Code
iterate through each file (i)
{
	//This value is taken from the FileName_i POST field
	string fullPath
	
	//This value is pre-defined
	string galleryPath
	
	//The 'split' function splits a string into an array of substrings using
	//the specified delimiter ('\' in our case)
	array folderStructure = split(fullPath, "\")
	
	//The 'goToFolder' function changes the current working folder to the
	//specified one
	goToFolder(galleryPath)
	
	iterate through each element 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 current file in the current working folder
	save(file[i])
}

See Also

Reference

AllowFolderUpload Property
ShowSubfolders Property

Samples

Open File Dialog Sample