javascript associated with fileupload not working in update panel

Question

4.33/5 (2 votes)

See more:

In my asp.net application when clicking fileupload control iam binding the name of file into another control using javascript.It works fine when there is no update panel.But problem with update panel.Please help

C#

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <contenttemplate>
        <div class="col-lg-5 col-md-5 col-sm-4 col-xs-12 quick_reg ">
            <div class="regform">
                <div class="radio-inline">
                    <label>
                        <asp:RadioButton ID="rbtnJobseekerRegn" Checked="true" runat="server" GroupName="Quick" AutoPostBack="true" />
                        Job Seeker
                    </label>
                </div>
                <div class="radio-inline">
                    <label>
                        <asp:RadioButton ID="rbtnEmployerRegn" runat="server" GroupName="Quick" AutoPostBack="true" />
                        Employer
                    </label>
                </div>
                <h2>Quick Registration</h2>
                <div class="clearfix"></div>
                <div id="divQuickJobseeker"   runat="server">
                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                        <asp:TextBox ID="txtJobseekerUserName" runat="server" placeholder="Your Email" CssClass="form-control input-lg1 marg-top5">
                    </div>
                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 ">
                        <asp:TextBox ID="txtJobseekerPassword" TextMode="Password" runat="server" placeholder="Password" CssClass="form-control input-lg1 marg-top5">
                    </div>
                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                        <asp:TextBox ID="txtJobseekerMobile" runat="server" placeholder="Mobile" CssClass="form-control input-lg1 marg-top5">
                    </div>
                    <div class="col-lg-4 col-md-2 col-sm-2 col-xs-12">
                        <div class="fileUpload btn btn-default">
                            <asp:FileUpload ID="fuInputFile" runat="server" CssClass="upload" />
                            <span>Attach Resume</span>
                        </div>
                        <input id="uploadFile" class="visible-true" />
                    </div>
                    <div class="col-lg-8 pull-right ">
                        <asp:Label ID="lblstatus" CssClass="text-warning" runat="server" Text="" Visible="false">
                        <asp:Button ID="btnSubmit" runat="server" Text="Submit" class="btn btn-primary pull-right" OnClick="btnSubmit_Click" />
                    </div>
                </div>
                <div id="divQuickEmployer"   runat="server">
                    <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12">
                        <asp:TextBox ID="txtEmployerUsername" runat="server" placeholder="Your Email" CssClass="form-control input-lg1 marg-top5">
                    </div>
                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 ">
                        <asp:TextBox ID="txtEmployerPassword" TextMode="Password" placeholder="Password" runat="server" CssClass="form-control input-lg1 marg-top5">
                    </div>
                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                        <asp:TextBox ID="txtCompanyName" runat="server" placeholder="Company" CssClass="form-control input-lg1 marg-top5">
                    </div>
                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                        <asp:TextBox ID="txtEmployerMobile" runat="server" placeholder="Mobile" CssClass="form-control input-lg1 marg-top5">
                    </div>
                    <div class="col-lg-4 col-md-2 col-sm-2 col-xs-12">
                        <div class="fileUpload btn btn-default">
                            <asp:FileUpload ID="fuEmployer" runat="server" CssClass="upload" />
                            <span>Attach Job Details</span>
                        </div>
                        <input id="txtEmpAttach" class="visible-true" />
                    </div>
                    <div class="col-lg-8 pull-right ">
                        <asp:Label ID="lblEmployerStatus" CssClass="text-warning" runat="server" Text="" Visible="false">
                        <asp:Button ID="btnEmployerRegn" runat="server" Text="Submit" class="btn btn-primary pull-right" OnClick="btnEmployerRegn_Click" />
                    </div>
                </div>
            </div>
        </div>
    </contenttemplate>
</asp:UpdatePanel>

javascript

JavaScript

<script type="text/javascript">
document.getElementById("fuInputFile").onchange = function () {
    document.getElementById("uploadFile").value = this.value;
};
</script>
<script type="text/javascript">
document.getElementById("fuEmployer").onchange = function () {
    document.getElementById("txtEmpAttach").value = this.value;
};
</script>

Posted 13-Feb-14 20:30pm

Namith Krishnan E

Updated 13-Feb-14 21:53pm

Maarten Kools

v4

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) · Accepted Answer · 2014-02-14T00:05:00

Solution 1

Do one thing. Use AsyncFileUpload Demonstration[^]

There is a property OnClientUploadComplete, which will fire the JavaScript function specified when you select any file.

Like - OnClientUploadComplete="uploadComplete"

Inside the uploadComplete you can get the FileName like...

JavaScript

function uploadComplete(sender, args) {
    debugger;
    document.getElementById('uploadFile').value = args.get_fileName();
}

For more details read AsyncFileUpload Control - New Control in Ajax Control ToolKit[^].

Posted 14-Feb-14 0:05am

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)

Comments

Namith Krishnan E 15-Feb-14 1:22am

when iam doing this the script is unresponsive and shows this message in browser

A script on this page may be busy, or it may have stopped responding. You can stop the script now, or you can continue to see if the script will complete.

Script: http://localhost:5782/default.aspx?_TSM_HiddenField_=ToolkitScriptManager1_HiddenField&_TSM_CombinedScripts_=%3b%3bAjaxControlToolkit%2c+Version%3d3.5.60623.0%2c+Culture%3dneutral%2c+PublicKeyToken%3d28f01b0e84b6d53e%3aen-US%3a834c499a-b613-438c-a778-d32ab4976134%3ade1feab2%3af9cec9bc%3ae4bd8421%3a35576c48:12

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 15-Feb-14 1:36am

I also encountered the same issue while I was trying. In my case, that was because I did not defined the function uploadError, but that is declared in aspx page as OnClientUploadError="uploadError".

You can see this error in Developer Tool console tab. Click stop, when it prompts, then see the console.

If you don't need this function, then just remove this OnClientUploadError="uploadError" from aspx page,

Do you understand me? Feel free to ask questions.

Namith Krishnan E 15-Feb-14 2:10am

when iam using console this script cuase error

<script type="text/javascript">
$(":file").filestyle({ buttonText: "Find file" });

</script>

after commenting now also that message appears

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 15-Feb-14 2:17am

Do you see any other error as I mentioned? Because I have already with your code and I succeeded.
Make sure the JavaScript events declared in aspx page for the AsyncFileUpload Control are present in the page.

Namith Krishnan E 15-Feb-14 2:47am

it works fine in chrome
Did you try it in firefox?

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 15-Feb-14 3:04am

Yes, actually I tested on Firefox only and it was working fine.
So, it's working right?

Namith Krishnan E 15-Feb-14 3:07am

Your code works fine.....now iam using the latest version of firefox 28 beta 3.0....its the problem of their new version...

THANKS for your help :p

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 15-Feb-14 3:17am

Okay. Glad to hear that. :) Good work, keep it up.

Thanks,
Tadit

Namith Krishnan E 15-Feb-14 3:22am

for the issue in latest firefox add this cssclass for asyncfileupload

.imageUploaderField input{width:100%!important;}

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 15-Feb-14 3:27am

My Firefox is the latest one and it was working. Anyway, thanks for this.
I am at home right now. Once I go to office on Monday, I will test it again. :) :)

Namith Krishnan E 15-Feb-14 3:33am

ok....test it with 28 beta3.0......Thanks Again

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 15-Feb-14 3:36am

Okay. :)