Welcome Guest Search | Active Topics | Sign In | Register

EO.Web AJAXUploader customized Options
Cris
Posted: Tuesday, January 8, 2008 6:27:24 AM
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
eo_support
Posted: Tuesday, January 8, 2008 7:18:38 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,090
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
Cris
Posted: Wednesday, January 9, 2008 10:13:39 AM
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
eo_support
Posted: Wednesday, January 9, 2008 10:19:04 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,090
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.html

Of course, if you are not familiar with JavaScript, then you have to get familiar with that first.
Cris
Posted: Wednesday, January 9, 2008 10:44:58 AM
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>
eo_support
Posted: Wednesday, January 9, 2008 4:51:05 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,090
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
Cris
Posted: Thursday, January 10, 2008 3:08:21 AM
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>
eo_support
Posted: Thursday, January 10, 2008 5:09:59 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,090
Try change your UpProgress function to:

function UpProgress()
{
eo_GetObject("ProgressBar1").setValue(eo_GetObject("AJAXUploader1").getPercentage() * 0.8);
}
Cris
Posted: Thursday, January 10, 2008 7:48:15 AM
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?
eo_support
Posted: Thursday, January 10, 2008 7:53:38 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,090
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!
Cris
Posted: Monday, January 14, 2008 7:32:50 AM
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?
eo_support
Posted: Monday, January 14, 2008 7:41:35 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,090
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
eo_support
Posted: Monday, January 14, 2008 7:51:59 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,090
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.


You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.