[Solved] Custom code after file upload

[Nick]

How would I have some processing of the file take place after, before, or instead of saving the file when I am placing the submit button inside the upload div with the javascript pageLoad function like in the documentation?

I can see how to access the file in the documentation, but this is done in the submit buttons event handler.  How can I do some custom processing on the file if I am placing the submit button inside the upload div with the javascript pageLoad function?

Please help.

Thanks,
Nick

[Nick]

So is this not possible?

Anybody, please.

Thanks,
Nick

[Genady Sergeev]

Hi Nick,

In order to have a serverside event, you need to declaratively create the upload button like this:

        <telerik:RadUpload runat="server" ID="RadUpload1">
        </telerik:RadUpload>
        <asp:Button runat="server" ID="Button1" Text="Postback"
            onclick="Button1_Click" />

and then append it to the RadUpload div using JavaScript:

1) Using pure JavaScript:

function pageLoad() {
            var button = document.getElementById('Button1');
            var btnAdd = document.getElementsByClassName('ruAdd')[0];
            button.className = "ruButton";
            btnAdd.parentNode.insertBefore(button, btnAdd);
        }

2) Using jQuery:

function pageLoad() {
            $("#Button1").insertBefore(".ruAdd").addClass("ruButton");
        }

Sample project is attached.

Regards,
Genady Sergeev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Nick]

Thanks for your reply Genady, but that did not work for me.  I get a "Object reference not set to an instance of an object" error.  I'm not sure if it matters but I am using the Web20 skin.  I also noticed the getElementsByClassName finction did not show up in my intellisense.  Do you have any other ideas for me?

Thanks,
Nick

[Genady Sergeev]

Hi Nick,

You can use jQuery instead of a pure javascript, more information on how to use jQuery with intellisense can be found here. document.getElementsByClassName does not show up in the intellisense because it is not a standard method, despite that it is supported in all common browsers. As for the object reference error, this sounds strange, can you provide me with a sample of your code?

Kind regards,
Genady Sergeev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Nick]

I tried both the jQuery and the pure javascript with the same result.  The error comes when the page loads, not when performing an upload.

Here is my code:

My button event handler:
protected void btnUpload_Click(object sender, EventArgs e)
    {
        var em = GetExchangeMember(this.TabId);

        foreach( UploadedFile file in uploadCtrl.UploadedFiles )
        {
            BinaryReader b = new BinaryReader(file.InputStream);
            byte[] binData = b.ReadBytes(file.ContentLength);

            var dType = GetDataType(this.TabId);

            Med.File.Send(file.GetName(), binData, em, dType);
        }
    }

My user control:
<asp:ScriptManager runat="server" ID="ScriptManager1">
    <Scripts>
        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
    </Scripts>
</asp:ScriptManager>

<script type="text/javascript">
function pageLoad()
{
    var button = document.getElementById('btnUpload');
    var btnAdd = document.getElementsByClassName('ruAdd')[0];
    button.className = "ruButton";
    btnAdd.parentNode.insertBefore(button, btnAdd);

    //$("#btnUpload").insertBefore(".ruAdd").addClass("ruButton");
}
</script>

<br /><b>Browse for the file and click Upload</b><hr /><br />
<telerik:radupload runat="server" ID="uploadCtrl"
    MaxFileInputsCount="5"
    Skin="Web20"></telerik:radupload>
<asp:Button ID="btnUpload" runat="server" Text="Upload"
    onclick="btnUpload_Click" />
<telerik:radprogressarea runat="server" ID="progressArea"
    DisplayCancelButton="True"
    ProgressIndicators="FilesCountBar,
                        FilesCount,
                        FilesCountPercent,
                        SelectedFilesCount,
                        CurrentFileName,
                        TimeElapsed,
                        TimeEstimated">
    <Localization Uploaded="Uploaded"></Localization>
</telerik:radprogressarea>
<telerik:radprogressmanager runat="server" ID="progressManager"></telerik:radprogressmanager>

Your help is greatly appreciated

Thanks,
Nick

[Genady Sergeev]

Hello Nick,

I have tested your code after I removed the following from your btnUpload_Click handler

var em = GetExchangeMember(this.TabId);

var dType = GetDataType(this.TabId);
Med.File.Send(file.GetName(), binData, em, dType);

I have removed the upper lines because I do not have the corresponding methods. So, the code was working as expected and no "object reference not set to an instance of an object" error was present. Therefore the removed lines of code are causing the fault. This has nothing to do with the upload or the upload button. I suggest you to debug your application and observe where and why the error is thrown.


Sincerely yours,
Genady Sergeev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Nick]

I have narrowed the problem down to the <asp:ScriptManager .  My project is a module for a DotNetNuke site.  DNN is not playing nice with the script manager added in the ascx file.  I tried getting a reference to the script manager already on the page and adding the script reference in the pageLoad  Like this:

ScriptManager scriptManager = ScriptManager.GetCurrent(this.Page);
ScriptReference srf1 = new ScriptReference();
srf1.Assembly = "Telerik.Web.UI";
srf1.Name = "Telerik.Web.UI.Common.Core.js";
scriptManager.Scripts.Add(srf1);

However, nothing happened, it ran just fine but the button remained outside of the control.  I'm running out of ideas.  I'm pretty sure now that the problem stems from this being a user control or a DNN module.

Thanks,
Nick

[Genady Sergeev]

Hello Nick,

Do you have a ScriptManager in your aspx page? If so, you cannot ScirptManager to your user control. You need to use ScriptManagerProxy instead. You can add reference in the same way as with the original ScriptManager.  Example:

        <asp:ScriptManagerProxy runat="server" ID="ScriptManager1>
        </asp:ScriptManagerProxy>

ScriptManager1.Scripts.Add(....)

So, If I have understood you correctly: If the submit button is not in the upload div, everything works as expected. If you move the button inside, a problem follows up?

All the best,
Genady Sergeev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Nick]

Sorry for the delayed response.  I get working on another page.  This page has actually been accepted with the upload button below the control. 

I'm sure the problem was with script manager conflicts in DotNetNuke.  Sorry I don't have anymore time to invest in this slight UI enhancement.

Thank you,
Nick

[Bruno]

Hi,
i found one problem with styles, the solution for me was

where (in line 2)

	function pageLoad() {
	var button = document.getElementById('Button1');
	var btnAdd = document.getElementsByClassName('ruAdd')[0];
	button.className = "ruButton";
	btnAdd.parentNode.insertBefore(button, btnAdd);
	}

change to

	function pageLoad() {
	var button = document.getElementById('<%= Button1.ClientID %>');
	var btnAdd = document.getElementsByClassName('ruAdd')[0];
	button.className = "ruButton";
	btnAdd.parentNode.insertBefore(button, btnAdd);
	}

Thats is all.

Thanks,
Bruno.

[Nick]

Sweet!  It works.

Thank you very much,
Nick

[Nick]

OK, so it works in Firefox.  However, IE it does not.  In IE I get this script error:

Object doesn't support this property or method.

I think it come from this line:

var btnAdd = document.getElementsByClassName('ruAdd')[0];

Is there another way to this so that it works in Firefox and IE

Thank you,
Nick

[Genady Sergeev]

Hi Nick,

You can use the following syntax:

var btnAdd = document.getElementById('you upload id' + 'AddButton');

So if your RadUpload has an ID "RadUpload1", you should use:

var btnAdd = document.getElementById('RadUpload1AddButton');

You can use FireBug or IE developers tool to examine what is the id of the AddButton you want to access. An alternative solution might be to use jQuery or another JavaScript library that emulates the getElementsByClassName functionality.

Kind regards,
Genady Sergeev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.