How to Upload Images with NO visible-postback using C#, JavaScript and ASP.NET 2.0
dateJune 26 2013 | comments 0 comments
Introduction
Ever since Microsoft ASP.NET was introduced with version 1.0, we had the ability to upload files to the hosting server. On the internet there are a lot of articles that show you how to effectively use the new FileUpload server control offered through ASP.NET 2.0. However, none of those articles explains how to accomplish the uploading of files with no post back of the page. We will not explain in this article what a postback is or when does it happens, if you want to know more about that, you can check out this link:

http://stackoverflow.com/questions/183254/what-is-a-postback

The general environment needed for this behavior:
For example, we have a page where we display a list of companies, data which is displayed using the script service or jQuery.ajax(). For each company in this list we have a button 'Logo' and when we press on list we should show the FileUpload control to allow selecting a file as company logo. By pressing 'Save', we should upload in background the image/file and no page reload should occur. It sounds like a simple request, right?

The Idea:
Let’s discuss how we are going to accomplish this task. First, we should display the list of companies with inline buttons: one ‘Logo’ for selecting the image and one ‘Save’ to save it. Pressing the button ‘Logo’ by click should call a javascript method that will display the FileUpload popup. Next, we will create a new aspx page in the project, a simple page, which contains the asp.net FileUpload control and a button. The button 'save' related to each company will save the image and other data edited inline for the company.

The implementation in more details:

We should respect following steps:
1. To create the list of companies displayed. We will not show more details about this because it varies from developer to developer.
2. We will create a new page aspx, called 'FileUploader.aspx' and we will add:
    - a hidden field need for current company
    - the file upload control
    - optionally a validator
    - a button to submit the page to the server - in fact this button will save the image but the user will see nothing in the browser. Why? We will see below...
    Exactly what we are doing in this step you can find in next screenshot:


3. On the code behind of this page we will add the specific code to save the file/image to the hosting server. We have something like the following, but you should adapt it according to your needs:


4. We go back to our page where we are listing the companies and we add an iframe having the source the page from step 2.

<iframe id="frameUpload" name="frameUpload" src="FileUploader.aspx" style="width:1px;height:1px;margin-left:-50px;"></iframe>

5. Next, we create the javascript function that calls the uploadFile control from the 'FileUploader.aspx' page and allows to select the logo:

function Show_LogoUploader(company_id) {

        var myFrame = document.getElementById('frameUpload');

        $(myFrame).focus();

        $(myFrame).contents().find("#hdnProvider").val(company_id);

        $(myFrame).contents().find("#FileUpload1").click();

 

        document.getElementById("lnk_save_" + company_id).style.visibility = '';

    }
 

                What we have in this js function:

                                - we find the iframe and setup the current company selected

                                - we call by click the FileUpload to displayed as popup

                                - we display the link 'Save' on page - because it was initially hidden

 

6. The final block code that we need in this task is to create functionality for saving details and logo for the inline company. For this we have the following:

              function Company_Save(companyID) {

                 //here we could save more details for company

                 var myFrame = document.getElementById('frameUpload');

 var value = $(myFrame).contents().find("#FileUpload1").val();

 if (value != '') {

          $(myFrame).contents().find("#btnSubmit").click();

 }
$(myFrame).contents().find("#Validator_RegularExpression1").attr("style", "color:Red;font- size:12px;visibility:hidden;");               
}

                What we are doing in this js function:

                              - First we find the iframe and the value from control 'FileUpload1'

                             - If a value selected in FileUploader exists, we call by click the hidden button from page 'FileUploader.aspx' that will call the code method described in step 3.

               

Conclusion:

That's all. Following the steps above, we accomplished the file uploading with no page reload visible in the browser. You can also extend this article by adding validation and support for more image types.

I hope you liked the article, happy coding!

 


dateJune 26 2013 | comments 0 comments

How to Upload Images with NO visible-postback using C#, JavaScript and ASP.NET 2.0
Comments
Blog post currently doesn't have any comments.
Leave comment



 Security code