File upload without refreshing the page - Ajax File Upload

When we use file upload control in web pages, it required to post the page to get the file uploaded. Below I describe how to upload a file without refreshing the page with better looking upload control.

Supported Browseres : Chrome, IE (6,7,8,9), Firefox, Safari

Demo : Upload without page refresh
Ajax Uploader Script : uploader.js

Our control will look like

 HTML Markup

This is our div control that will be converted to a upload control.
<div id="fileUploaderContainer" class="fileuploadcontainer"></div>

Need a button to upload selected files.
<input id="uploadbtn" type="button" value="upload" />

Page Load Script

We need to add following script to be called when page is loaded. So that it will wire up required events for the file upload and generate controls dynamically in side the given control ("fileUploaderContainer").


    $(document).ready(function () {

        $("#fileUploaderContainer").prepareAjaxUpload(
        {
            url: '../FileUpload/Upload',

            buttonImageUrl: '/images/fileUpload.png',

            viewStyle: 'fileuploadviewitem',
            browseStyle: 'fileuploadbutton',
            successStyle: 'fileuploadviewitemsuccess',
            errorStyle: 'fileuploadviewitemerror',
            onComplete: function (data) {
                if (data != null) {
                    //success upload : Do something if required
                }
                else {
                    //Error upload : show error 
                    alert('No file uploaded');
                }
            }
        });

        $("#uploadbtn").click(function () {
            $("#fileUploaderContainer").upload();
        });

    });

Upload Control Implementation in jquery

$.fn.prepareAjaxUpload = function (options) {

     this.constructor.prototype.uploadOptions = { url: '../FileUpload/Upload' };
    var uploadPath = options == null || options.url == undefined || options.url == null || options.url == '' ? this.uploadOptions.url : options.url;
    var viewStyle = options == null || options.viewStyle == undefined || options.viewStyle == null || options.viewStyle == '' ? null : options.viewStyle;
    var browseStyle = options == null || options.browseStyle == undefined || options.browseStyle == null || options.browseStyle == '' ? null : options.browseStyle;
    var uploadStyle = options == null || options.uploadStyle == undefined || options.uploadStyle == null || options.uploadStyle == '' ? null : options.uploadStyle;
    var successStyle = options == null || options.successStyle == undefined || options.successStyle == null || options.successStyle == '' ? null : options.successStyle;
    var errorStyle = options == null || options.errorStyle == undefined || options.errorStyle == null || options.errorStyle == '' ? null : options.errorStyle;
    var onComplete = options == null || options.onComplete == undefined || options.onComplete == null ? null : options.onComplete;
    var buttonImageUrl = options == null || options.buttonImageUrl == undefined || options.buttonImageUrl == null ? null : options.buttonImageUrl;
    $(this).empty();
    var fileupdcount = ($('input[type="file"]').length + 1).toString();
    var fileuploaderid = 'fileupload' + fileupdcount;
    var fileuploaderfrmid = 'fileuploadfrm' + fileupdcount;
    var fileuploaderframeid = 'fileuploadframe' + fileupdcount;
    var fileuploadpostbtnid = 'fileuploadpostbtn' + fileupdcount;

     var uploadform = document.createElement('form');
    $(uploadform).attr('method', 'post');
    $(uploadform).attr('id', fileuploaderfrmid);
    $(uploadform).attr('name', 'nm' + fileuploaderfrmid);
    $(uploadform).attr('action', uploadPath);
    $(uploadform).attr('enctype', 'multipart/form-data');
    $(uploadform).attr('target', 'nm' + fileuploaderframeid);

     var upload = document.createElement('input');
    $(upload).attr('type', 'file');
    $(upload).attr('name', 'nm' + fileuploaderid);
    $(upload).attr('id', fileuploaderid);
    if (uploadStyle == null || uploadStyle == '') {
        $(upload).attr('style', 'cursor:pointer;position:relative;height: 34px;min-height: 34px;width:70px;max-width:70px;line-height:30px;z-index:2px;margin-left:-2px;margin-top:-1px;');
    }
    else {
        $(upload).addClass(uploadStyle);
    }
    $(upload).css('opacity', '0');
    $(upload).css('-moz-opacity', '0');
    $(upload).css('filter', 'progid:DXImageTransform.Microsoft.Alpha(opacity=0)');

     var uploadview = document.createElement('div');
    if (viewStyle == null || viewStyle == '') {
        $(uploadview).attr('style', 'border: 1px solid #CFCFCF;background-color: #F7F7F7;height:32px;vertical-align:middle;margin:0;padding: 0px 10px 0px 10px;display:inline-block;float:left;border-collapse:collapse;color:#C5BFBF;line-height:32px;font-family:Tahoma;font-size:13px;letter-spacing:1px;overflow-x:hidden;overflow-y:scroll;');
    }
    else {
        $(uploadview).addClass(viewStyle);
    }
    $(uploadview).html('No File');
    $(upload).wrap(uploadview);

     var browseBtn = document.createElement('div');
    if (viewStyle == null || viewStyle == '') {
        $(browseBtn).attr('style','border: 1px solid #8B8282;position:relative;display:inline-block;float:left;border-collapse:collapse;cursor:pointer;width:32px;height:32px;');
    }
    else {
        $(browseBtn).addClass(browseStyle);
    }
    $(browseBtn).constructor.prototype.uploaderElement = upload;
    if (buttonImageUrl != null && buttonImageUrl != '') {
        $(browseBtn).css('background-image', 'url(' + buttonImageUrl + ')');
        $(browseBtn).css('background-repeat', 'no-repeat');
    }

     $(upload).bind('change', function () {
        if (errorStyle != null && errorStyle != '') $(uploadview).removeClass(errorStyle);
        if (successStyle != null && successStyle != '') $(uploadview).removeClass(successStyle);
        $(uploadview).html($(upload).val().split(/(\\|\/)/g).pop());
    });

     this.constructor.prototype.fileUploader = upload;
    this.constructor.prototype.uploaderForm = uploadform;
    this.constructor.prototype.uploaderView = uploadview;
    this.constructor.prototype.postButtonId = fileuploadpostbtnid;
    this.constructor.prototype.upload = function () {
        if ($(upload).val() != null && $(upload).val() != '') {
            $("#" + fileuploaderfrmid).submit();
        }
    };

     var ifrmsHtml = '';
    var frmcontainer = document.createElement('div');
    $(frmcontainer).html(ifrmsHtml);
    $(browseBtn).append(upload);
    $(uploadform).append(uploadview);
    $(uploadform).append(browseBtn);
    $(uploadform).append(frmcontainer);
    $(this).append(uploadform);

     var iframe = $("#" + fileuploaderframeid);
    iframe.constructor.prototype.uploaderView = uploadview;
    iframe.constructor.prototype.fileUploader = upload;
    iframe.constructor.prototype.onComplete = onComplete;

     $(uploadform).submit(function () {
        this.target = iframe.attr("name");
        iframe.get(0).processContent = true; // The use of this flag will be explained
    });

     $(iframe).load(function () {
        debugger;
        var iframeDocument = this.contentWindow || this.contentDocument;
        iframeDocument = iframeDocument.document ? iframeDocument.document : iframeDocument;
        var data = $('body', iframeDocument).html();
        var objRes = null;
        if (data != null && data != '') {
            var jsntext = data.substring(data.indexOf('{'), data.indexOf('}') + 1)
            objRes = jQuery.parseJSON(jsntext);
        }
        if (objRes != null) {
            if (objRes.Result == 'Success') {
                if ($.browser.msie) {
                    var uploadClone = $(upload).clone();
                    $(upload).replaceWith(uploadClone);
                    upload = uploadClone;
                    $(upload).bind('change', function () {
                        if (errorStyle != null && errorStyle != '') $(uploadview).removeClass(errorStyle);
                        if (successStyle != null && successStyle != '') $(uploadview).removeClass(successStyle);
                        $(uploadview).html($(upload).val().split(/(\\|\/)/g).pop());
                    });
                }
                else {
                    $(upload).val('');
                }
                $($(this).uploaderView).html('Completed');
                if (successStyle != null && successStyle != '') $(uploadview).addClass(successStyle);
                if (errorStyle != null && errorStyle != '') $(uploadview).removeClass(errorStyle);
            }
            else {
                $($(this).uploaderView).html('Error');
                if (errorStyle != null && errorStyle != '') $(uploadview).addClass(errorStyle);
                $if(successStyle != null && successStyle != '')(uploadview).removeClass(successStyle);
            }
            if ($(this).onComplete != null && $(this).onComplete != undefined) {
                $(this).onComplete(objRes);
            }
        }
    });

}


Sample Styles


.fileuploadcontainer
{
width:310px;
display:inline-block;
height:auto;
}

.fileuploadviewitem
{
border: 1px solid #CFCFCF;
background-color: #F7F7F7;
width:250px;
height:32px;
vertical-align:middle;
margin:0;
padding: 0px 10px 0px 10px;
display:inline-block;
float:left;
border-collapse:collapse;
color:#C5BFBF;
line-height:32px;
font-family:Tahoma;
font-size:13px;
letter-spacing:1px;
overflow-x:hidden;
overflow-y:scroll;
}

.fileuploadbutton
{
    border: 1px solid #8B8282;
position:relative;
display:inline-block;
float:left;
border-collapse:collapse;
cursor:pointer;
width:32px;
height:32px;
background-image:url(../../images/fileUpload.png);
overflow:hidden;
}

.uploaderinvisible
{
    cursor:pointer;    
position:relative;
    height: 34px;
    min-height: 34px;
width:70px;
max-width:70px;
line-height:30px;
z-index:2px;
margin-left:-2px;    
margin-top:-1px;    
    opacity: 0;
    -moz-opacity: 0;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
}

.fileuploadviewitemsuccess
{
    background-color: #E9FFD8;
    color: #149C19;
}

.fileuploadviewitemerror
{
    background-color: #FFF0F0;
    color: #E65454;
}

.invisibaleiframe
{
border:none;
margin:0;
padding:0;
overflow:visible;
height:auto;
width:auto;
}

Resources

File upload icon 

Jquery :  jquery-1.8.3.min.js


Comments

Post a Comment

Popular posts from this blog

CSS text-overflow ellipsis in the beginning of the the text - Left Ellipsis using CSS in a Flex box

Image
Problem: If you want to have css text overflow ellipsis in the left (beginning of the text), there is no straight forward solution to get it working in all browsers (especially in Safari). There are several CSS tricks that you will end up only working few browsers. It will be further difficult, if you are trying to achieve this in flex container. Solution: Combining few ideas found in the stack-overflow, manged to get it working in most of the browsers including safari. ".cont" is flex box and either you can set a width to it, or can inherit the width from parent container element. .ellipsis:after { content: ""; background-color: white; color: transparent; position: relative; z-index: 2; min-width: 100%; display: inline-block; min-height: 1rem; } .ellipsis { direction: rtl; display: inline-block; width: calc(100% - .1em); white-space: nowrap; overflow: h
Read more

Selenium With .Net

Recently I had a chance to work with Selenium framwork. It is pretty easy to intrgrate automated testing into .net with Selenium. Also for project like web site scrapping and automated posting, can be easily developped with few lines of code. Following code lines will automate a web site login with use of selenium framework. ISelenium selenium = new DefaultSelenium(seleniumServer, port, browser, website); selenium.Start(); selenium.Open(ConfigLoader.Configurations.LoginPageUrl); selenium.WaitForPageToLoad((ConfigLoader.Configurations.WaitingTime * 1000).ToString()); selenium.Type("ctl00_PageContent_UserName", ConfigLoader.Configurations.UserName); selenium.Type("ctl00_PageContent_Password", ConfigLoader.Configurations.Password); selenium.Click("ctl00_PageContent_OKButton__Button"); selenium.WaitForPageToLoad((ConfigLoader.Configurations.WaitingTime * 1000).ToString());
Read more

Handling Exit Event of Console Application in C#

Do you wan to do something on the exit event of Console Application. .Net framework does not provide such direct event to do that. You can use following workaround to have that kind of event in your application.         [STAThread]         static void Main(string[] args)         {             HandlerRoutine hr = new HandlerRoutine(Handler);             SetConsoleCtrlHandler(hr, true);             GC.KeepAlive(hr);          }         public static void DoOnAppExit()         {                   //Do something......         }         #region Handle App Exit         static Boolean Handler(CtrlTypes CtrlType)         {             // A switch to handle the event type.             switch (CtrlType)             {                 case CtrlTypes.CTRL_C_EVENT:                 case CtrlTypes.CTRL_BREAK_EVENT:                 case CtrlTypes.CTRL_CLOSE_EVENT:                 case CtrlTypes.CTRL_LOGOFF_EVENT:                 case CtrlTypes.CTRL_SHUTDOWN_EVENT:           
Read more