|
Rank: Newbie Groups: Member
Joined: 1/8/2008 Posts: 6
|
I’m testing/using your “EO.Web AJAXUploader” control in an application where I do video upload and it conversion to FLV format.
I would like to know if the control can be customized in order that progress bar can only be full loaded after the video conversion be completely done.
I also would to know how to hide the cancel and delete buttons.
Thanks for your help Best wishes Cristóvão Amado Portugal
|
|
Rank: Administration Groups: Administration
Joined: 5/27/2007 Posts: 24,194
|
Hi, You can easily hide cancel or delete buttons by using LayoutTemplate. Just edit your LayoutTemplate and delete/add/move whatever controls there. Customizing the progress bar so that it is only full loaded after the conversion is done is possible, but it will require some coding. The basic idea is to drive the progress bar by yourself, not by the uploader. You would first remove the progress bar from LayoutTemplate and add a separate progress bar into the page that is not tied to the uploader. You would then provide the uploader a ClientSideOnProgress handler to collect the uploader's progress information. Once you have the uploader's progress information, you can update your own progress bar, for example:
Code: JavaScript
ProgressBar1.setValue(Uploader1.getPercentage() * 0.8);
That way even when the uploader has finished, your own progress bar will still be only 80% done. Once the upload is done, your page will need to go back to the server to convert it (probably in your FileUploaded event handler). Once you finished converting it, you can then set the progress bar's Value to its Maximium value so that it appears to be fully loaded. Thanks
|
|
Rank: Newbie Groups: Member
Joined: 1/8/2008 Posts: 6
|
Can You help me to provide the uploader a ClientSideOnProgress handler to collect the uploader's progress information.?
Thanks Cris
|
|
Rank: Administration Groups: Administration
Joined: 5/27/2007 Posts: 24,194
|
I already did in my previous post. Uploader1.getPercentage() is the call you use the get uploader "Uploader1"'s current percentage (progress) information. If you are not faimilar with that, you will need to go over this topic: http://www.essentialobjects.com/ViewDoc.aspx?t=clientapi_howto.htmlOf course, if you are not familiar with JavaScript, then you have to get familiar with that first.
|
|
Rank: Newbie Groups: Member
Joined: 1/8/2008 Posts: 6
|
Can you help me to know why my code is missed?
Code: JavaScript
function UpProgress(){
ProgressBar1.setValue(AJAXUploader1.getPercentage() * 0.8);
}
Code: HTML/ASPX
<eo:CallbackPanel runat="server" ID="CallbackPanel1" Triggers="{ControlID:AJAXUploader1;Parameter:}">
<eo:AJAXUploader ID="AJAXUploader1" ClientSideOnProgress="UpProgress" runat="server"
TempFileLocation="~/eo_upload" AutoPostBack="True">
<LayoutTemplate>
<table border="0" cellpadding="2" cellspacing="0" width="287">
<tr>
<td>
<asp:PlaceHolder ID="InputPlaceHolder" runat="server">Input Box Place Holder</asp:PlaceHolder>
</td>
</tr>
<tr>
<td align="right">
<asp:Button ID="UploadButton" runat="server" Text="Enviar" />
</td>
</tr>
</table>
</LayoutTemplate>
</eo:AJAXUploader>
<eo:ProgressBar ID="ProgressBar1" runat="server" BackgroundImage="00060301" BackgroundImageLeft="00060302"
BackgroundImageRight="00060303" ControlSkinID="None" IndicatorImage="00060304"
ShowPercentage="True" Value="1">
</eo:ProgressBar>
</eo:CallbackPanel>
|
|
Rank: Administration Groups: Administration
Joined: 5/27/2007 Posts: 24,194
|
Hi,
I am not sure what you mean by "why my code is missed"? We ran your code at here and the progress bar is being correctly updated as it should.
Thanks
|
|
Rank: Newbie Groups: Member
Joined: 1/8/2008 Posts: 6
|
Why is not working when it have a masterpage?
Code: HTML/ASPX
<%@ Page Language="VB" MasterPageFile="~/MasterPage.master" Title="Cineast@as Digitais" %>
<%@ Register TagPrefix="eo" Namespace="EO.Web" Assembly="EO.Web" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<script type="text/javascript">
function UpProgress(){
ProgressBar1.setValue(AJAXUploader1.getPercentage() * 0.8);
}
</script>
<div>
<br />
<eo:CallbackPanel runat="server" ID="CallbackPanel1" Triggers="{ControlID:AJAXUploader1;Parameter:}">
<eo:AJAXUploader ID="AJAXUploader1" ClientSideOnProgress="UpProgress" runat="server"
TempFileLocation="~/eo_upload" AutoPostBack="True">
<LayoutTemplate>
<table border="0" cellpadding="2" cellspacing="0" width="287">
<tr>
<td>
<asp:PlaceHolder ID="InputPlaceHolder" runat="server">Input Box Place Holder</asp:PlaceHolder>
</td>
</tr>
<tr>
<td align="right">
<asp:Button ID="UploadButton" runat="server" Text="Enviar" />
</td>
</tr>
</table>
</LayoutTemplate>
</eo:AJAXUploader>
<eo:ProgressBar ID="ProgressBar1" runat="server" BackgroundImage="00060301" BackgroundImageLeft="00060302"
BackgroundImageRight="00060303" ControlSkinID="None" IndicatorImage="00060304"
ShowPercentage="True" Value="1">
</eo:ProgressBar>
</eo:CallbackPanel>
</div>
</asp:Content>
|
|
Rank: Administration Groups: Administration
Joined: 5/27/2007 Posts: 24,194
|
Try change your UpProgress function to:
function UpProgress() { eo_GetObject("ProgressBar1").setValue(eo_GetObject("AJAXUploader1").getPercentage() * 0.8); }
|
|
Rank: Newbie Groups: Member
Joined: 1/8/2008 Posts: 6
|
Thanks for your help.
I have other question. I need to validate some other fields before the upload start. I try to call a JavaScript function on the OnClientClick event of UploadButton, but this don’t work. Do you have a solution?
|
|
Rank: Administration Groups: Administration
Joined: 5/27/2007 Posts: 24,194
|
Cris wrote:Thanks for your help.
I have other question. I need to validate some other fields before the upload start. I try to call a JavaScript function on the OnClientClick event of UploadButton, but this don’t work. Do you have a solution? You won't be able to do that. All validators will be called when the page is submitted, not when the upload starts. It would be appreciated if you can use a new thread when you have a separate question. Thanks!
|
|
Rank: Newbie Groups: Member
Joined: 1/8/2008 Posts: 6
|
Hi
I have used your solution for my case, but still remains a small error.
The ProgressBar load to 80%, but when the uploader has finished, the ProgressBar goes to at 0% and at the end of the conversion to 100% load. How do I avoid the ProgressBar will 0% after uploading?
|
|
Rank: Administration Groups: Administration
Joined: 5/27/2007 Posts: 24,194
|
Hi,
That would your code error. The progress bar takes whatever value you give to it. During the upload process, you handle the uploader's client side event and gives a value range from 0 to 80. Once it is done, your conversion starts, inside your conversion code you must have set the progress bar's value (by calling e.UpdateProgress) to 0. Try to debug your conversion code and you should be able to find out the problem.
Thanks
|
|
Rank: Administration Groups: Administration
Joined: 5/27/2007 Posts: 24,194
|
One more note, you may see the progress bar goes back to 0 briefly (just a flash) when the uploader's is done and your server side conversion code start running, that's due to a full page reload (you can use CallbackPanel to avoid full page reload). However if your conversion code is correct, you would see the progress bar moves from 80 to 100, not from 0 to 100.
|
|