JavaScript files.length not working in ie9 need alternative approach

Question

I have the following JavaScript function which is failing in internet explorer 9 on the line which declares the variable filesattached.

function VesselDetails() {      

    insurancestart = $('#ctl00_ContentPlaceHolder1_datetimepickerinsstart').val();
    insuranceend = $('#ctl00_ContentPlaceHolder1_datetimepickerinsend').val();
    filesattached = $("input:File")[0].files.length;  

    //set up JS objects
    $('#ctl00_ContentPlaceHolder1_datetimepickerinsend').datetimepicker({ format: 'd/m/Y H:i a' });
    $('#ctl00_ContentPlaceHolder1_datetimepickerinsstart').datetimepicker({ format: 'd/m/Y H:i a' });

    //subscribe to change events
    $('#ctl00_ContentPlaceHolder1_datetimepickerinsstart').change(function () {
        insurancestart = $("ctl00_ContentPlaceHolder1_datetimepickerinsstart").val();
    });

    $('#ctl00_ContentPlaceHolder1_datetimepickerinsend').change(function () {
        insuranceend = $("ctl00_ContentPlaceHolder1_datetimepickerinsend").val();
    });

    $("input:File").change(function () {
        filesattached = $("input:File")[0].files.length;
    });

    ins_client();
}

The ins_client method looks like this:

function ins_client(sender, e) {
    if (pagemode == 'EditVessel') {
        e.IsValid = true;
    }

    if (pagemode == 'NewVessel') {
        if (insurancestart !== '' && insuranceend !== '' && filesattached > 0) {
            e.IsValid = true;
        }
        else {
            e.IsValid = false;
        }
    }
}

This all works perfectly well in chrome and ie 11 but the length property is returning an undefined for ie 9. I am using the length because I only want the page to be valid for a new vessel request once a document has been submitted, is there another way of doing this which will work in ie 9 onwards and chrome, apologies if this has already been answered elsewhere but I cannot find a workaround anywhere that enables this to continue working in the same way but in ie9 onwards and chrome.

Since IE9 doesn't support it. Check http://stackoverflow.com/questions/7139244/html5-how-to-count-the-length-of-the-files-from-the-multiple-input-field — Amit Singh, Nov 18 '14 at 14:14
So if IE9 doesnt support it why would this be helpful to me? — JsonStatham, Nov 18 '14 at 14:20
Isn't it helpful to know the road is closed ahead and one should be taking u-turn? — Amit Singh, Nov 18 '14 at 14:24
I know that approach is not possible, which is why I was asking if there was a way of refactoring what I have to approach the problem in a different manner. — JsonStatham, Nov 18 '14 at 14:36

score 1 · Accepted Answer · answered Nov 25 '14 at 09:24

I replaced:

filesattached = $("input:File")[0].files.length;

With:

var areFilesAttached = document.getElementById('ctl00_ContentPlaceHolder1_fuAttachment').value ? true : false;

Within the VesselDetails function.

Then replaced the if statement within ins_client with the following:

if (pagemode == 'NewVessel') {
        if (insurancestart !== '' && insuranceend !== '' && areFilesAttached == true) {
            e.IsValid = true;
        }
        else {
            e.IsValid = false;
        }
    }

This was an alternative approach which enabled me to check whether or not a file had been provided without using the files.length property which is not compatible with IE9.

score 0 · Answer 2 · answered Nov 18 '14 at 14:32

0

I'm afraid this can't be achieved, IE9 does not support HTML5 File API and therefore it returns undefined value for files property.

Take a look at FILE API

answered Nov 18 '14 at 14:32

Amit Singh

2,267
4
25
50

JavaScript files.length not working in ie9 need alternative approach

2 Answers2