AWS FilePicker 2.1 Documentation

AWS FilePicker 2.1 Documentation

`

AWS FilePicker

.

Contents

1 INTRODUCTION 4

2 WHAT’S NEW? 6

3 SYSTEM REQUIREMENTS 7

4 INSTALLATION 8

5 DEVELOPER’S GUIDE 9

5.1PRELIMINARY NOTES 9

5.1.1 File system access issues 9

5.1.2 Known bugs 10

5.1.3 Source code compilation 10

5.2DESIGN OF AWSFILEPICKER 11

5.3HOW TO ADD AWS FILEPICKER INTO YOUR APPLICATION 12

5.4CONFIGURING AWSFILEPICKER 14

General configuration properties 14

Appearance properties 15

Security properties 15

6 USER’S GUIDE 18

6.1GENERAL VIEW 18

6.2WORKING 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

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

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

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

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: alex@awsystems.biz (English & Russian) Juan López: jlopez@awsystems.biz (Spanish)

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!

• Microsoft Internet Information Services;

• Visual Studio Net 2003 (not required but recommended for comfortable work);

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

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,

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">)

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

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

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

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:

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

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:

<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)

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/

Path to the File Manager ASPX file

fpPopupHeight Int32 500 Determines the File Manager window

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

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

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

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

<AWS:FilePicker id="FilePicker1" runat="server" fpUploadDir="~/Upload/"

<AWS:FilePicker id="FilePicker1" runat="server" fpUploadDir="~/Upload/"

fpUploadSizeLimit="51200" fpAllowedUploadFileExts="gif,jpg,jpeg"

fpAllowCreateDirs="false" fpAllowDelete="false" fpAllowUpload="false"

fpAllowRename="false" ></AWS:FilePicker>

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