Bootstrap File Input - limit file types

Question

Code that has been developed for a company that I am coaching uses Krajee's Bootstrap File Input. Where this function is called, allowedFileExtensions is set to allow only jpg, gif, and png. However, when the browse button is clicked, the list if allowed image file types shows about one dozen images types. If one that is not of the three types is selected, e.g., svg, the system shows an error message indicating that the file type is not allowed.

While this certainly works, the browse should only allow the chosen types to be selected. What additional parameter(s) and/or other changes are needed so that the browse window limits the selection to the chosen types?

If it matters: I have seen this behavior on a PC with both Firefox and IE.

Answer 1

While this certainly works, the browse should only allow the chosen types to be selected. What additional parameter(s) and/or other changes are needed so that the browse window limits the selection to the chosen types?

Try setting accepted types of file extension for input type="file" element using accept attribute , with value being file extensions separated by comma . Only file extnsion types defined as value of accept attribute should be displayed at "Open File" dialog

<input type="file" accept=".jpg,.gif,.png" />

Answer 2

Here is what I used.

//update file name text box with selected filepath and file
$('#FileUpload1').change(function ()
{
    var filename = $(this).val();

    $('#txtFileName').val(filename);

    var fileExtension = ['xlsx', 'xls', 'csv'];
    if ($.inArray(filename.split('.').pop().toLowerCase(), fileExtension) == -1)
    {
        $('#lblWarning').show();
        $('#lblWarning').text("Only 'xlsx', 'xls', 'csv' formats are allowed.");
    }
    else
    {
        $('#lblWarning').hide();
    }


});