AWS FilePicker 2.1 Documentation
AWS FilePicker reminds of the “Open File” dialog in regular Windows applications. This is an ASP.NET web control that lets users navigate a folder and its subfolders on the server to select a file.
AWS FilePicker
`
.
By Alex Avrutin and Juan López
AWS FilePicker 2.1 Documentation 2
Contents
1. INTRODUCTION .......................................................................................... 4
2. WHAT’S NEW? ............................................................................................. 6
3. SYSTEM REQUIREMENTS ............................................................................. 7
4. INSTALLATION............................................................................................ 8
5. DEVELOPER’S GUIDE ................................................................................... 9
5.1 PRELIMINARY NOTES ...................................................................................... 9
5.1.1 File system access issues ..................................................................... 9
5.1.2 Known bugs ..................................................................................... 10
5.1.3 Source code compilation .................................................................... 10
5.2 DESIGN OF AWS FILEPICKER ......................................................................... 11
5.3 HOW TO ADD AWS FILEPICKER INTO YOUR APPLICATION ......................................... 12
5.4 CONFIGURING AWS FILEPICKER ...................................................................... 14
General configuration properties .................................................................. 14
Appearance properties ............................................................................... 15
Security properties .................................................................................... 15
6. USER’S GUIDE ........................................................................................... 18
6.1 GENERAL VIEW .......................................................................................... 18
6.2 WORKING WITH FILES .................................................................................. 20
6.2.1 Selecting files ................................................................................... 20
6.2.2 Navigating the file system .................................................................. 21
6.2.3 Creating new folders.......................................................................... 22
6.2.4 Renaming ........................................................................................ 23
6.2.5 Copying ........................................................................................... 24
6.2.6 Moving ............................................................................................ 25
6.2.7 Deletion........................................................................................... 26
6.2.8 Refreshing the view ........................................................................... 26
6.2.9 Reverse check .................................................................................. 27
6.2.10 Previewing pictures.......................................................................... 28
6.2.11 Uploading files ................................................................................ 29
Have questions or comments? Feel free to contact us: [email protected]
AWS FilePicker 2.1 Documentation 3
6.2.12 Bulk file upload ............................................................................... 30
6.2.13 File download.................................................................................. 31
6.2.14 Bulk file download ........................................................................... 31
7. THANKS..................................................................................................... 33
8. OTHER COMPONENTS BY AW/SYSTEMS .................................................... 35
9. ABOUT AW/SYSTEMS ................................................................................ 36
Have questions or comments? Feel free to contact us: [email protected]
AWS FilePicker 2.1 Documentation 4
1.
Introduction
AWS FilePicker reminds of the “Open File” dialog in regular
Windows applications. This is an ASP.NET web control that
lets users navigate a folder and its subfolders on the
server to select a file.
Full-featured AWS FilePicker has a full-featured file manager that lets
file manager you copy, move, rename, delete files and folders, upload
files to a folder and create new folders.
Bulk file upload AWS FilePicker gives you unique capabilities, namely, the
Bulk file upload feature. With this you can upload as
many files as you want at once by compressing them with
your archiver (e.g. WinZip) and then uploading the archive
to the server. As soon as it reaches the server, AWS
FilePicker will extract the files from the archive
automatically.
NEW! Bulk file FilePicker 2.1 introduces another amazing capability—Bulk
download file download. You can download an entire folder in a Zip
archive with all the files and subfolders with one click. No
more pain with downloading 1,000s files. You can
download them all at once!
Permission You can easily adjust the permissions you grant each
management person. You can prohibit uploading, renaming, deleting,
and/or creating files and folders. You also can limit the size
Have questions or comments? Feel free to contact us: [email protected]
AWS FilePicker 2.1 Documentation 5
of files that can be uploaded and restrict the allowed file
types by their extensions. For example, you can restrict
users to uploading pictures only (.gif and .jpg) with a file
size smaller than 50KB.
Picture preview When working with graphic files, it is often useful to
preview the images you’re working with. FilePicker can
generate thumbnails for many types of images (JPG, GIF,
BMP, PNG and TIFF) making it easier to manage them.
Multilingual and FilePicker comes with 4 supported languages right out of
localized interface the box: English, Spanish, Russian and Portuguese.
The default language is determined automatically (using
client’s browser settings), and users can switch languages
at any time. Along with the language of the interface, all
the regional settings (date and number representation,
etc) will be changed as well.
Freeware AWS FilePicker is free software. You can freely modify and
& open source redistribute it. The component is shipped with complete
and well-commented source code.
Supported! Despite on the fact that this is free software, we do
support it. If you have any questions or just want to
share your thoughts feel free to write the authors:
Alex Avrutin: [email protected] (English & Russian)
Juan López: [email protected] (Spanish)
Have questions or comments? Feel free to contact us: [email protected]
AWS FilePicker 2.1 Documentation 6
2.
What’s new?
AWS FilePicker 2.1 has got a number of cool features which many users of the control
were anticipating:
1. Ability to download files and entire folders. (Finally!)
2. Select/Unselect All checkbox lets you select or unselect all items in the file list.
3. By default, the file manager selects the file and closes itself after the file is
uploaded. This will save much time for the average user. [You can disable this by
resetting the checkbox called ‘Select the file upon upload’ on the Upload panel.
See the Upload files section for details.]
4. Now FilePicker does not overwrite existing files upon upload but instead displays an
error message. [You can overwritte files by turning on the ‘Overwrite the file if
already exists’ checkbox on the Upload panel. See the Upload files section for
details.]
5. AWS FilePicker now speaks Portuguese!
Have questions or comments? Feel free to contact us: [email protected]
AWS FilePicker 2.1 Documentation 7
3.
System
requirements
AWS FilePicker requires no more resources than an average ASP.Net web control:
• Microsoft.Net Framework 1.1+;
• Microsoft Internet Information Services;
• Visual Studio .Net 2003 (not required but recommended for comfortable work);
Have questions or comments? Feel free to contact us: [email protected]
AWS FilePicker 2.1 Documentation 8
4.
Installation
The control installs with the help of the installation wizard that extracts and copies all
the necessary files and creates the following IIS virtual directories
• /FilePicker
• /FilePickerDemoVB
• /FilePickerDemoCS
The first virtual directory (/FilePicker) points to folders containing the file manager part
of FilePicker. This folder does not have to be virtual for the component to work, but it
is necessary for opening the FilePicker source code in Visual Studio.Net. The last two
directories point to Visual Basic .Net and C# versions of the FilePicker demo
application, respectively.
Have questions or comments? Feel free to contact us: [email protected]
AWS FilePicker 2.1 Documentation 9
5.
Developer’s
guide
5.1 Preliminary notes
5.1.1 File system access issues
If you do not use authentication in your ASP.Net apps, all the file operations performed
with AWS FilePicker (browsing, uploading, creating directories, etc) are made on behalf
of the ASPNET (if you use IIS 5) or NETWORK SERVICE (if you use IIS 6) user account.
Generally, it is fine for browsing, but you are likely to get the “permission denied” error
if you attempt to upload or delete a file or create a folder. This happens because these
accounts have insufficient privileges for writing operations. To avoid this you should
either:
Grant the ASPNET (in the case of IIS 5) or NETWORK SERVICE (in the case of
IIS 6) user account permission for writing to the folder you selected for
uploaded files. This is the easiest and most secure method. We recommend
this for a public web application or if your application resides in a shared web
hosting environment. Or,
Have questions or comments? Feel free to contact us: [email protected]
AWS FilePicker 2.1 Documentation 10
Authenticate users and give the accounts and/or groups specific access
permissions for the upload folder. We recommend this for corporate Intranet
applications where it is easy to control each user account. In this case, you
need to implement the Windows authentication for your web app and turn
impersonation on in the web.config file ().
5.1.2 Known bugs
Problem
Renaming folders in FilePicker causes loss of session variables if session state mode is
set to InProc.
Comments
When session state is set to InProc, (the default setting for session state), session
variables are lost when a folder is renamed with the System.IO.Directory.Move(). We
believe that this is due to a bug in ASP.NET. [Note: This error also appeared in
previous versions of this component. AWS FilePicker 1.x was a completely different file
manager and it yielded the same results.]. If one changes the session state mode to
StateServer (that is, a separate state service is used), everything works fine.
Solution
In order to avoid losing user’s session data while working with FilePicker, you can do
one of the following:
• Use the StateServer or SQLServer session state mode instead of InProc. For
details on how to do it, see the Session State page in the .Net Framework SDK
documentation (full path to the page: .Net Framework SDK -> Building
Application -> Creating ASP.NET Web Application -> ASP.NET State
Management -> Session State).
• Disable renaming in FilePicker. Note, however, that disabling the renaming
feature will make it impossible to rename both files and folders.
5.1.3 Source code compilation
Have questions or comments? Feel free to contact us: [email protected]
AWS FilePicker 2.1 Documentation 11
In contrast to AWS FilePicker 1.x, now all the parts of AWS FilePicker are combined
into one Visual Studio .Net solution. In order to build the entire component, you just
need to open the FilePicker 2.1 solution in Visual Studio .Net 2003 and complete the
Build Solution command (Ctrl+Shift+B).
5.2 Design of AWS FilePicker
AWS FilePicker consists of two separate parts – AWS FilePicker Control (later in this
section Control) and AWS FilePicker File Manager (File Manager).
AWS FilePicker Control - The Control is placed on the web form where you wish to
use FilePicker. It renders the text box that displays the file name of the selected file
and the Browse button that opens the file manager.
AWS FilePicker File Manager - The File Manager does most of the work. It
receives the settings and then passes those to the File Manager. Along with providing
rich file manipulation capabilities, the File Manager is the very application that allows
users to select files on the server.
The Control transmits the settings to the File Manager with the help of session
variables. It is important to note that session state must be enabled on the server and
Have questions or comments? Feel free to contact us: [email protected]
AWS FilePicker 2.1 Documentation 12
supported by the client (e.g. if session state is cookie-dependent, the cookies must be
enabled in the browser). Otherwise, the user will get this message:
The File Manager returns the name of the selected file back to the Control by
referencing the text box on the main window with help of JavaScript:
vCallerDocument = window.opener.document;
vItem = vCallerDocument.getElementById(′filename_textbox_clientID′);
vItem.value = ′name_of_the_selected_file′;
The Control and the File Manager are implemented in two different Visual Studio.Net
projects: FilePickerControl and FilePicker, respectively. FilePickerControl is an
ASP.NET web control project and FilePicker is a regular ASP.NET application. Despite
on the fact that these are different projects, they should always be deployed and used
together because they comprise one application, AWS FilePicker.
5.3 How to add FilePicker into your
application
In order to add FilePicker in your application, do the following:
1. Add core FilePicker assemblies to your project
Copy the following DLLs into your application /bin folder
1. FilePickerControl.dll from the FilePickerControl/bin folder located in the
directory where the component has been installed.
2. All files and subfolders from the FilePicker/bin folder located in the directory
where the component has been installed.
You can copy all the FilePicker output assemblies (including the primary and the
satellite assemblies) to your application /Bin folder automatically. All you need to do is
attach the FilePicker and FilePickerControl projects comprising the FilePicker
solution to your application solution and reference these projects in your application
project. This can be particularly useful if you adapt FilePicker to your application’s
needs and therefore rebuild it often.
2. Add the files FilePicker uses to your project
Have questions or comments? Feel free to contact us: [email protected]
AWS FilePicker 2.1 Documentation 13
Create the FilePicker folder in the root folder of your application.
Find the folder with the same name (FilePicker) located in the directory where the
component has been installed. Copy the following items from there into the FilePicker
folder of your application:
• Images (the entire folder with all the files and subfolders);
• FilePicker.aspx;
• menu.js;
• Styles.css.
Alternatively you can just copy the entire contents of the FilePicker folder of either of
the demo applications (FilePickerDemoCS or FilePickerDemoVB) provided.
3. Add the AWS FilePicker to the Visual Studio.Net toolbox.
From the Visual Studio.Net main menu: Tools Add/Remove Toolbox Items. Click the
’Browse’ button, locate the FilePickerControl.dll in the /bin subfolder of your app folder,
and select it.
Note: Don’t forget to set appropriate paths to the Browse button picture (the
fpImageURL property) and pop-up window file (the fpPopupURL property). Both of
these files are located in the /FilePicker directory that should be located in your
application root directory (see the step 3 above).
See section “5.4 Configuring AWS FilePicker” for details on the FilePicker properties.
4. Place AWS FilePicker on the web form.
After you have placed the control on the toolbox, drag the component from the toolbar
into your web form. When designing a web form, we recommned working in
FlowLayout mode (the pageLayout property of a web form) as it will prevent the
Browse button from appearing in a wrong position on the form at run time.
Note: If you do not use Visual Studio.Net, adding the control on the web form is
just as easy. Follow these steps:
1. In ASP.Net web form file (.aspx or .ascx) after the or
directive add this line to register the control:
2. At the place where you want to insert the control, add the following tag:
Have questions or comments? Feel free to contact us: [email protected]
AWS FilePicker 2.1 Documentation 14
5.4 Configuring AWS FilePicker
AWS FilePicker has a number of properties that let you set up appearance and
behavior of the control. The properties can be divided into 2 groups:
1. Native properties of the Text Box web control that FilePicker is derived from.
2. AWS FilePicker specific properties. You can easily discern them with their fp
prefix. The properties of the Text Box control are well documented in the
.Net Framework SDK. For that reason, we’ll focus on those specific to the
AWS FilePicker below.
The AWS FilePicker properties can be divided into 3 groups:
• General configuration properties
• Appearance properties
• Security properites
General Configuration Properties
These specify the working (upload) folder and how the result file path should be
returned.
Name Type Default Description
fpUploadDir String ~/Upload/ Base directory for uploaded files, a
virtual directory on the server.
fpUseAppRelPath Boolean True Specifies whether application-relative
path (True) or upload directory
relative path (False) must be returned.
In the first case, the name of a
selected file will be relative to the
application root folder (e.g.
~MyWebApp/Upload/MyFolder/
MyFile.txt). In the second case, it will
be relative to the Upload folder (e.g.
MyFolder/MyFile.txt)
Have questions or comments? Feel free to contact us: [email protected]
AWS FilePicker 2.1 Documentation 15
Appearance properties
These specify various aspects of the visual appearance of the component. Usually, you
can leave them set to their default values.
Name Type Default Description
fpImageLeftOffset Int32 1 Shifts the left edge of the “Browse”
button. Positive values shift right,
negative shift left. Values are in pixels.
When 0, the left is flush with the right
edge of the text box.
fpImageTopOffset Int32 2 Shifts the top edge of the “Browse”
button. Positive values shift down,
negative shift up. Values are in pixels.
fpImageURL String ~/FilePicker/img/ The URL of the image file that denotes
Browse.jpg the “Browse” button.
fpPopupURL String FilePicker/ Path to the File Manager ASPX file.
FilePicker.aspx
fpPopupHeight Int32 500 Determines the File Manager window
height in pixels.
fpPopupWidth Int32 550 Determines the File Manager window
width in pixels.
Security properties
These specify which permissions a user has while working with the file system via the
FilePicker. This doesn’t affect how users select files, rather this limits actions users can
perform using the file manager (rename, delete, copy, move files & folders and some
others).
Name Type Default Description
fpAllowCreateDirs Boolean True Whether to allow users to create
directories in the base (Upload)
directory and its subdirectories.
fpAllowDelete Boolean True Whether to allow users to delete
directories and files.
fpAllowUpload Boolean True Whether to allow users to upload
files.
Have questions or comments? Feel free to contact us: [email protected]
AWS FilePicker 2.1 Documentation 16
Name Type Default Description
fpAllowRename Boolean True Whether to allow users to rename
files.
fpAllowMove Boolean True Whether to allow users to move
files and folders.
fpAllowCopy Boolean True Whether to allow users to copy files
and folders.
fpAllowChangeLanguage Boolean True If false, language selector is
hidden, so a user cannot change
language determined by means of
user’s browser settings. Use this if
you want to hide the language
selector.
fpUploadSizeLimit Int64 0 (restriction is If specified, restricts size of files
turned off) that can be uploaded (in bytes).
fpAllowedUploadFileExts String String.Empty (all Comma-delimited list of extensions
types accepted) representing file types allowed for
upload. All other types will be
blocked. If not specified, all the
types accepted.
Note: All the types in the table are CTS-types (Common Type System types) which
defined in the System namespace of .Net framework. Please refer to your
programming language documentation to find out what name any given CTS type has
in your programming language.
Have questions or comments? Feel free to contact us: [email protected]
AWS FilePicker 2.1 Documentation 17
Putting it all together…
So, what do you need from this list to run the control?
First, you probably want to customize the folder for uploaded files. Remember, you
should set an IIS virtual path (i.e. /Upload/), not physical path
(c:\Inetpub\wwwroot\mywebsite\Upload\):
Second, you probably want to restrict what can come into your system. You also
might want to restrict how heavy that file can be. AWS FilePicker gives you
opportunity to restrict uploading files by their size and type. For example, you can
restrict users to uploading pictures only (.gif and .jpg) with a file size smaller than
50KB. It is easy to implement:
Note that you should set max file size in bytes (50kb is 51200 bytes). You can also use
dots in file extensions (.gif, .jpg, .jpeg), but are not required to.
Finally, you probably want to limit the permissions of that user. With AWS FilePicker,
you can limit the permissions given to users on working with the file system. If you
want to grant special permissions for each user, you should set them during runtime
using the FilePicker properties directly. However, if you wish to define a permission set
that will be the same for all users, you can specify the parameters directly in the
FilePicker tag. In the following example, all users get the lowest privileges – they can
only browse and select files, but not upload them, create folders or delete anything.
Have questions or comments? Feel free to contact us: [email protected]
AWS FilePicker 2.1 Documentation 18
6.
User’s guide
6.1 General view
1. Root. Click to go to the root folder.
2. Up. Click to move one folder up.
Have questions or comments? Feel free to contact us: [email protected]
AWS FilePicker 2.1 Documentation 19
3. Copy. Click to save the selected files or folders in the FilePicker clipboard1 to be
duplicated or copied into another directory.
4. Cut. Click to copy the selected files and folders in FilePicker clipboard to be
moved into another directory.
5. Paste. Click to paste the files and folders previously saved in the FilePicker
clipboard.
6. New folder. Click to create a new folder in the current directory.
7. Delete. Click to delete selected files and folders.
8. Refresh. Click to refresh the view.
9. Reverse check. Click to check unchecked files and folder and uncheck checked
ones.
10. See thumbnails. Check to toggle previewing images (JPG, GIF, BMP, TIF and
PNG pictures supported).
11. Upload. Shows and hides the file upload panel.
12. Language selector. Allows selecting the preferred interface language.
13. Current path textbox. Displays current path.
14. Last action & current directory information. Displays the last action that
has been completed or the error that has occurred as a result of it. Also, shows
brief information about the current directory: number of files & directories and
the total size of all files in the folder.
15. Select / deselect all. Click to select or deselect all items in the list.
16. File / folder selection. Check to select a file or a folder. You can select as
many items as you desire to complete one action (coping, moving, etc) to them
at once.
17. File / folder name. Shows name of a file or folder. In the case of a folder,
clicking it will result in entering that folder, and it will become current. In the
case of a file, clicking it will result in selecting the file, after which the file
manager will close itself.
18. File size. Shows size of a file. Displays “Dir” in the case of a folder.
19. Last modification date & time. Displays date and time of when an item has
been modified (or created if no modifications took place).
20. Go to top. Click to move to the beginning of the list with one click.
21. Download folder in a zip file. Downloads an entire folder in a ZIP file.
22. Download file. Downloads a file.
23. Rename. Click to rename a file or a folder.
24. Go to bottom. Click to move to the end of the list with one click.
1
The FilePicker clipboard is completely independent on the Windows clipboard that you usually use to store
your information. Therefore, you will not loose the data saved in the Windows clipboard after you use the
FilePicker clipboard.
Have questions or comments? Feel free to contact us: [email protected]
AWS FilePicker 2.1 Documentation 20
6.2 Working with files
6.2.1 Selecting files
To select a file, just click on its name. The file manager window will close and the file
name will appear in the textbox on the main page.
Have questions or comments? Feel free to contact us: [email protected]
