Welcome Guest Search | Active Topics | Sign In | Register

AJAXUploader AutoStart & Client-Side Cancel Issues Options
Padishar
Posted: Thursday, March 13, 2008 10:32:11 AM

Rank: Newbie
Groups: Member

Joined: 7/18/2007
Posts: 8
Greetings,
I have been working with this object for a while and just revisited an issue when using the proposed approach for automatically initiating the upload. By design, the custom 'upload' button is watched on the client-side until it is enabled, and then the onclick event is fired to begin the upload process. The ASPX markup for the uploader I am testing with can be seen below...

Code: HTML/ASPX
<eo:AJAXUploader runat="server" ID="AJAXUploader1" Width="100%" TempFileLocation="~/fileuploads/temp" ClientSideOnLoad="UploaderAutoStart"
    MaxDataSize="30000" AutoPostBack="false" EnableViewState="true" CssClass="AJAXUploader" ClientSideOnError="UploaderOnClientError"
    ProgressTextFormat="{transferred} of {total} bytes ({percentage}%) complete.br>Elapsed Time: {elapsed_seconds} seconds." >
    <BrowseButtonStyle CssClass="uploader_button_style"></BrowseButtonStyle>
    <LayoutTemplate>
        <table width="100%">
            <tr><td align="Right"><asp:PlaceHolder ID="InputPlaceHolder" runat="server" /></td></tr>
            <tr><td align="Right" style="padding-right:3px;padding-bottom:3px;">
                <div style="display:none;">
                    <asp:Button ID="UploadButton" runat="server" Text="Begin Upload" CssClass="uploader_button_style" />
                </div></td></tr>
            <tr><td style="padding-right:5px;">
                <eo:ProgressBar ID="ProgressBar" runat="server" 
                    ControlSkinID="None" Height="10px" Width="100%" BorderColor="#336699" 
                    BorderStyle="Solid" BorderWidth="1px" IndicatorColor="151, 198, 232">
                </eo:ProgressBar></td></tr>
            <tr><td align="Right" style="padding-right:3px;">
                 <table width="100%" cellpadding="0" cellspacing="0" style="padding-bottom:5px;"><tr><td align="left">
                     <asp:PlaceHolder ID="ProgressTextPlaceHolder" runat="server" />
                 </td><td valign="top">
                     <asp:Button ID="CancelButton" runat="server" Text="Cancel Upload" CssClass="uploader_button_style" />
                 </td></tr></table>
             </td></tr>
             <tr><td align="Left"><span id="spanCommentSection" runat="server"><br />
                     <div class='mtiLabel'>Comments</div> (Applies to each file uploaded per 'save' operation)
                     <asp:TextBox ID="txtCommentBox" runat="server" Width="98%" Height="80" CssClass="mtiTextField" 
                         TextMode="MultiLine" Rows="4" MaxLength="255" Enabled="false" /></span>
             </td></tr>
             <tr><td><asp:PlaceHolder ID="PostedFilesPlaceHolder" runat="server" /></td></tr>
             <tr><td><asp:Button ID="DeleteButton" runat="Server" Text="Delete Selected Files" 
                                     CssClass="uploader_delete_button_style" /></td></tr>
        </table>
    </LayoutTemplate>
</eo:AJAXUploader>


Where the javascript that allows auto-starting and error handling the custom client-side events for the uploader control can be found here (and is coded inline with the control):

Code: JavaScript
var intervalID = null;
function beginUpload()
{
    var ctrl = "&lt;%=Me.AJAXUploader1.FindControl("UploadButton").ClientID()%&gt;";
    var cancel = "&lt;%=Me.AJAXUploader1.FindControl("CancelButton").ClientID()%&gt;";
    var comm = "&lt;%=Me.AJAXUploader1.FindControl("txtCommentBox").ClientID()%&gt;";
    var c = document.getElementById(cancel);
    var b = document.getElementById(ctrl);
    var t = document.getElementById(comm);
    if((b.disabled != true) && (c.disabled = true))
    {                                            
        b.onclick();
        if(t != null)
        {
            t.disabled = false;
            t.focus();
        }
    }
}
function UploaderAutoStart(control)
{
    intervalID = setInterval("beginUpload()",500);
}
function UploaderOnClientError(control, error, message)
{
    alert(message);
    var url = "&lt;%=Me.ClientID%&gt;_AJAXUploader1_i_0";
    var i = document.getElementById(url);
    //var u = eo_GetObject("&lt;%=Me.AJAXUploader1.ClientID%&gt;");
    i.value = "";
    //u.reset();
    clearInterval(intervalID);
    //intervalID = setInterval("beginUpload()",500);
}


So, to the perplexing issue at hand; How can I 'reset' the ajax uploader on the client-side in order to restart the timer interval so that it can accept another browse attempt. Because, with the code provided above, since the upload button is hidden (by css), even if the text input field is cleared out, it still attempts to download something after an error (or a cancel) when the timer is restarted.

Any clues?
Padishar

P.S. If it is just as simple as a client-side call, great... Otherwise my only other option may be to post back with a hidden 'abort' button click and have the server reload the control to the client.
eo_support
Posted: Thursday, March 13, 2008 10:49:35 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,088
Hi Padishar,

I think you can restart the timer when the upload has finished by handling ClientSideOnProgress:

http://www.essentialobjects.com/ViewDoc.aspx?t=JSDoc.Public.Handlers.uploader_progress_handler.html

Also, the timer should be stopped as soon as the upload starts (after you have called b.onclick()). The newest build exposes an upload method on the client side uploader object, so you no longer need to b.onclick(), you can just call AJAXUploader1.upload(). It will have the same effect.

For the long run, I think we should build this feature into our control so that you don't have to spend all the time to implement it. :)

Thanks
Padishar
Posted: Thursday, March 13, 2008 11:12:39 AM

Rank: Newbie
Groups: Member

Joined: 7/18/2007
Posts: 8
I think I didn't state clearly enough what I was trying to accomplish.

Here are the two erroneous scenarios:

1.) User clicks browse and chooses a file, then hit's ok.
2.) when the timer interval is hit, the b.onclick() is called and the upload initiates.
3.) they decide to cancel the upload because it was the wrong file (and large enough so that they actually have time to cancel it while progress is being made)
4.) since the upload button is not visible, they cannot click it to begin another upload after they had canceled it. (Without reloading the entire page and starting a new timer on a new instance of the uploader.)

...or when an error occurs and the user has to make adjustments
1.) User clicks browse and chooses a file (of the wrong extension in this example) and hit's ok.
2.) when the timer interval is hit, the b.onclick() is called and the client-side error occurs.
3.) they close the alert, and attempt to browse for a file that will work.
4.) [Same as above]

Hence, that because an underlying object retains the file to be uploaded from the operation performed in step #1, even after a cancel or an error, when a timer is restarted an upload begins again, and the error repetatively occurs (or the file they canceled re-initiates the upload).

ClientSideOnProgress may be an angle to attack this with, but essentially, I need to know how to reset this underlying object, whether it be by clearing out any pending files on the client-side, or something else so that the upload does not initiate all over again when a timer is restarted.

That is why I mentioned posting back outside of the control to reload it's parent panel. However, there may be resulting issues with already pending files if it is used in a multiple upload scenario. Who knows, maybe I need another coffee, but this one has me by the beans...

Thanks for your previously speedy reply,
Padishar
eo_support
Posted: Thursday, March 13, 2008 11:21:26 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,088
Hi Padishar,

It will be the same way you are handling start. Call the cancel button's onclick() should cancel the upload for you (thus reseting all underlying stuff). Only after that you can initiate another upload.

Thanks
Padishar
Posted: Thursday, March 13, 2008 2:17:20 PM

Rank: Newbie
Groups: Member

Joined: 7/18/2007
Posts: 8
In the version I am working with (v4.0.43.2) the cancel buttons onclick() does NOT remove the underlying object from selection in the control created for the InputPlaceHolder portion of the layout template. And even if I clear the input box (as stated in a previous post) the download still initiates.

After further investigation, it appears that the control's underlying data is properly cleared at the end of the progress event. And unless there is a client-side event I can call to trigger it, I am at a loss...

If this is a feature that you are planning on putting in the next release (I noticed what was done for the AJAXUploader1.upload(); function) then we would enjoy utilizing this enhancement.

I will maintain a watch for future support and I appreciate the assistance in the mean time,
Padishar
eo_support
Posted: Thursday, March 13, 2008 2:29:09 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,088
Padishar wrote:
In the version I am working with (v4.0.43.2) the cancel buttons onclick() does NOT remove the underlying object from selection in the control created for the InputPlaceHolder portion of the layout template.

I do not believe it is possible to clear (or change) the contents of the file input text box with JavaScript. This is being intentionally blocked by browsers, because otherwise people will be able to create web pages that can automatically grab files from user's machine.

Padishar wrote:
And even if I clear the input box (as stated in a previous post) the download still initiates.

This is something interesting. Theoretically when you clear the input box, the built-in upload button should be disabled because there is nothing to be uploaded. Thus your code should not be triggering.

Padishar wrote:
it appears that the control's underlying data is properly cleared at the end of the progress event. And unless there is a client-side event I can call to trigger it, I am at a loss...

We will probably add a "cancel" method on the client side, that will allow you to cancel the upload any time when needed. It should have the same effect as clicking the cancel button.

Padishar wrote:
If this is a feature that you are planning on putting in the next release (I noticed what was done for the AJAXUploader1.upload(); function) then we would enjoy utilizing this enhancement.

Automatically start upload is definitely a feature high on our list. We will try to put it out as soon as possible. Thanks for your patience!
Padishar
Posted: Friday, March 14, 2008 5:35:31 AM

Rank: Newbie
Groups: Member

Joined: 7/18/2007
Posts: 8
First and Foremost, thank you for working with me on this one. I think I have come to a compromise for now by using a registered postback outside of the uploader to re-load the panel that the it resides in from the server-side on either a cancel or an error. I look forward to seeing these enhanced features in the next release.

Thanks again,
Padishar
eo_support
Posted: Thursday, March 20, 2008 11:20:29 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,088
Hi,

This feature has been implemented as of build 2007.2.44.

Thanks


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.