Clear progress bar after file upload

Hi,

Is there a way to clear the progress bar after the file upload is complete? I am using the WebUpload for uploading a single file only.

My ultimate objective is to “reset” the upload control on a server event.

Awaiting reply, thanks in advance.

 

Hi sharonks,

If you upload only one file you can setup mode to be "single".

Also you can hide the whole progressbar area. For instance: if your widget has id fileuploader then in fileuploaded event you can do $('#fileuploader_spbcntr').hide();

Also if you want after each upload to be shown info ONLY for one file you can do this:

$('#fileuploader').igUpload({

…

fileUploaded:

 

function (event, args) {

 

 

var $fileuploader = $(this), data = $fileuploader.igUpload('getFileInfoData');

data.fileSizeUploaded = 0;

 

//args.totalSize;

data.fileSizeTotal = 0;

 

//args.totalSize;

 

 

if (data.countUploadingFiles === data.countTotalFiles) {

data.countUploadingFiles = 0;

data.countTotalFiles = 0;

}

　

},

…

});

In this way when you start uploading new file it will be shown that count of total files is 1 and total uploading file size is only for the file you upload. This is a hack and as I said if you want to upload only one file you can set mode to single.

Thanks,

Miro Hristov

Hi Miro Hristov,

Thank you for your response.

I tried implementing the solution you suggested, but it does not seem to work. The progress bar is not geting hidden. Please help!

Code:

function igFileUploaded(sender, eventArgs) {

   $('#ctl00_ContentPlaceHolder1_WebUpload1_spbcntr').hide();

   //$('#' + '<%=WebUpload1.ClientID %>' + '_spbcntr').hide();

   //$('#WebUpload1_spbcntr').hide();

}

 

 

<ig:WebUpload ID="WebUpload1" runat="server" AutoStartUpload="true" ShowFileExtensionIcon="true" OnUploadFinished="WebUpload1_UploadFinished" ClientEvents-FileUploaded="igFileUploaded" ClientEvents-FileUploading="igFileUploading" LabelAddButton="Replace File"></ig:WebUpload>

Thanks,

Sharon

Hi sharonks,

If you want to remove ONLY summary progress bar you can do this.

$('#fileuploader_summpbar').hide()

Also you can debug to see whether $('#fileuploader_summpbar') exists for instance to check its length – it should be 1. IN this way you will be sure that you get the file uploader ID in the correct way.

Thanks,

Miro Hristov

Hi Miro Hristov,

You have correctly pointed out the problem  – the file upload ID is not correct because the length is shown 0 in debugger. Unfortunately, I have tried different ways but still cant get the ID right.

My page has a master page and the upload control is seen to to rendered as following when I viewed source from browser:

<div id="ctl00_ContentPlaceHolder1_WebUpload1">

 

</div>

I have tried out the following ways but still no luck, all show length zero:

1. $('#ctl00_ContentPlaceHolder1_WebUpload1_summpbar')

2. $('#' + '<%=WebUpload1.ClientID %>' + '_summpbar')

3. $('#WebUpload1_summpbar')

Awaiting reply.

Hi sharonks,

I have tested with simple aspx page (which is content page in master page). Here is my code and everything is working properly(I have tested in IE9, Mozilla FF and Chrome too)

Here is simple code:

<script type="text/javascript">

function OnFileUploaded (e, args) {
            alert($('#<%=uploader1.ClientID %>_summpbar').length);
            $('#<%=uploader1.ClientID %>_summpbar').hide()
        }
 </script> 

<ig:WebUpload ID="uploader1" Mode="Multiple" runat="server" ClientEvents-FileUploaded="OnFileUploaded"></ig:WebUpload>

 

I have added one alert just in case to get length of the summary progress bar. Also you can inspect your DOM and summary progress bar using developer tools like FireBug(in FF), DevTools (in IE), etc to be sure you get properly the DOM element you want to hide. Also you can debug javascript code to be sure you get properly clientID and you have set proper ID of the DOM element you want to manipulate – hide, show, etc

Thanks,
Miro Hristov

 

Hi Miro Hristov,

Thanks! The code you have provided hides the Summary Bar. I actually wanted to hide the Progress Bar when mode is "Single". I used Firebug like you suggested and was able to achieve the desired result :

$('#<%=WebUpload1.ClientID %>_fc').hide()

Regards,

Sharon