AWS FilePicker 2.1 Documentation

`

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

P
RELIMINARY 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

D
ESIGN OF
AWS

F
ILE
P
ICKER
......................................................................... 11

5.3

H
OW TO ADD
AWS

F
ILE
P
ICKER INTO YOUR APPLICATION
......................................... 12

5.4

C
ONFIGURING
AWS

F
ILE
P
ICKER
...................................................................... 14

General configuration properties.................................................................. 14

Appearance properties ............................................................................... 15

Security properties .................................................................................... 15

6. USER’S GUIDE ........................................................................................... 18

6.1

G

ENERAL VIEW
.......................................................................................... 18

6.2

W
ORKING 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:

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:

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
file manager
AWS FilePicker has a full-featured file manager that lets
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
download
FilePicker 2.1 introduces another amazing capability—Bulk
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
management
You can easily adjust the permissions you grant each
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:

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
localized interface
FilePicker comes with 4 supported languages right out of
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
& open source
AWS FilePicker is free software. You can freely modify and
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:
(English & Russian)
Juan López:
(Spanish)




Have questions or comments? Feel free to contact us:

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:

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:

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:

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:

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 (<identity impersonate="true">).
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.
<AWS:FilePicker id="FilePicker1" runat="server" fpUploadDir="~/Upload/"
fpAllowRename="false"></AWS:FilePicker>



5.1.3 Source code compilation

Have questions or comments? Feel free to contact us:

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:

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:

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 <%Page%> or
<%Control%> directive add this line to register the control:
<%@ Register TagPrefix="AWS" Namespace="AWS"
Assembly="FilePickerControl" %>
2. At the place where you want to insert the control, add the following tag:

Have questions or comments? Feel free to contact us:

AWS FilePicker 2.1 Documentation
14

<AWS:FilePicker id="FilePicker1" runat="server"></AWS:FilePicker>


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: