Need to click submit button twice after setting val() with jquery in custom file upload

Question

I'm trying to style an ASP.NET FileUpload control by hiding it and putting in my own controls. I'm doing this with jQuery:

$(function () {
    $('input[type=file]').each(function () {
        var fileUpload = $(this);

        var textBox = $('<input type="text">');
        textBox
            .css('width', fileUpload.width() - 85)
            .css('margin-right', 5)
            .prop('disabled', fileUpload.prop('disabled'));

        var button = $('<input type="button" value="Browse...">')
            .prop('disabled', fileUpload.prop('disabled'));

        fileUpload.change(function () {
            textBox.val(fileUpload.val());
        });

        button.click(function () {
            fileUpload.click();
        });

        fileUpload.after(button).after(textBox);
        fileUpload.hide();
    });
});

This basically works great, except that I need to click my submit button twice in IE (10). I can't reproduce this in jsFiddle, but I did make a stripped down ASP.NET project where it happens.

In Firefox, I don't have this problem. Anyone know where I can start to look?

Community · Accepted Answer · 2017-05-23 12:07:34Z

0

Fabi's answer to this question solved it for me. Possibly, it's some sort of security feature, I'm not sure. But by using a label for the file upload, you only need to click the label once.

You will have to style the label as a button though. There's a great explanation in the jsFiddle. I'm not sure about the remark about Mozilla. It works fine in Firefox for me.

edited May 23, 2017 at 12:07

CommunityBot

11 silver badge

answered Aug 21, 2013 at 9:31

Peter

14.2k11 gold badges82 silver badges130 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Entwickler · Accepted Answer · 2016-02-18 10:54:34Z

-1

You can't style FileUpload for security reasons in IE, plus the very little changes you can might be different looking in each browser.

A solution which is given me by a friend for my project is to hide the FileUpload and put some image over it. The concept is to give the FileUpload opacity 0 and zindex high and the button zindex low and position absolute.

Here is a code sample from our proj

.NewInvoiceDialog .AspFileUpload { cursor: pointer; position: absolute; z-index: 1; -moz-opacity: 0.00; opacity:.00; filter: alpha(opacity=00); }

.NewInvoiceDialog .stepBlueButtonWrapper.AddInvoiceFile { float: none; z-index:0; }

.NewInvoiceDialog .stepBlueButtonWrapper.AddInvoiceFile * { z-index:0; cursor:text; }

        <div style="position:relative; display:inline-block">
            <asp:FileUpload ID="fileUpload" CssClass="NewInvoiceDialog_AspFileUpload" runat="server" ClientIDMode="Static" />
            <div class="stepBlueButtonWrapper AddInvoiceFile">
                <a><span> בחר חשבונית </span></a>
            </div>
        </div>

edited Feb 18, 2016 at 10:54

Entwickler

2552 silver badges12 bronze badges

answered Aug 21, 2013 at 9:17

bresleveloper

6,0743 gold badges35 silver badges50 bronze badges

1 Comment

Peter Over a year ago

Please read my question entirely. I know the tricks to style a file upload. It's some IE10 behavior I'm having trouble with.

Collectives™ on Stack Overflow

Need to click submit button twice after setting val() with jquery in custom file upload

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related