CODEWITHSUNDEEP
javascriptajaxhtmlinternet-explorerfile-upload
Ludo237
Ludo237

Reputation: 1717

Is the FormData object available in Internet Explorer 10?

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?

Upvotes: 13

Views: 5844

Answers (2)

Justus Romijn
Justus Romijn

Reputation: 16049

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 combination 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; 
}

Upvotes: 1

Alex Ghiculescu
Alex Ghiculescu

Reputation: 7540

https://stackoverflow.com/a/13657047/641293 and https://stackoverflow.com/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... */

Upvotes: 7

Related Questions