Simple Flash Uploader

Introduction

After spending some time searching the web for code to find uploading progress, I wrote this simple and easy to implement article based on a code library from swfupload.org. 

Using the code

To start, just follow these few steps:

1. Use the library JavaScript codes included in the article:

<script type="text/javascript" src="plugins/swfupload.js"></script>
<script type="text/javascript" src="plugins/swfupload.queue.js"></script>
<script type="text/javascript" src="plugins/fileprogress.js"></script>
<script type="text/javascript" src="plugins/handlers.js"></script> 

2. Then include the following code block in your code as:

<script type="text/javascript">
    var swfu;
 
    window.onload = function () {
        var settings = {
            flash_url: "flash/swfupload.swf",
            upload_url: "Default.aspx",
            post_params: { "PHPSESSID": "" },
            file_size_limit: "100 MB",
            file_types: "*.*",
            file_types_description: "All Files",
            file_upload_limit: 100,
            file_queue_limit: 0,
            custom_settings: {
                progressTarget: "fsUploadProgress",
                cancelButtonId: "btnCancel"
            },
            debug: false,
 
            // Button settings
            button_image_url: "images/TestImageNoText_65x29.png",
            button_width: "65",
            button_height: "29",
            button_placeholder_id: "spanButtonPlaceHolder",
            button_text: '<span class="theFont">Choose File</span>',
            button_text_style: ".theFont { font-size: 12;font-family:tahoma }",
            button_text_left_padding: 12,
            button_text_top_padding: 3,
 
            // The event handler functions are defined in handlers.js
            file_queued_handler: fileQueued,
            file_queue_error_handler: fileQueueError,
            file_dialog_complete_handler: fileDialogComplete,
            upload_start_handler: uploadStart,
            upload_progress_handler: uploadProgress,
            upload_error_handler: uploadError,
            upload_success_handler: uploadSuccess,
            upload_complete_handler: uploadComplete,
            queue_complete_handler: queueComplete	// Queue plugin event
        };
 
        swfu = new SWFUpload(settings);
    };
</script>

All files and options are fully described here. The most important one is upload_url that provides the sample code. It indicates the page that posts the progress.

3. Finally the server side code in the VB.NET sample:

Protected Sub Page_Load(sender As Object, e As System.EventArgs) Handles Me.Load
    For Each file As HttpPostedFile In Request.Files
        file.SaveAs("~/Videos/" & file.FileName)
    Next
End Sub