This is a migrated thread and some comments may be shown as answers.

Retain uploaded files for display after postback

38 Answers 2164 Views

AsyncUpload

This is a migrated thread and some comments may be shown as answers.

ScottB asked on 08 Aug 2012, 11:07 PM

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

38 Answers, 1 is accepted

answered on 09 Oct 2012, 04:25 PM

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

answered on 19 Jul 2013, 05:50 PM

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.

answered on 12 Mar 2014, 04:39 PM

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.

answered on 08 Jul 2014, 05:15 AM

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.