Flajaxian Direct Amazon Uploader 1.0

What is Flajaxian Direct Amazon Uploader 1.0

Flajaxian Direct Amazon Uploader is adapter to Flajxian FileUploader 2.0 .NET server control. It extends the functionality of the Flajaxian FileUploader to allow direct uploads to an Amazon S3 Web Service.

Flajaxian FileUploader is free and open source .NET web control designed for asynchronous file upload of multiple files at the same time, without a page post back and with a progress bar indicating the current upload progress. This control does not require full trust environment. The control can be extended with the addition of server side and client side functions. Flajaxian FileUploader uses Adobe Flash Player 9 or higher Flash Player for the file upload request.

For more information on Flajaxian FileUploader please visit http://www.codeplex.com/FlajaxianFileUpload

Security

Flajaxian Direct Amazon Uploader is secure because it transfers only encrypted value of your secret key but NOT the key itself. When the user selects a file or group of files and clicks on the upload button, initial ajax request to is performed back to the server with the list of files. The response returns to the flash player encoded policy signed by your secret key but the key never leaves your server. Then the files with the signed policy are being send to the amazon server. Additional checks are added to your policy to prevent tampering with your request. As another measure you can use the crossdomain.xml described in point 4 of How to use Flajaxian Direct Amazon Uploader 1.0 topic to limit the list of domains allowed to request the amazon server.

How to use Flajaxian Direct Amazon Uploader 1.0

The only thing you need to have in order to start using the Flajaxian Direct Amazon Uploader are the two DLL files com.flajaxian.FileUploader.dll and com.flajaxian.DirectAmazonUploader.dll. You can get the latest version of com.flajaxian.FileUploader.dll file for free from the codeplex site. Just click on the Releases tab and then click on Binary DLL link.

Once you have those DLLs you can follow these steps.

  1. Place com.flajaxian.FileUploader.dll and com.flajaxian.DirectAmazonUploader.dll in the BIN folder of your web server.
  2. Add the following tags at the top of your aspx page, .master or ascx files:
    <%@ Register TagPrefix="fjx" Namespace="com.flajaxian" Assembly="com.flajaxian.FileUploader" %>
    <%@ Register TagPrefix="fjx" Namespace="com.flajaxian" Assembly="com.flajaxian.DirectAmazonUploader" %>
  3. Add the following tags inside the FORM element of the BODY element of the ASPX page, where you would like to see the uploader
    <fjx:FileUploader ID="FileUploader1" runat="server">
        <Adapters>
            <fjx:DirectAmazonUploader 
                AccessKey="WebConfig:AmazonAccessKey"
                SecretKey="WebConfig:AmazonSecretKey"
                BucketName="media.flajaxian.com"  />
        </Adapters>
    </fjx:FileUploader>
  4. Upload a public-readable crossdomain.xml file to the root of the bucket that will accept POST uploads. Following is a sample crossdomain.xml file.
    <?xml version="1.0"?>
    <!DOCTYPE cross-domain-policy SYSTEM
    "http://www.macromedia.com/xml/dtds/cross-domain-policy.dtd">
    <cross-domain-policy>
      <allow-access-from domain="*" secure="false" />
    </cross-domain-policy>

    If using SSL (https:// connection) the property secure must be set to true. And also if you have dots in your bucket name they have to be replaced with dashes or omited. So if your bucket is my.image.folder change it to my-image-folder or myimagefolder.

    The crossdomain.xml file is needed because by default, the Adobe Flash Player security model prohibits Adobe Flash Players from making network connections to servers outside the domain that contains the SWF file. This file helps to override this behaviour. For more information about the Adobe Flash security model, go to the http://www.adobe.com/devnet/flashplayer/security.html

    For more information about crossdomain.xml please visit http://www.adobe.com/devnet/articles/crossdomain_policy_file_spec.html

    You could use S3Fox Organizer for Amazon free Firefox Browser tool for uploading that file.

    Please note that by default Flajaxian Direct Amazon Uploader will NOT allow the users of the site to override this file. This is because the file is needed for the upload of the files. If for some reason you want to allow that, set the property AllowRootCrossDomainXmlUpload="true"

Here you specify that Access Key and Secret Key are defined in the web.config in section configuration/appSettings as follow:

<appSettings>
  <add key="AmazonAccessKey" value="ABCDEFGHKL1234567890" />
  <add key="AmazonSecretKey" value="ABCD1234ABCD1234ABCD1234ABCD1234ABCD1234" />
</appSettings>

You can also enter the Access Key and Secret Key directly omitting the WebConfig: prefix.

The Bucket Name is set to be media.flajaxian.com

Upload to a folder inside the bucket

If you want to upload to a folder inside your bucket you have to enter the Path property. For example if you want to upload to a folder Folder1 that is contained inside the folder ParentFolder that is inside the MyBucket1 you would use:

<fjx:FileUploader ID="FileUploader1" runat="server">
    <Adapters>
        <fjx:DirectAmazonUploader
            Path="ParentFolder/Folder1"
            AccessKey="WebConfig:AmazonAccessKey"
            SecretKey="WebConfig:AmazonSecretKey"
            BucketName="MyBucket1"  />
    </Adapters>
</fjx:FileUploader>

Specifying file permissions

You can specify the file permissions by setting the FileAccess property. The possible values for that property are Private, PublicRead, PublicReadWrite, AuthenticatedRead. By default the access is defined to be PublicRead. If you want to make it Private use:

<fjx:FileUploader ID="FileUploader1" runat="server">
    <Adapters>
        <fjx:DirectAmazonUploader
            FileAccess="Private"
            AccessKey="WebConfig:AmazonAccessKey"
            SecretKey="WebConfig:AmazonSecretKey"
            BucketName="media.flajaxian.com"  />
    </Adapters>
</fjx:FileUploader>

Changing the name of the uploaded file

You can use FileNameDetermining event to change the name of the uploaded file. You can see that in the following example:

<script runat="server">
private void FileUploader1_FileNameDetermining(object sender, FileNameDeterminingEventArgs e)
{
    // set the filename here
    // you can also use e.File - HttpPostedFile object
    e.FileName = ...;
}
</script>
<fjx:FileUploader ID="FileUploader1" runat="server">
    <Adapters>
        <fjx:DirectAmazonUploader OnFileNameDetermining="FileUploader1_FileNameDetermining"
            AccessKey="WebConfig:AmazonAccessKey"
            SecretKey="WebConfig:AmazonSecretKey"
            BucketName="media.flajaxian.com"  />
    </Adapters>
</fjx:FileUploader>

The property of FileNameDeterminingEventArgs object, that you can use is FileName. Properties File and CancelProcessing cannot be used because there is no postback to the server this is only a quick ajax call.

Saving the name of the uploaded file to a local database

If you want to save the name of the uploaded file to a database you can use ConfirmUpload event. If no handler for this event is specified, no ajax calls are performed back to the server after the file upload. But if you specify event handler, then after each file upload, whether successful or not there will be a quick GET ajax request back to the server to confirm the file upload. This is how the server event is triggered. Here is an example of how to use it:

<script runat="server">
private void FileUploader1_ConfirmUpload(object sender, ConfirmUploadEventArgs e)
{
    // Save the file information to a database here
}
</script>
<fjx:FileUploader ID="FileUploader1" runat="server">
    <Adapters>
        <fjx:DirectAmazonUploader OnConfirmUpload="FileUploader1_ConfirmUpload"
            AccessKey="WebConfig:AmazonAccessKey"
            SecretKey="WebConfig:AmazonSecretKey"
            BucketName="media.flajaxian.com"  />
    </Adapters>
</fjx:FileUploader>

The properties of the ConfirmUploadEventArgs object, that you can use are:

NameThe name of the uploaded file
ChangedNameIf the name was changed through FileNameDetermining event, new file name will be here
PathThe path of folders inside the bucket
HttpStatusInteger value of the HTTP status
BytesThe number of bytes of that file
IsErrorBoolean flag indicating whether there has been an error
IsLastBoolean flag indicating whether this is the last file
IndexIndex of the uploaded file

How to confirm file upload on client-side (JavaScript)

Here is an example of how you can confirm the file upload on the client side

<script runat="server">
private void ConfirmUpload(object sender, ConfirmUploadEventArgs e)
{
    // if you don't want to do anything on the server 
    // just leave it empty
}
</script>
<script>
function ConfirmUploadJsFunc(r){
    alert("ConfirmUploadJsFunc: isError:"+r.isError+",isLast:"+r.isLast+",httpStatus:"+r.httpStatus+
            ",index:"+r.index+",bytes:"+r.bytes+",name:\""+r.name+"\", changedName:\""+r.changedName+"\"");
}
</script>
<fjx:FileUploader ID="FileUploader1" runat="server">
    <Adapters>
        <fjx:DirectAmazonUploader OnConfirmUpload="ConfirmUpload" ConfirmUploadJsFunc="ConfirmUploadJsFunc"  
            AccessKey="WebConfig:AmazonAccessKey"
            SecretKey="WebConfig:AmazonSecretKey"
            BucketName="media.aquariusinternet.com"  />
    </Adapters>
</fjx:FileUploader>

The fields you can use on the client-side argument are:

nameThe name of the uploaded file
changedNameIf the name was changed through FileNameDetermining event, new file name will be here
pathThe path of folders inside the bucket
httpStatusInteger value of the HTTP status
bytesThe number of bytes of that file
isErrorBoolean flag indicating whether there has been an error
isLastBoolean flag indicating whether this is the last file
indexIndex of the uploaded file

How to change the folder path on client-side (JavaScript)

You can change the folder path with client side code, but because this has security implications first you have to allow it by setting AllowPathDefinedByClient property to true. Here is sample code:

<fjx:FileUploader ID="FileUploader1" runat="server">
    <Adapters>
        <fjx:DirectAmazonUploader AllowPathDefinedByClient="true" 
            AccessKey="WebConfig:AmazonAccessKey"
            SecretKey="WebConfig:AmazonSecretKey"
            BucketName="flajaxian1"  />
    </Adapters>
</fjx:FileUploader>

<script>
  window.<%=FileUploader1.ClientID%>_DirAmz.set_path("Folder1/SubFolder2");
</script>

www.Flajaxian.com - Flajaxian © 2008