I'm writing a little JavaScript application that allows me to upload images asynchronously.

This script works awesome in every browser except for, guess who, Internet Explorer...

So the first thing that I made is to create a fallback for IE9- versions with AjaxForm Plugin for jQuery, which works great!

Here's the JS script.

$("#Uploader").change(function(e){
        var form = $("#UploaderForm");
        form.trigger('submit');
        $(this).attr('disabled','disabled');
        e.preventDefault();
});
$("#UploaderForm").submit(function(e){
        e.preventDefault();
        e.stopPropagation();
        var type="POST";var loading=$("#PhotoIsLoading");
        if(windowApi === true){
            var formData = new FormData($(this)[0]);
            $.ajax({
                url: url,
                type: type,
                xhr: function() {
                    myXhr = $.ajaxSettings.xhr();
                    if(myXhr.upload){ myXhr.upload.addEventListener('progress',progressHandlingFunction, false);}
                    return myXhr;
                },
                beforeSend: function(){loading.removeClass('isHidden_important');},
                success: function(response){
                    jres = JSON.parse(response);
                    alert("Test ok, file uploaded");
                },
                error: function(response){console.warn(response);},
                data: formData, 
                cache: false,
                contentType: false,
                processData: false
            });
            e.preventDefault();
        }else{
            $(this).ajaxSubmit({
                url: url,
                dataType: 'json',
                type: type,
                beforeSubmit: function(){loading.removeClass('isHidden_important');$(this).formSerialize();},
                success:function(response){
                    jres = JSON.parse(response);
                    alert("FallbackTest Complete");
                },
                error: function(response){console.warn(response);},
            });
            e.preventDefault();
            return false;
        }
    });

WindowApi and every other variable are defined in a global script but don't worry, they work. To be precise, WindowApi is this:

var windowApi=true;
if(window.File&&window.FileReader&&window.FileList&&window.Blob){
console.log("window.api ready");windowApi=true;}
else{console.log("window.api not ready");windowApi=false;};

So, with this bunch of lines of code I handle every browser and IE9- browsers...

The problem now is with IE10 because it has got all the window.* methods and it can use the FormData object. But when I try to upload something with IE10 and FormData I receive an "Access Is Denied" error for the formData object.

The HTML that is involve in this process is:

<form name="UploaderForm" id="UploaderForm" method="post" enctype="multipart/form-data">
    <input type="file" name="Uploader" id="Uploader" accept="image/*" tabindex="1" />
</form>

So at the end my question is:

How can I avoid getting an "Access Denied" exception in IE10 when trying to access the FormData Object?

I'm writing a little JavaScript application that allows me to upload images asynchronously.

This script works awesome in every browser except for, guess who, Internet Explorer...

So the first thing that I made is to create a fallback for IE9- versions with AjaxForm Plugin for jQuery, which works great!

Here's the JS script.

$("#Uploader").change(function(e){
        var form = $("#UploaderForm");
        form.trigger('submit');
        $(this).attr('disabled','disabled');
        e.preventDefault();
});
$("#UploaderForm").submit(function(e){
        e.preventDefault();
        e.stopPropagation();
        var type="POST";var loading=$("#PhotoIsLoading");
        if(windowApi === true){
            var formData = new FormData($(this)[0]);
            $.ajax({
                url: url,
                type: type,
                xhr: function() {
                    myXhr = $.ajaxSettings.xhr();
                    if(myXhr.upload){ myXhr.upload.addEventListener('progress',progressHandlingFunction, false);}
                    return myXhr;
                },
                beforeSend: function(){loading.removeClass('isHidden_important');},
                success: function(response){
                    jres = JSON.parse(response);
                    alert("Test ok, file uploaded");
                },
                error: function(response){console.warn(response);},
                data: formData, 
                cache: false,
                contentType: false,
                processData: false
            });
            e.preventDefault();
        }else{
            $(this).ajaxSubmit({
                url: url,
                dataType: 'json',
                type: type,
                beforeSubmit: function(){loading.removeClass('isHidden_important');$(this).formSerialize();},
                success:function(response){
                    jres = JSON.parse(response);
                    alert("FallbackTest Complete");
                },
                error: function(response){console.warn(response);},
            });
            e.preventDefault();
            return false;
        }
    });

WindowApi and every other variable are defined in a global script but don't worry, they work. To be precise, WindowApi is this:

var windowApi=true;
if(window.File&&window.FileReader&&window.FileList&&window.Blob){
console.log("window.api ready");windowApi=true;}
else{console.log("window.api not ready");windowApi=false;};

So, with this bunch of lines of code I handle every browser and IE9- browsers...

The problem now is with IE10 because it has got all the window.* methods and it can use the FormData object. But when I try to upload something with IE10 and FormData I receive an "Access Is Denied" error for the formData object.

The HTML that is involve in this process is:

<form name="UploaderForm" id="UploaderForm" method="post" enctype="multipart/form-data">
    <input type="file" name="Uploader" id="Uploader" accept="image/*" tabindex="1" />
</form>

So at the end my question is:

How can I avoid getting an "Access Denied" exception in IE10 when trying to access the FormData Object?

• javascript
• ajax
• html
• internet-explorer
• file-upload

2 Answers 2

https://stackoverflow./a/13657047/641293 and https://stackoverflow./a/4335390/641293 might be useful. IE is quite strict about what you can do with <input type='file'> programmatically.

Based on the first one, does changing the first line to this fix things?

$("#Uploader").on('click', function(e){ /* rest of the function unchanged... */

You get an access denied when you submit a form that has fields that have been messed with by javascript. You added dynamically the disabled attribute on your uploadfield, that could be the reason that you receive an Access denied. Maybe you should give it a shot without the disabling of the field on the change event?

By the way, you might be better off checking the availability of FormData in bination with the File API:

var formDataSupport = false;
if (typeof FormData === 'function' && 
    window.File && 
    window.FileReader && 
    window.FileList && 
    window.Blob)
{
  console.log("File API available, formData available");  
  formDataSupport = true; 
}