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

Maximum upload size

7 Answers 253 Views

Upload (Obsolete)

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

Bader asked on 24 Nov 2011, 04:52 PM

MaxUploadSize.png

Hello,

I'm trying to set a customvalidator for the RadUpload control in order to check the maximum upload size, but I got an error (Attached screen-shot). My code is based on http://sample.topscms.com/blog/post/1607--client-side-file-size-validation-for-telerik-upload.

Default2.aspx:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

</head>

<body>

<form id="form1" runat="server">

<div>

<asp:ScriptManager ID="asdasD" runat="server">

</asp:ScriptManager>

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

<script type="text/javascript">

var currentLoadingPanel = null;

var currentUpdatedControl = null;

function RequestStart(sender, args) {

currentLoadingPanel = $find("<%= TasksRadAjaxLoadingPanel.ClientID %>");

if (args.get_eventTarget() == "<%= SubmitButton.UniqueID %>") {

args.set_enableAjax(false);

}

currentUpdatedControl = "<%= MainPanel.ClientID %>";

//show the loading panel over the updated control

currentLoadingPanel.show(currentUpdatedControl);

}

function ResponseEnd() {

//hide the loading panel and clean up the global variables

if (currentLoadingPanel != null)

currentLoadingPanel.hide(currentUpdatedControl);

currentUpdatedControl = null;

currentLoadingPanel = null;

}

function validateRadUploadFileSize(source, arguments) {

var totalFileSize = 0;

var maxFileSize = 100000;

var radUpload = $find('<%= AttachedFilesRadUpload.ClientID %>');

var fileInputs = radUpload.getFileInputs();

for (var i in fileInputs) {

if (fileInputs[i] && fileInputs[i].files[0]) {

totalFileSize += fileInputs[i].files[0].fileSize;

}

arguments.IsValid = totalFileSize <= maxFileSize;

}

</script>

</telerik:RadCodeBlock>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="SubmitButton">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="MainPanel" LoadingPanelID="TasksRadAjaxLoadingPanel" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

<ClientEvents OnRequestStart="RequestStart" OnResponseEnd="ResponseEnd" />

</telerik:RadAjaxManager>

<telerik:RadAjaxLoadingPanel ID="TasksRadAjaxLoadingPanel" Skin="Vista" runat="server">

</telerik:RadAjaxLoadingPanel>

<asp:Panel ID="MainPanel" Width="100%" HorizontalAlign="Left" runat="server">

<telerik:RadProgressManager ID="Radprogressmanager1" Width="403px" runat="server" />

<telerik:RadUpload ID="AttachedFilesRadUpload" InitialFileInputsCount="1" MaxFileInputsCount="10" ControlObjectsVisibility="AddButton, RemoveButtons, CheckBoxes"

Width="405px" runat="server" />

<telerik:RadProgressArea runat="server" Width="405px" ID="ProgressArea1" ></telerik:RadProgressArea>

<asp:CustomValidator runat="server" ID="CustomValidator1" Display="Dynamic" ClientValidationFunction="validateRadUploadFileSize"

OnServerValidate="CustomValidator1_ServerValidate" ValidationGroup="CreateNewTaskValidationGroup">

The maximum upload size is 100 KB

</asp:CustomValidator>

<asp:Button runat="server" ID="SubmitButton" ValidationGroup="CreateNewTaskValidationGroup" Text="Submit" />

</asp:Panel>

</div>

</form>

</body>

</html>

Default2.aspx.cs:

using System;

using System.Web.UI.WebControls;

public partial class Default2 : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

}

protected void CustomValidator1_ServerValidate(object source, ServerValidateEventArgs args)

{

args.IsValid = (AttachedFilesRadUpload.InvalidFiles.Count == 0);

}

Please, I need you help in order to solve this problem.
It is very appreciated to send me the modified code.

Regards,
Bader

7 Answers, 1 is accepted

answered on 28 Nov 2011, 04:21 PM

Hello,

Thank you very much for your reply,
I checked that link before, but, since I'm using asp.net validator controls such as customvalidator..., I can't use popups (according to the requirements). I need to use customvalidator control here. Is that possible? If so, can you please provide me with a solution?

By the way, I also tried to use a label control instead of the customvalidator control as below, but , it is not working for me (The ResultLabel doesn't display). Can you please explain to me how to fix it?

<telerik:RadCodeBlock ID="MainRadCodeBlock" runat="server">

<script type="text/javascript">

function checkUploadedFilesSize(progressArea, args) {

//progressArea.confirmed is a custom variable,

// you can use another if you want to

if (!progressArea.confirmed && args.get_progressData().RadUpload.RequestSize > 10000) {

document.getElementById('<%= ResultLabel.ClientID %>').style.display = 'inherit';

}

else {

document.getElementById('<%= ResultLabel.ClientID %>').style.display = 'none';

}

</script>

</telerik:RadCodeBlock>

<asp:Panel runat="server" ID="MainPanel">

<telerik:RadUpload runat="server" id="RadUpload1" />

<telerik:RadProgressArea runat="server" id="RadProgressArea1" OnClientProgressUpdating="checkUploadedFilesSize" />

<telerik:RadProgressManager runat="server" id="RadProgressManager1" />

<asp:Button runat="server" id="Button1" text="Upload" />

<asp:label ID="ResultLabel" runat="server" style="display: none;" text="The total size of the selected files is more than the limit"></asp:label>

</asp:Panel>

Please, I need your help,

Regards,
Bader

answered on 29 Nov 2011, 01:58 PM

Hello Bader,

Try changing your code to something like this:

<telerik:RadCodeBlock ID="MainRadCodeBlock" runat="server">

<script type="text/javascript">

function checkUploadedFilesSize(progressArea, args) {

//progressArea.confirmed is a custom variable,

// you can use another if you want to

if (!progressArea.confirmed && args.get_progressData().RadUpload.RequestSize > 10000) {

progressArea.cancelRequest();

progressArea.confirmed = "confirmed";

document.getElementById('<%= ResultLabel.ClientID %>').style.display = 'inline';

}

else {

document.getElementById('<%= ResultLabel.ClientID %>').style.display = 'none';

}

</script>

</telerik:RadCodeBlock>

<asp:Panel runat="server" ID="MainPanel">

<telerik:RadUpload runat="server" id="RadUpload1" />

<telerik:RadProgressArea runat="server" id="RadProgressArea1" OnClientProgressUpdating="checkUploadedFilesSize" />

<telerik:RadProgressManager runat="server" id="RadProgressManager1" />

<asp:Button runat="server" id="Button1" text="Upload" />

<asp:label ID="ResultLabel" runat="server" style="display: none;" text="The total size of the selected files is more than the limit"></asp:label>

</asp:Panel>

I just added the two lines from the example, one to cancel the request and the other to set the confirmed variable. I also changed the display from "inherit" to "inline".

I hope that helps.

answered on 01 Dec 2011, 02:33 PM

Hello Bader,

After researching what the cancelRequest method does, it looks like your code will not work because the cancelRequest method cancels the current request by refreshing the page (You might notice that it reloads the page with a query string like "RadUrid=123456789").

This is the reason the label will not show.

You can see the definition here: http://www.telerik.com/help/aspnet-ajax/upload-client-side-radprogressarea.html

I would suggest using the RadAsyncUpload control instead as it uploads the file asynchronously, so you should be able to show a message using that control.

I hope that helps.