What is the best way to show the loader while uploading the file in gridview

Question

What is the best way to show the loader while uploading the file in gridview

BeUnique 2,332

I am using gridview for displaying and inserting new records.

i'm using loader wherever it is required in the gridview. it is working fine.

i'm trying to use animation loader for specific upload column in gridview.

will it possible to show the loader only for specific column...?

see below my code.

User's image

<div id="divGrid" style="height: 105PX; width: 99%">
 <asp:GridView ID="grdBills" AutoGenerateColumns="False" runat="server"  Width="100%"
  DataKeyNames="Id" >
<asp:TemplateField ItemStyle-HorizontalAlign="Center">
   <HeaderTemplate>
   <label style="text-align: center; display: block;">Country</label>
   </HeaderTemplate>
   <ItemTemplate>
   </ItemTemplate>
   <EditItemTemplate>
        <asp:TextBox ID="txtEditcountry"  runat="server" Text='<%#DataBinder.Eval(Container.DataItem, "country") %>'></asp:TextBox>
   </EditItemTemplate>
</asp:TemplateField>
<asp:TemplateField ItemStyle-HorizontalAlign="Center">
<HeaderTemplate>   
      <label style="text-align: center; display: block;">Name</label>   </HeaderTemplate>
	<ItemTemplate>
	   <asp:Label ID="lblname"  runat="server" Text='<%#DataBinder.Eval(Container.DataItem, "Custname") %>'></asp:TextBox>
	</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField ItemStyle-HorizontalAlign="Center">
   <HeaderTemplate>
   <label style="text-align: center; display: block;">File Upload</label>
   </HeaderTemplate>
   <ItemTemplate>
   </ItemTemplate>
   <EditItemTemplate>
   	   <asp:FileUpload ID="fuUpload" runat="server" />
	   <asp:Label ID="filename" runat="server" />
	   <asp:Button ID="btnUpload" Text="Upload" OnClick="Upload" runat="server" Style="display: none" />
   </EditItemTemplate>
</asp:TemplateField>

protected void Upload(object sender, EventArgs e)
  {
        System.Threading.Thread.Sleep(2000);
        --------
        --------------
         Label label = (control.FindControl("ImageErrorLabel") as Label);
         FileUpload fuUpload = (FileUpload)control.FindControl("fuUpload");
  }

Note : i using loader the entire gridview. i want only animation loader only for upload column of the grid.

Accepted answer

3 additional answers

Your answer

Answer 1

Lan Huang-MSFT 30,191 Microsoft External Staff

Hi @Gani_tpt,

You can do this with the following code.

 <script type="text/javascript">
     function UploadFile(fileUpload) {
         if (fileUpload.value != '') {
             $("[id*=gvCustomers]").find("[id*=btnUpload]").click();
           
         }
     }
     function ShowProgress() {
         $("[id*=gvCustomers]").find("[id*=loading_img]").show(); 
     }
 </script>

 <EditItemTemplate>
     <asp:FileUpload ID="fuUpload" runat="server" />
     <asp:Label ID="ImageErrorLabel" runat="server" Text='<%# Eval("FileName") %>' />
     <asp:Button ID="btnUpload" Text="Upload" OnClick="Upload" runat="server" OnClientClick="ShowProgress();" Style="display: none" />
     <img id="loading_img" runat="server" style="Display: None" src="https://i.pinimg.com/originals/8a/c1/29/8ac12962c05648c55ca85771f4a69b2d.gif" width="50" height="50"/>                                       
 </EditItemTemplate>

Best regards,
Lan Huang

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

BeUnique 2,332 Reputation points

2024-06-11T08:10:48.2366667+00:00

Hi @Lan Huang-MSFT ,

Uploading image is perfect.

Can i have any other images like "File uploading...pls. wait..."
BeUnique 2,332 Reputation points

2024-06-13T17:08:31.6566667+00:00

Hi @Lan Huang-MSFT ,

Can i have any other images like "File uploading...pls. wait..."
Lan Huang-MSFT 30,191 Reputation points Microsoft External Staff

2024-06-14T01:48:21.4233333+00:00
Hi @Gani_tpt,

There are many images on the Internet, you can find them yourself. Finding images is not within the scope of our support.

I found a picture that is close to what you need, I hope it can meet your needs.

https://astrogen.aas.org/front/images/plzwaitloader.gif

Or you can refer to Albert Kallal's code to implement it with text.

<div id="loading_img" style="display: none"> <img src="https://i.pinimg.com/originals/8a/c1/29/8ac12962c05648c55ca85771f4a69b2d.gif" width="64" /> File uploading...pls. wait... </div>
BeUnique 2,332 Reputation points

2024-06-14T17:12:01.3966667+00:00

Thank you very much for all your support........

Answer 2

The issue is with the standard file upload is it requires a post-back.

So, you could say show a spinner ... please wait message when you click the save button which presumably triggers a post-back.

So, the really simple trick is to attach both a client side click event, and a server side event to the button that triggers the upload.

So, the proof of concept looks like this:

markup:

            <asp:Button ID="cmdSave" runat="server" 
                Text="Button" CssClass="btn"
                OnClick="cmdSave_Click"
                OnClientClick="$('#myprogress').show()"
                />
            <br />

            <div id="myprogress" style="display:none">
                <img src="../Content/wait2.gif" width="64px" />
                Uploading files - please wait
            </div>

And our code behind can fake a "long" process, say a few seconds:

        protected void cmdSave_Click(object sender, EventArgs e)
        {
            System.Threading.Thread.Sleep(4000); // fake a delay
        }

And the result looks like this:

wait6

Note close how we don't have to re-hide the div and progress area, since after the code behind is done, then a WHOLE NEW web page is sent back from the server, and as a result the div area will automatic revert to its original state (display:none).

However, I actually think much better idea is to up-load files as they are selected, and that means dumping the built in FileUpLoad control (it is difficult to work with). If you adopt a ajax file uploader, then you don't require a post-back to upload such files. This in theory would allow uploading of several files, but no post-back is required. Of course, this then suggests that when you click on the file (upload) button for a row, then you popup a up-loading dialog of some type.

Answer 3

BeUnique 2,332

Hi @Albert Kallal ,

Thanks for your reply.

No separate button for save/update outside of the gridview...

upload button is available inside the gridview. so in this case, can we show the loader for entire gridview...?

Albert Kallal 5,586 Reputation points

2024-06-07T20:08:14.0566667+00:00

Well, if you have a save button for each row, then the above idea (attaching a client side event to show the spinner might work).

As noted, I don't like the built in GridView editing, as it produces a poor user experience for the end user if you using in-line editing.

As for uploading and a progress bar? I suggest using a modern up-load control. And even perhaps popping a dialog for that upload.

Say, something like this UI:

So, I needed some notes + comments for the file being up-loaded. So, I pop a dialog with a text area, and also used a ajax file uploader (it has a built in progress bar during the upload). And it also has a drag + drop "hot spot" area so users don't even have to use the select file, but an use drag + drop to add files to the upload list.

So, the above also would work nice for a ListView/GridView that when the user hits upload button, you pop open a dialog for uploading files. The progress bar is thus part of the AjaxToolKit file uploader. The other nice part is the upload occurs without a post-back. There is also a single file uploader, and it can even start uploading automatic without having to hit anything, and once again, it has built in provisions for a progress bar.

Of course, in the above example, I need user comments for the file being supplied, and thus that was the reason for popping a dialog first. And on that page, you note how I am displaying a PDF file imbedded in the page.

However, if in that single grid row, you do have a save button, then that's when the file is presumably being up-loaded, and as a result, the first suggestion of showing a spinner area would and should work just fine - even a spinner in that row markup would and could work.

I think uploading is such a "high" value and "very" important aspect of any web site, and thus I tend to use the best uploader control I can find, and one that does not require a post-back to upload files.
BeUnique 2,332 Reputation points

2024-06-11T04:42:39.2333333+00:00

Hi @Albert Kallal ,

Thanks for your great suggestions.

can you pls. share the above example code (AjaxToolKit file uploader). i will try for the same.

Albert Kallal 5,586

Sure, say we have a simple GridView, and a upload button on the GridView.

Note how we now ONLY HAVE one upload control - since w are popping it up, then we don't need the fileupload code in each row of the GridView.

So, say this grid in which we want to upload a hotel picture for a given row.

            <asp:GridView ID="MyGrid" runat="server" CssClass="table table-hover"
                DataKeyNames="ID" AutoGenerateColumns="false">
                <Columns>
                    <asp:BoundField DataField="HotelName" HeaderText="Hotel Name" />
                    <asp:BoundField DataField="Description" HeaderText="Description" />
                    <asp:TemplateField HeaderText="Upload Picture">
                        <ItemTemplate>
                            <asp:Button ID="cmdUpLoad" runat="server"
                                Text="Upload"
                                OnClick="cmdUpLoad_Click" />
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="Picture">
                        <ItemTemplate>
                            <asp:Image ID="imgHotel" runat="server"
                                ImageUrl='<%# Eval("UpLoadFile") %>'
                                Height="132px" />
                        </ItemTemplate>
                    </asp:TemplateField>
                </Columns>
            </asp:GridView>
        </div>
        <asp:Button ID="cmdUpLoadPostBack" runat="server" Text="upload done"
            ClientIDMode="Static" Style="display: none"
            OnClick="cmdUpLoadPostBack_Click" />
        <div id="picupload" style="display: inline">
            <ajaxToolkit:AsyncFileUpload ID="AsyncFileUpload1" runat="server"
                OnClientUploadComplete="uploaddone"
                OnUploadedComplete="AsyncFileUpload1_UploadedComplete" />
        </div>
        <script>
            function myuploadpop(ctrl) {
                btn = $('#' + ctrl)
                var myDialog = $("#picupload");
                myDialog.dialog({
                    title: "Select picture for Hotel",
                    modal: true,
                    width: "400px",
                    dialogClass: "dialogWithDropShadow",
                    appendTo: "form",
                    position: { my: 'left top', at: 'right bottom', of: btn },
                    dialogClass: "dialogWithDropShadow",
                    buttons: {
                        Cancel: function () {
                            myDialog.dialog("close")
                        }
                    }
                })
            }
            function uploaddone() {
                $('#cmdUpLoadPostBack').click()
            }
        </script>

So, note in the above case, we have to make "extra" efforts, since the AsyncFileUpLoad does NOT do a page post back. In above, I forced a page post back with that jQuery.click(), since after uploading, I wanted to refresh the Grid.

So, code behind is thus this:

        protected void Page_Load(object sender, EventArgs e)
        {
            if (IsPostBack == false)
            {
                LoadGrid();
            }
        }

        public void LoadGrid()
        {
            string strSQL =
                @"SELECT * FROM tblHotelsA
                ORDER BY HotelName";
            MyGrid.DataSource = General.MyRst(strSQL);
            MyGrid.DataBind();
        }

        protected void Button1_Click(object sender, EventArgs e)
        {
            LoadGrid();
        }


        protected void cmdUpLoad_Click(object sender, EventArgs e)
        {
            Button btn = (Button)sender;
            GridViewRow gRow = (GridViewRow)btn.NamingContainer;

            int PK = (int)MyGrid.DataKeys[gRow.RowIndex]["ID"];
            Session["HotelPK"] = PK; // save database PK for later use

            string MyJava = $"myuploadpop('{btn.ClientID}');";
            ScriptManager.RegisterStartupScript(Page, Page.GetType(), 
                                                "popcode", MyJava, true);
        }

        protected void cmdUpLoadPostBack_Click(object sender, EventArgs e)
        {

            LoadGrid();  // refresh grid to show new picture
        }

        protected void AsyncFileUpload1_UploadedComplete(object sender, AjaxControlToolkit.AsyncFileUploadEventArgs e)
        {
            string sPicURL = $"~/Content/Hotels/{e.FileName}";
            string sInternalFile = Server.MapPath(sPicURL);
            AsyncFileUpload1.SaveAs(sInternalFile);

            string strSQL =
                @"UPDATE tblHotelsA SET UpLoadFile = @File
                WHERE ID = @ID";
            SqlCommand cmdSQL = new SqlCommand(strSQL);
            cmdSQL.Parameters.Add("@File", SqlDbType.NVarChar).Value = sPicURL;
            cmdSQL.Parameters.Add("@ID", SqlDbType.Int).Value = Session["HotelPK"];
            General.MyRstE(cmdSQL);
        }

And the result is now this:

uploadpo

As I have suggested in the past, I think it is better to pop a edit dialog for each row, and not try to have a boatload of buttons and functions and ALSO try to edit data in one row. This also allows you to move most of your markup out of the GridView. I suggest that the GridView can display the rows, but having a edit button to launch a edit form works better, and the code will become more maintainable.

So, as above shows, popping a upload dialog not only moves code and logic out of the GridView, but we wind up with ONLY ONE copy of the upload code that can be used for all rows. The same goes for editing a row, and over time as you add more features and business logic, then the more difficult it will become to try and manage editing "in-line" as opposed to simple popping up of a form to edit that row data.

BeUnique 2,332 Reputation points

2024-06-13T17:09:55.3433333+00:00

Hi @Albert Kallal ,

really awesome answer and helpful demo with code..

Answer 4

just under a hidden loader next to the upload button, or if using bootstrap add the loader to the button itself. then on client click event display loading.

<EditItemTemplate>
   	   <asp:FileUpload ID="fuUpload" runat="server" />
	   <asp:Label ID="filename" runat="server" />
	   <asp:Button ID="btnUpload" Text="Upload" 
              OnClick="Upload" 
              OnClientClick="$(this).closest('tr').find('img').show()"
              runat="server" 
              Style="display: none" />
       <img src="../Content/wait2.gif" width="64px" style="display:none" />
</EditItemTemplate>

Share via

What is the best way to show the loader while uploading the file in gridview

3 additional answers

Your answer