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

Embedding PowerBI with ASP.NET Core 2 and Angular(2,4,5)

Image
Background 
Integration of PowerBI into ASP.Net is straightforward as far as you follow the Microsoft documentation. When it comes to ASP.NET Core 2, it is not, at the time of writing this article. Let me guide you through the steps I followed to successfully embed PowerBI reports to our ASP.NET Core2 / Angular5 enterprise website.

Two Scenarios

 1. User Owns Data - where users will be directly registered in PowerBi portal
https://docs.microsoft.com/en-us/power-bi/developer/integrate-report
2. App Owns Data - you have an application which owns the data and you have users to view these reports but they are not registered in PowerBI as direct users - ISV situation
https://docs.microsoft.com/en-us/power-bi/developer/embed-sample-for-customers
Following steps are focused on scenario 2 which is app own data, but it is not limited to use this information for scenario 1 as well.
[Flow of authentication and authorization (from Microsoft documentation)]
Step 1: Register your app
Make sure your app…
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:
                    DoOnAppExit();
  …
Read more

Taxi - Cab services in Colombo - Sri Lanka

This is the list of cab / taxi services operating in Colombo - Sri Lanka.


KangarooCabs
Address: 91 1/6, Galle Road, Colombo 4
Contact Number: 2501501 / 2588588 / 2502888

Radiant Cabs
Address: 455, Galle Road, Colombo3
Contact Number: 2556556

City Cabs
Address: 422, Galle Road, Colombo 6
Contact Number: 2552222

Colombo Cabs
Address: 326, Hospital Road, Kalubowila, Dehiwala
Contact Number: 4203303

Excel Cabs
Address: 831 1.2 Kotte Road,Ethul Kotte
Contact Number: 2889889


Yellow Radio Cabs
Address : 315 St Clair, Wattala, Wattala
Contact Number:: 2942942


ACE Cabs
Address: 298-1/1. Colombo Road, Pepiliyana
Contact Number: 2818818

Airport Express
Address: 65/6, Kirula Road, Colombo 5
Contact Number: 5555050

Airport Link
Address: 73/28, Temple Road, Colombo 5
Contact Number:5336666

A R S Cab service
Address: 46, Sri Siddhartha Road, Colombo 6
Contact Number: 5054153

Create Tours
Address: 3, Wijeyaba Mawatha, Nawala
Contact Number: 5377677

GNTC (Namdo cabs)
Address: 85, Cotta Road, Colombo 6
…
Read more