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.

guest271314 · Accepted Answer · 2015-10-20 22:21:04Z

29

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" />

answered Oct 20, 2015 at 22:21

guest271314

1

Sign up to request clarification or add additional context in comments.

1 Comment

GRoston Over a year ago

Thank you - I believe that your answer is correct. In the code, I found accept="image/*", which would explain the large number of accepted files types.

Joseph Norris · Accepted Answer · 2015-10-20 22:20:55Z

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();
    }


});

answered Oct 20, 2015 at 22:20

Joseph Norris

3781 silver badge11 bronze badges

Collectives™ on Stack Overflow

Bootstrap File Input - limit file types

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related