Retain uploaded files for display after postback

[ScottB]

I have a web page form that a user fills out.  The form contains many data entry fields including the RadAsyncUpload control.  When the user clicks a Submit button, a postback is triggered.  I have this button setup as the Postback Trigger on the AsyncUpload control.  As a result, I am able to successfully process the files.  However, if the user fails to enter a required data entry field or some other error occurs (unrelated to the uploaded files), then I must display an error to the user rather than continue processing the user entered form data.  When this occurs, the user must correct the errors and click the Submit but again.  However, upon returning from the initial Postback, the uploaded files no longer appear in the AsyncUpload control, so the user is forced to re-attach their files and upload them again.  How can I make the RadAsyncUpload control retain the successfully uploaded files so the user does not have to re-attach their files?

thanks

[Peter Filipov]

Hello Scott,

I am afraid that it is not possible to achieve such aim. My suggestion is to submit the form with the postback trigger after you have done all validations. E.g. first you postback and do all checks and calculations and if everything is fine the postback trigger is enabled and you could submit the page with it.

Regards,
Peter Filipov
the Telerik team

[ScottB]

Thanks for your reply.  I have implemented a work around whereby I put a "hidden" button on the web page that serves as the RadAsyncUpload postback trigger.  When the user clicks the visible "Submit" button on the form, a postback is fired (not affecting the file upload) and I perform all validations.  If the validation passes, then I initiate a javascript call to "click" the hidden button which then triggers the postback which causes the RadAsyncUpload to upload the file.  Is this what you are describing as a solution in your reply?

scott

[Peter Filipov]

Hi Scott,

That was exactly what I meant. I am happy to hear that it works for you.

Let me know if you need further assistance.

All the best,
Peter Filipov
the Telerik team

[ScottB]

Thanks.

This should be a common issue for most folks, so I hope that your team is able to enhance the control to make the solution easier and more seamless.

scott

[Peter Filipov]

Hello Scott,

We are going to consider your suggestion and eventually log it in our tracking system.
The issue here is that a validation is done when a PostbackTrigger do the postback. This could be avoided by separating the business logic and fire the PostbackTrigger as a last step in the logical chain.

Kind regards,
Peter Filipov
the Telerik team

[Paul J]

Having this same problem.

@Telerik, or @ScottB, can one of you post an example of the code that uses the workaround? I'm not quite following how to seperate the postbacktrigger with the regular submit click.

thanks.

[Peter Filipov]

Hi Paul,

Please review the following demo. Notice how the "Submit your picture information" button is enabled after the comboboxes are selected. Only if the submit button do the postback the picture is processed.

Kind regards,
Peter Filipov
the Telerik team

[Paul J]

so this works if you're only doing client side validation checks? I was hoping I could run some server side validation and still retain the selected file.

is there a way on the server side to keep track of the file path of the selected file and then set the selected file back to that filepath after the postback finishes?

[ScottB]

Hello,

I forgot to post my code example...here you go.

ASPX code…

RadAsyncUpload control. . .

<telerik:RadAsyncUpload

ID="Form_Attachments"

       runat="server"

       TargetFolder="~\App_Data\RadUploadTarget"

       TemporaryFolder="~\App_Data\RadUploadTemp"

       PostbackTriggers="Form_SubmitButton ">

</telerik:RadAsyncUpload>

 

Validate button. . .

<asp:Button

ID="Form_SubmitButtonValidate"

runat="server"

CssClass="basicButton"

Text="Submit"

onclick="Form_SubmitButtonValidate_Click" />

Hidden submit button. . . (uses image button with spacer.gif to make it invisible)

<asp:ImageButton

ID="Form_SubmitButton"

runat="server"

ImageUrl="~/Images/spacer.gif"

ToolTip=""

AlternateText=""

onclick="Form_SubmitButton_Click" />

 

ASPX C# code behind...

protected void Form_SubmitButtonValidate_Click(object sender, System.EventArgs e)

{

    // Do server side validation here...

 

    // If server side validation succeeds, then execute javascript to trigger

    // event Form_SubmitButton_Click.

    string _javascript = "var _button = document.getElementById('" +

this.Form_SubmitButton.ClientID + "'); if (_button != null) {_button.click();}";

    if (ScriptManager.GetCurrent(this.Page) != null)

    {

        // When in AJAX context...

        ScriptManager.RegisterStartupScript(this.Page, this.Page.GetType(), "submitForm",

                _javascript,true);

    }

    else

    {

        // When NOT in AJAX context...

        this.Page.ClientScript.RegisterStartupScript(this.GetType(), "submitForm",

         _javascript, true);

    }

}

/// <summary>

/// Postback event to save form data...

/// </summary>

/// <param name="sender"></param>

/// <param name="e"></param>

protected void Form_SubmitButton_Click(object sender, ImageClickEventArgs e)

{

    // Do server side logic to save validated form data...

}

 
User clicks Form_SubmitButtonValidate which triggers event Form_SubmitButtonValidate_Click.  This issues a server PostBack, but is NOT recognized by the RadAsyncUpload control as a PostbackTrigger, so RadAsyncUpload remains unchanged.

In Form_SubmitButtonValidate_Click event, the form validation logic is performed and if successful, javascript is triggered to click the hidden image button called Form_SubmitButton (see in ASPX code).  This causes the server PostBack and is recognized by the RadAsynUpload as a PostbackTrigger.

scott

[Paul J]

Scott, thanks, I may give it a go. Much appreciated.

[Devinder]

Hi Can anyone please let me know the solution for retaking the file names for async file upload. 
Regards,
Devinder

[Plamen]

Hi Devinder,

 
You can persist the uploaded files from processing by setting the PostbackTriggers to the appropriate button as it is explain in this documentation article. 

If you mean something else by "retaking the file names" please elaborate the scenario a little bit because it is not quite clear.

All the best,
Plamen
the Telerik team

[Ana]

 

[Andre]

Has there been any improvements on this without using the hidden button method?

Basically i want server side validation. If this validation fails, i want the asynupload to retain its file list.

Is there a cleaner way?

[Andre]

I've tried the code above, but it doesn't seem to work.

In the Form_Submit_Validate_Click handler, the radAsyncUplolad1.UploadedFiles.Count is always zero.

So how can i serverside validate any of the uploaded files before submission?

[ScottB]

The issue and corresponding solution that I posted is not designed to allow validation of the uploaded files.  Rather, it is designed to allow validation of other data entered by the user without losing the files selected by the user for upload in the event that the validation fails.

Here is the scenario that my code resolves:
1. User enters some data on the web page.
2. User uploads (using RadUpload) files.
3. User clicks a Submit button.
4. System performs server side validation of user entered data from step #1.
5. Validation fails for some reason.
6. System displays message.
7. User re-enters problem data on the web page.
8. User clicks Submit again.
9. Server side validation succeeds.
10.  User entered data AND uploaded files are processed.

[Andre]

Ahhh... I see. 

Does anyone know if it's possible to validate the uploaded filed and persist the uploaded files on a failed validation?

I would think this would be a fairly common request.

Maybe one of the telerik staff can chime in here.

[Andre]

Hi ScottB,

I've continued with your solution, but the javascript doesn't seem to trigger the button click. The button is always null. Could this be because i'm using radbuttons instead of regular asp buttons?

Should the validate button be set to AutoPostBack=False?

[ScottB]

To determine if your javascript issue is related to using a RadButton instead of an ASP button, simply use an ASP button. 

As to your question regarding Autopostback=False, no.  The button click must trigger a Postback.

[ScottB]

I also recommend debugging the Form_SubmitButtonValidate_Click event and validating that the ClientID of the validation button (used in the javascript to find the button) matches the value of the button when you view the page source of the rendered web page.  If the ClientID does not map to an element in the page source, then the javascript function getElementById will not find the button.  Thus, _button will be null.

[Andre]

Hmm... I think there's something else going on here. if i change your code and add an alert i get "object htmlspanelement" back rather than "object htmlinputelement" or the button.

I then changed my form to use a normal asp button and everything works great.

Originally i had modified your javascript to use $find() to get a reference to the radbutton. That function always returned null. I'm still unclear why? Could one of the telerik folks chime in and explain this?

Thanks.
 

[Hristo Valyavicharski]

Hi,

We are going to research this more deeply and will get back to you with more information.

Regards,
Hristo Valyavicharski
Telerik

[Andre]

Great thanks for looking into this.

Another issue i'm running into is i cant' redirect to a success page after a successful submission.

In the Form_SubmitButton_Click handler i do a Response.Redirect() which does nothing. I've also tried Server.Transfer().

Hmmm... 

[ScottB]

I'm not sure what else I can do for you Andre.  The code I posted definitely works.  I am using Master Pages and my page is wrapped in an AJAX Update Panel.  My solution is pretty simple as it uses basic ASP.Net concepts.

[Andre]

I don't think you can. When i switch to the controls you use, everything works fine.

Thanks for your help Scott. I really appreciate it. The telerik guys are looking into the radbutton vs button issue.

[Hristo Valyavicharski]

Hi,

we made a detailed research on this issue, but we didn't manage to find another working approach. Andre I suggest you to use Scott's solution. It is working fine. The issue with the buttons is expected. $find can be used only for Ajax controls. If you use non-ajax controls you should use $get. Difference between both is well explain here.

Regards,
Hristo Valyavicharski
Telerik

[Albert Shenker]

I'd like to chime in on this topic. The solution proposed of using a separate submission imitator (hidden button), works in order to perform server-side validation of various form fields that exist in conjunction with AsyncUpload. The solution isn't particularly elegant, but it works.

The problem is, how do we perform server-side validation on the uploaded file itself, and it would appear Telerik has no answer for this. From my standpoint, it isn't necessary to get access to the file server-side and validate all its attributes (file size, illegal file types, etc.), because all of this can be handled client-side. However, there is one form of validation that is required server-side.... Required Field Validation. If the AsyncUpload is a required field, then there doesn't appear to be any way to validate it prior to submitting the file. Surely there must be some way to ascertain whether a file has been uploaded server-side without actually submitting the file, seeing as a temporary file does get created. I'm hoping Teleric is working on a way to determine this server-side prior to submitting a file. Perhaps a property like RadUpload.FileIsUploaded (True/False), or something to that affect.

[Hristo Valyavicharski]

Hi Albert,

At the moment the only one way to implement a server side validation is to use a Custom Handler and perform the validation in the Process() method and return a custom result on the client. At the moment we are working to improve the server side validation process of the AsyncUpload control.

Regards,
Hristo Valyavicharski
Telerik

 

 

[Albert Shenker]

Thanks. I look forward to seeing what you guys come up with.

[Andrew]

I wouldn't exactly say "working fine."  If the user pushes the back button or otherwise reloads the page, the submit action will be triggered possibly resulting in duplicate data records being created.

[Shinu]

Hi Andrew,

Unfortunately I couldn't replicate the issue at my end. After setting PostbackTriggers for RadAsyncUpload, the uploaded file will save to the TargetFolder only through the postback happened by the PostbackTrigger control. This is the default behavior of the control. If the page reload is happening then the control will lose the selected file but it will not saved into the TargetFolder. Please have a look into the sample code snippet which works fine at my end.

ASPX:

<telerik:RadAsyncUpload ID="rasynuploadAllFiles" runat="server" TargetFolder="Uploads"
    PostbackTriggers="rbtnUpload">
</telerik:RadAsyncUpload>
<telerik:RadButton ID="rbtnUpload" runat="server" Text="Upload">
</telerik:RadButton>

Please elaborate your requirement if it doesn't help.
Thanks,
Shinu.

[Jay]

Is this still the work around for handling this situation? I'm having the same issue where if a user forgets to fill in a required field they lose all the files they had previously selected and I'm hoping that since this thread started in 2012 it's been addressed so I don't have to use a hidden button. (fingers crossed)

[Hristo Valyavicharski]

Hi Jay,

Try to use server validation: 
http://demos.telerik.com/aspnet-ajax/asyncupload/examples/server-side-validation/defaultcs.aspx

Regards,
Hristo Valyavicharski
Telerik

[Jay]

So am I reading this correctly that you are still using the hidden button "workaround"?

[Hristo Valyavicharski]

Jay,

There are no hidden buttons in the pointed demo. A new property was introduced:

<telerik:RadAsyncUpload runat="server" EnableCustomValidation="true" ID="RadAsyncUpload1" MultipleFileSelection="Automatic"
           Skin="Silk" OnFileUploaded="RadAsyncUpload1_FileUploaded" >
       </telerik:RadAsyncUpload>

Regards,
Hristo Valyavicharski
Telerik

[nitin]

hi,

Can anyone help me..urgently..

i have used RAD upload control for file uploading(.csv) and after uploaded file i push that file into another button and at that time telerik control get hide so please help

[Hristo Valyavicharski]

Hi Nitin,

Can you elaborate a little bit more? What exactly is the issue? Paste your code here or attach sample.

Thanks.

Regards,
Hristo Valyavicharski
Telerik

[lakshmi]

is it Possible to maintain the state of telerik:RadAsyncUpload after postback.I have one issue like i selected on img and that selected img is showing in imgpreview.Now,if i do any postback i have to show whatever the img i selected but it is showing previously selected img.Can u pls help me!