jquery.form.js, Line 352 Character 5

[Linkupdated]

I got this error:

SCRIPT5: Access Denied.
jquery.form.js, Line 352 Character 5

:/, i searched so much on this issue and didnt find any solutions.

$('#crop_form').bind('submit', function(e){
e.preventDefault(); // <-- important
$(this).ajaxSubmit({
target: '#output',
success: function() {
hideLoading();
}
});
});

[EliW]

I'm having this exact same issue. It happens only in IE (at least IE8, I haven't tested other versions yet) ... and is on the line:
form.submit();

Appears that IE isn't allowing access to submit the form for some reason? Any idea why this would be?

[Linkupdated]

finaly someone with the same issue as me!
it happens on IE7 IE8 IE9, haven't tested older IE but i think it pretty much says all explorer don't work :/

[EliW]

Some additional research on this so far, seems to indicate that IE doesn't like having a file-upload form be autosubmitted by any event on the file-upload form itself. In my case, I'm watching for .change() on the input field, and trying to submit. But IE won't allow that.

I've been researching some workarounds, and the one I've found so far appears to involve having the .change() event, actually create a new file upload form, cloning the input field into it, and then submitting that. Ugh. There has to be a way to get this to work with jquery.form though

[Linkupdated]

there should be a way we just need to find it :/

[EliW]

I've actually switched to using this: http://valums.com/ajax-upload/ - Which takes care of doing the 'workaround' for IE. Seems to work in all browsers. Not as generic as the jquery.form plugin. But works for the 'one need' I have

[malsup]

Do you happen to have an input with an id of "submit"?

[Linkupdated]

no this is my form

            <form id="imgForm" method="post" action="./modules/script/login_gestion.script.php" enctype="multipart/form-data" style="text-align: right;">
                <input type="file" id="image_file" onchange="sendPhoto(this.form)" name="image_file" />
                <input type="hidden" name="MAX_FILE_SIZE" value="1048576" />
                <input type="hidden" name="page_name" value="'.$_POST['page_name'].'" />
                <input type="hidden" name="page" value="'.$_POST['page'].'" />
                <input type="hidden" name="Garda" value="Img_Upload" />
                <input type="hidden" name="image_type" id="image_type" value="345x207" />
                <input type="hidden" name="image_w" id="image_w" value="345" />
                <input type="hidden" name="image_h" id="image_h" value="207" />
            </form>

[malsup]

Ah, I see what you're saying now. Would it work if sendPhoto were in a setTimeout?

[Linkupdated]

function sendPhoto(Form_Object){
$('#photo_submit_button').attr("disabled", true);

$(Form_Object).bind('submit', function(e){
    e.preventDefault(); // <-- important
    $(this).ajaxSubmit({
        target: '#BLOCK_IMAGES'
    });
});
$(Form_Object).submit();

}

[malsup]

function sendPhoto(Form_Object){
   $('#photo_submit_button').attr("disabled", true);
   setTimeout(function() {
      $(Form_Object).ajaxSubmit({ target: '#BLOCK_IMAGES' });
   },10);
}

[Linkupdated]

I will try tommorrow, i would be so happy to fix my issue

[Linkupdated]

i tried it and it still doesn't work with internet explorer.

SCRIPT5: Access Denied.

jquery.form.js, Ligne 352 Caracter 5

[EliW]

Agreed w/ LinkUpdated ... There is no submit ID ... When I researched this in more depth. It appears that IE simply blocks the ability for any form w/ a file input in it, from being submitted based upon an event that happened on the form.

IE, you can't just .submit() upon a .change() ...

And yes, it seems fancy enough if it's tracking to know the context of a setTimeout() and still not work. I tried that too :)

The only workaround appears to be the solution used in that ajax-upload (the older version is simpler/easier to see the solution in) ... Wherein they don't actually use the main form. But they create a new form.

Basically on .change(), they create a new form on the page, clone the file-input into it (so it still has the filename element), and then submit that new form. This means that the form that is being submitted, isn't the same form as the one the event happened on. And it works.

[dmcinnes]

I had the exact same problem in ie and this was the solution:
http://www.webdeveloper.com/forum/showpost.php?s=5843802d65e6955d994f4f9933996454&p=888999&postcount=3

It's weird, but using click() to open the file input worked, but submitting it got the access denied error.
Once I just had the file input visible and clickable submitting it with the plugin worked great.

[Linkupdated]

thanks, actualy thats the exact thing i did, but i forgot this thread so i didnt reply.

it seems that ie dont like js to invoke file input with click.

[dmcinnes]

of course now I'm having the problem where the form submits twice but only on IE :(

[Linkupdated]

never had this :(. thats suck, freakin explorer.

[milandt]

Anyone managed to solve this? I have the same issue when using .ajaxSubmit() on the form.

[Linkupdated]

like we said, its very simple once you found it, explorer wont let you upload file if you invoke .click() on the
file input.

[milandt]

Any other way to open the file browser without actually clicking the real browse button on the file field? I am having trouble styling it, so I was just hiding it and using javascript to trigger the click() event.

[EliW]

Yes, use the solution that I provided above. Either by implementing your own based upon .change(), or just using the ajax-upload library that I found, and which works fine.

[milandt]

This solution?

"Basically on .change(), they create a new form on the page, clone the file-input into it (so it still has the filename element), and then submit that new form. This means that the form that is being submitted, isn't the same form as the one the event happened on. And it works."

[dmcinnes]

I ended up using ajax-upload like EliW suggested, worked great!
https://github.com/valums/ajax-upload

[Gooseus]

Alright, so I'm attempting this same thing (submitting ajax file upload with jquery.form.js from a change event on the file input in IE) and it seems like the solution was to clone the file input in to another form and then submit that... however, I can't seem to find any way to clone that input while keeping the filename attribute intact... in IE.

Everywhere I look online seems to say this is IE security and is impossible. How can this input be cloned without losing the filename and rendering this solution useless?

[rominouch]

Hello,

i try the solution to clone the input file in a new form, then submit the new form. But the problem is the new input file cloned have no value (http://bugs.jquery.com/ticket/3639)

[Lethea]

hey I found solution .
this is not Malsup plugin problem . This is Fcking internet explorer problem .
7 8 9 .
If u try to send photo with classic so there is no problem
but if u want to modernize it and

[with css text-indent:-9999]
and in js
$(".triggerInput").trigger("click")
or . click()
or bind("click",fun..)
or live("click",fun..)
they are not working.
cause the problem is , u click browse
and ie take the value of path but does not send it .
so u have to use
file js plugin .
download from here : * Based on work by Shaun Inman

• http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom
  OR
  u change your way like

so here is the css input.fileImage { cursor: pointer; font-size: 40px; left: 0; margin-left: -450px; opacity: 0; position: absolute; top: 0;

}
here is the without opacity to understand what we do
with opacity 0
http://f1204.hizliresim.com/w/2/419f8.png
with opacity 1
http://f1204.hizliresim.com/w/2/419h8.png
[dont forget the giving css imageUpload1 overflow : hidden if not u can click it everywhere because we make it bigger :)
]
if u still have a problem with IE
http://petgiller.com
try it with ie

[yuseferi]

i have this problem, and spend a lot of time to resolve it ,but can't
access is denied !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
what a fool IE

[skoant]

For those of you who tried the workarounds and still get the annoying "Access denied" JS error on form submit

Please "reset" your IE settings and try again.

Tested on IE 8 and 9.

[yuseferi]

@skoant , i cant tell every visitor of my site "please reset your IE settings" !!!!!!!!!!!!!!!!!

[skoant]

@zhilevan: Exactly, i bet the majority (if not all) of IE users surfing with default settings.
So reset to default and try tabula rasa to make sure non of the default "off" security settings turned on.

[yuseferi]

this bug is old, and for implement my aid i do it with trickly method.tnx for you replay, but i reset it and not work for me.tnx. notice that we must consider all of visitor not major of them, maybe you want present your site in palce that the IE setting have some changes from default :(. tnx skoant for you replies.

[vinaykr]

Was anybody able solve this issue?

[danki]

LOL a bug that lives 2 whole years because of IE...

We devs should make a pact, do not give a fck about IE, let the IE users experience the shitty sites and webapps. MS will give IE users what they deserve ;)

MS, you're either with us (devs) or against us, how's it gonna be !?

[ysegorov]

@malsup: Thank's for a great plugin!
@everybody: Thank's for the time you've spent on the problem investigation! :)

I have some kind of solution based on this issue notes (at least in IE9, not checked in IE8 yet).
Just to sum up:

• we want to use some custom element on page to select file to upload on server - not the standard file input
• we can't use .click() on input[type=file] and at the same time do a submit EliW note
• it seems we can't use .clone() as IE prevents cloning actual file from input (at least it doesn't work for me)

The solution is to not .click() on input in js but instead provide a way for user to actually click on input and then on input change event we can do .ajaxSubmit().
I've remembered the technique to place input on top of some other element (div, button or whatever) and set it's opacity to 0 - and it works. :)
Probably, order of elements in DOM does matter and in case you have input before target element - you will have to tune it's z-index property.
I don't know if it's possible to use this trick on inlined links (I mean simple <a> links) - I use it on elements with fixed position and size.

Here is a couple js functions I use to absolutely place input:

// $target container must have relative or absolute position
var root = window,
    $input = $('input[name="file"]'),
    $target = $('#upload-button');

function ieFileInputPlacementFix($input, $target) {

        var p, w, h;

        if ($input.length && $target.length) {
            p = $target.position();
            w = $target.outerWidth();
            h = $target.outerHeight();
            $input.css({
                display: 'block',
                position: 'absolute',
                top: p.top,
                left: p.left,
                width: w,
                height: h,
                padding: 0,
                margin: 0,
                'line-height': 'auto',
                opacity: 0,
                cursor: 'pointer'
            });
        }

}

// detect File API support in browser
function hasFileAPISupport() {
        return !_.isUndefined(root.File && root.FileReader && root.FileList && root.Blob);
}

Hope it helps.

[nitaGM]

There are not solved.
I'm using the api last version.
I trying solution to @ysegorov but no solved the problem to access denied.

[stijnherreman]

Here's a test file if anyone wants to dig into this further. Current observations: one of the forms won't show the file dialog on IE 8, the ones that don't immediately throw an Access Denied error seem to do double submits in IE 8 and IE 9 and probably don't work either (I'm seeing the same Access Denied errors when stepping through the jQuery Form code). I've spent a whole day on this, I'll just give up now and show the default file input field on IE 8 and IE 9.

Some additional info that may help anyone digging into this: http://stackoverflow.com/a/13994638/247702

<!doctype html>
<title>Styling a file input element</title>
<style>
    button[type=button], label
    {
        border: 1px solid #000000;
    }

    .hidden
    {
        display: none;
    }

    .off-screen
    {
        right: 100%;
        position: absolute;
    }
</style>

<h1>Form with hidden file input and styled button</h1>
<form action="http://posttestserver.com/post.php?dump&amp;html" method="post" enctype="multipart/form-data">
    <input name="file" type="file" class="hidden">
    <button type="button">browse</button>
    <button type="submit">submit</button>
</form>

<h1>Form with hidden file input and styled label</h1>
<form action="http://posttestserver.com/post.php?dump&amp;html" method="post" enctype="multipart/form-data">
    <input name="file" type="file" id="file2" class="hidden">
    <label for="file2">browse</label>
    <button type="submit">submit</button>
</form>

<h1>Form with off-screen file input and styled button</h1>
<form action="http://posttestserver.com/post.php?dump&amp;html" method="post" enctype="multipart/form-data">
    <input name="file" type="file" class="off-screen">
    <button type="button">browse</button>
    <button type="submit">submit</button>
</form>

<h1>Form with off-screen file input and styled label</h1>
<form action="http://posttestserver.com/post.php?dump&amp;html" method="post" enctype="multipart/form-data">
    <input name="file" type="file" id="file4" class="off-screen">
    <label for="file4">browse</label>
    <button type="submit">submit</button>
</form>

<h1>Output</h1>
<div id="output"></div>

<script src="http://code.jquery.com/jquery-1.11.0.js"></script>
<script src="http://malsup.github.io/jquery.form.js"></script>
<script>
    $("button[type=button]").on("click", function ()
    {
        $(this).prev().click();
    });

    $("form").on("submit", function ()
    {
        $("#output").html("");
        $(this).ajaxSubmit(
            {
                success: function (data)
                {
                    $("#output").html(data);
                }
            });
        return false;
    });
</script>