|
|
Rank: Member
Groups: Member
Joined: 1/10/2008
Posts: 26
|
I have a page where the user will upload a file that then will be parsed and presented in a gridview. These files are sometimes big so that the parsing can go on for 10 - 20 seconds. I want a progressbar to show the progress for both the upload and the parsing. It will go from 0 - 100% with a text saying Uploading... and then go from 0 - 100% again with a text saying Parsing file...
The solution I thought of was to have an AjaxUploader with a layoutTemplate. I remove the progressbar from the template. I then put a progressbar on the page outside the AjaxUploader control. During the upload I use the event ClientSideOnProgress to update the progressbar. In that function (connected to the progress event) I have an if statement checking if we have reached 100% (upload finished). When we do I call Progressbar.StartTask(). The RunTask will handle the parsing of the file. My problem is that the PostedFiles seems not to be updated at this stage (length is zero).
If the AjaxUploader would have an event like ClientSideUploadFinished I could use that to start the RunTask instead. I need a client trigger because the RunTask seems only to be possible to start from a javascript or from a button.
Is there a solution to my problem?
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,194
|
Hi,
AJAXUploader has a ClientSideOnProgress that you can use. Check the parameter in that function. I believe if you see both "total" and "received" to become from some number to null, then the uploading has just finished.
Thanks
|
|
Rank: Member
Groups: Member
Joined: 1/10/2008
Posts: 26
|
Thanks,
I am using the ClientSideOnProgress right now according to the description above. I react when total equals received but then PostedFiles is empty. I will try to wait until total and received has become null instead as you describe and see what happens.
|
|
Rank: Member
Groups: Member
Joined: 1/10/2008
Posts: 26
|
I tested your suggestion to wait until total and received has become null but it did not solve the problem. Still when i trigger the StartTask() the PostedFiles length is zero. When is PostedFiles updated? My javascript looks like this:
Code: JavaScript
function OnUploadProgress(uploader, total, received)
{
if(total !== 0 && received !== 0 && total !== null && received !== null)
{
var progress = (received / total)*100;
ctl00_ContentPlaceHolder1_ProgressBarTest.setValue(progress);
}
if(total === null && received === null)
{
var currentValue = ctl00_ContentPlaceHolder1_ProgressBarTest.getValue();
if(currentValue > 0)
{
ctl00_ContentPlaceHolder1_ProgressBarTest.startTask();
}
}
}
I noticed that total and received are null at the begining so I check the value of the progressbar to make sure it has run.
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,194
|
Ah! Didn't notice that you were looking for PostedFiles. PostedFiles only becomes available after the page postbacks. So you will need to either set the uploader's AutoPostBack to true, or have another button or something to let user to submit the result. You may want to consider using a CallbackPanel to avoid a full page reload.
|
|
Rank: Member
Groups: Member
Joined: 1/10/2008
Posts: 26
|
I think I have failed to explain the core issue that I am having trouble with. What I want to avoid is that the user shall need to press two buttons. One for starting the upload and one for starting the import to the database.
I can have a auto postback after that the upload is finished but I also want to use the progressbar to start again to indicate that the import of the file is ongoing. The only way I can start the progressbar again is from a javascript and then trigger the starTask().
An idea I had was to use a Callback panel and use its ClientSideAfterExecute to trigger the progressbar.startTask(). I sorry to say that it fails aswell because the id of the control is considered as null. I use the exact same id in other javascripts so I can not understand why it fails here.
soon giving up on this....
By the way I would like to say thanks for fast respons!
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,194
|
Hi Patrik,
You actually don't need to. AutoPostBack is exactly for this purpose. The uploader would automatically post back and trigger FileUploaded event when the upload is done. Inside there you can render a JavaScript that start the progress bar.
Thanks
|
|
Rank: Member
Groups: Member
Joined: 1/10/2008
Posts: 26
|
Hi, I tried your suggestion but I am stuck again. The code looks like this:
Code: C#
protected void AJAXUploader_FileUploaded(object sender, EventArgs e)
{
StringBuilder scriptBuilder = new StringBuilder();
scriptBuilder.Append(string.Format("var progressBar = eo_GetObject('{0}');", ProgressBarTest.ClientID));
scriptBuilder.Append("if(progressBar !== 'undefined' && progressBar !== null )");
scriptBuilder.Append("{");
scriptBuilder.Append(" progressBar.startTask();");
scriptBuilder.Append("}");
scriptBuilder.Append("else");
scriptBuilder.Append("{");
scriptBuilder.Append(" alert(progressBar);");
scriptBuilder.Append("}");
ScriptManager.RegisterStartupScript(this, GetType(), "StartImport", scriptBuilder.ToString(), true);
}
At first I tried to get the DOM object by using $get but then I got a message saying task not supported (or something like that) when calling startTask(). Then I changed to your function eo_GetObject instead. Now my problem is that the progressBar control is null. If I use $get it seems to find the object. What am I doing wrong?
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,194
|
Hi, Try the sample code we posted at the bottom of this thread: http://www.essentialobjects.com/Forum/Default.aspx?g=posts&t=955The JavaScript code is included in a WizardStep in that sample. You can enclose it in an asp:Panel. With that way you simply set the panel's Visible to true to render that JavaScript (make sure you put the script block after the ProgressBar) No need to deal with ScriptManager because ScriptManager can only inject script at certain place. Thanks
|
|
Rank: Member
Groups: Member
Joined: 1/10/2008
Posts: 26
|
Thank you for all your help! I thought I post a summary here at the end to help anyone else that might bump into the same problems I had. I wanted to use one progressbar for two operations. First I wanted it to show the progress of a file upload. Then I wanted it to show the progress of parsing and importing this file onto a gridview. The user should only need to press a button once for this to happen. I create an AjaxUploader using a template layout like this:
Code: HTML/ASPX
<eo:AJAXUploader ID="AJAXUploader" runat="server" Width="250px" AllowedExtension=".xls"
TempFileLocation="~/temp" ClientSideOnError="OnImportError" ClientSideOnProgress="OnUploadProgress"
AutoPostBack="True" OnFileUploaded="AJAXUploader_FileUploaded">
<LayoutTemplate>
<table width="300px">
<tr>
<td>
<asp:PlaceHolder runat="server" ID="InputPlaceHolder"></asp:PlaceHolder>
</td>
</tr>
<tr>
<td align="right">
<asp:Button runat="server" ID="UploadButton" Text="Import" />
</td>
</tr>
</table>
</LayoutTemplate>
<BrowseButtonStyle CssText="margin-left: 5px" />
</eo:AJAXUploader>
I exclude the progressbar because that will be used also for the parsing and import task. First I wanted the progressbar to show the progress of the upload. For that I use AjaxUploader's ClientSideOnProgress event. The javascript connected to that looks like this:
Code: JavaScript
function OnUploadProgress(uploader, total, received)
{
var progressText = $get('ctl00_ContentPlaceHolder1_progressText');
if(progressText.innerText !== 'Importing...')
{
progressText.innerText = 'Uploading...';
}
if(total !== 0 && received !== 0 && total !== null && received !== null)
{
var progress = (received / total)*100;
var progressBar = eo_GetObject('ctl00_ContentPlaceHolder1_ProgressBarTest');
progressBar.setValue(progress);
}
}
The AjaxUploader is set to do a autoPostBack when upload has finished. I use the OnFileUploaded event to connect a server side method that will render a javascript used for starting the parsing and importing task. Actually the javascript has been written in design time and placed within a asp:Panel with visibillity set to false. Then the method just have to set the visibillity to true for the script to be included on the client side after the postback has finished. The method connected to the OnFileUploaded event looks like this:
Code: C#
protected void AJAXUploader_FileUploaded(object sender, EventArgs e)
{
startPanel.Visible = true;
progressText.Text = "Importing...";
}
The panel named "startPanel" looks like this:
Code: HTML/ASPX
<asp:Panel Visible="false" runat="server" ID="startPanel">
<script type="text/javascript">
function StartProgressBar()
{
var pb = eo_GetObject("ctl00_ContentPlaceHolder1_ProgressBarTest");
if (pb && pb.isLoaded())
pb.startTask();
else
{
window.setTimeout("StartProgressBar()", 100);
}
}
StartProgressBar();
</script>
</asp:Panel>
The javascript will through pb.startTask() activate the server side method connected to the progressbar's RunTask. The progressbar is setup like this:
Code: HTML/ASPX
<eo:ProgressBar ID="ProgressBarTest" runat="server" Width="250px" BackgroundImage="00060101"
BackgroundImageLeft="00060102" BackgroundImageRight="00060103" ControlSkinID="None"
IndicatorImage="00060104" IndicatorIncrement="7" OnRunTask="ProgressBarTest_RunTask"
ClientSideOnTaskDone="ImportDone" />
The RunTask is my method that handles the parsing and importing. It use the EO.Web.ProgressTaskEventArgs to report back the progress to the client side.
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,194
|
Excellent! Thanks for sharing!
|
|