Asynchronous File Upload And Bootstrap Progress Bar

"JQUERY AJAX FORM" provides Asynchronous File upload feature.

The plugin can be found in the below link:-

To know about basics of this plugin checkout my previous post where i have shown a demo for asynchronous form upload.

In This Demo, "We will see a File upload with a BOOTSTRAP progress bar indicator".

Some of the facts of this demo:-

---- Used WAMP Server for deploying the Demo.
---- A BLANK dummy php file(dummy-file-upload.php) for target of file upload.
---- BOOTSTRAP for styling and progress bar indicator.

The Demo directory structure is as below:-

This plugin provides a method called "uploadProgress" with 4 parameters:-

event : shows the Progress bar event.
position : The current position of uploading file.
total : Total File Size.
percentComplete :Uploaded file in percent.

The HTML markup for bootstrap panel and file upload form is as below.

<!DOCTYPE html>
<html>
<head>
    <title>Jquery AjaxForm With Bootstrap Style</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/my-style.css">
</head>
<body>
    <form action="dummy-file-upload.php" id="my-detail-form" method="post" enctype="multipart/form-data">
        <!--Bootstrap Panel Markup :start -->
        <div class="panel panel-info ts-file-panel">
            <div class="panel-heading">
                <h3 class="panel-title">Ajax File Upload With Bootstrap</h3>
            </div>
            <div class="panel-body">
               <input name='filename' type="file"  placeholder="Browse File.">
               <button type="submit" class="btn btn-info">UPLOAD</button>
            </div>
            <div class="panel-footer">
                <p class="text-left text-info">
                    This Demo is For Asynchronous File upload using Ajax Form PlugIn.
                    CSS styles are done using Bootstrap Library.
                <p>
                <div class="ts-hidden-bar">
                    <!--Bootstrap Progressbar Markup :start -->
                    <div class="progress progress-striped active ">
                        <div class="progress-bar"  role="progressbar" style="width: 0%">
                            <span class="sr-only">0% Complete</span>
                        </div>
                    </div>
                </div>
                    <span class="ts-file-size"></span>
                    <span class="ts-file-completed"></span>
                    <!--Bootstrap Progressbar Markup :end -->
                    <!--Bootstrap Alert Markup :start -->
                    <div class="alert alert-warning  my-message-error">
                        <a href="#" class="alert-link">...</a>
                    </div>
                    <!--Bootstrap Alert Markup :end -->
            </div>
        </div>
        <!--Bootstrap Panel Markup :end -->
    </form>
    <script src="lib/jquery-1.10.1.min.js"></script>
    <script src="lib/jquery.form.min.js"></script>
    <script src="my-form-script.js"></script>
</body>
</html>

The javascript file for validation and uploading file is as bellow,

/**
 * Created by saan on 10/6/13.
 */
var TS_AJAX_FORM ={

    /*ERROR Message Display Element Reference*/
    MY_MESSAGE_ERR : $(".my-message-error"),

    /*SUCCESS Message Display Element Reference*/
    MY_MESSAGE_SUC : $(".my-message-success"),

    /*Shows the input message and hides it in 5 seconds*/
    showMessage:function(msg, type){

        var message = (type === 'ERR')? this.MY_MESSAGE_ERR : this.MY_MESSAGE_SUC,

            txt = $(message).find('a');

        $(txt).html(msg);

        message.fadeIn('fast',function(){

            message.fadeOut(5000);
        })
    },
    /*
     *Handler: success, Once the form is submitted and response
     *arrives, it will be activated.
     */
    successHandler: function(responseText, statusText, xhr, form){

        $('.ts-file-panel .progress-bar').width('100%');
        $('.ts-hidden-bar').delay(1000).fadeOut('fast')
    },
    /*
     *responseText, statusText, xhr, $form: beforeSubmit, for validation   Let, title and roll is your required field.
     *Let's show an error message if these fields are blank.
     */
    beforeSubmitHandler:function(arr, form, options){

        var isValid = true;

        $.each(arr,function(index, aField){

            if('filename' === aField.name && aField.value === ""){

                TS_AJAX_FORM.showMessage("Please Select a File.", "ERR");

                isValid = false;
            }
        });

        if(isValid){
            $('.ts-hidden-bar').fadeIn();
        }
        return isValid;
    },
    handleUploadProgress: function(event, position, total, percentComplete ){

        $('.ts-file-panel .progress-bar').width(percentComplete+'%');
        $('.ts-file-size').html((total/(1024*1024))+'MB');
        $('.ts-file-completed').html('Position'+position+' event '+event);
    },
    /*Initializing Ajax Form*/
    initMyAjaxForm:function(){

        $("#my-detail-form").ajaxForm({

            beforeSubmit:this.beforeSubmitHandler,

            success:this.successHandler,

            clearForm:true,

            uploadProgress:this.handleUploadProgress

        });
    }
};
/*My Small Tutorial: Execution point*/
$(document).ready(function(){
    TS_AJAX_FORM.initMyAjaxForm()
});

The initial rendering of the panel is as below:-

The Firebug markup inspection shows the form element using multipart for file upload.The screenshot for this is as below,

When no file is selected and upload button is pressed a validation error message will be shown at the footer of the panel.The screenshot for this as below,