Showing only XML files in HTML file input element

Question

How can I show only XML files in a file input element? I read about the "accept" attribute but also learned no browser actually support it. I found here some JS scripts but they didn't work well :-\

(I'm checking this server side as well but would like to do it client side too)

Thanks

Check out the answer to this other SO question [stackoverflow.com/questions/1978134/… [1]: stackoverflow.com/questions/1978134/… — Joel Martinez
– Joel Martinez, Commented Aug 13, 2011 at 21:39

lordHougs · Accepted Answer · 2015-05-22 07:52:30Z

56

The answer is pretty simple, you use the MIME type. So if it is an xml file you want, you just do:

<input type="file" accept="text/xml" />

If you want to see the full list of MIME types, check this site http://www.iana.org/assignments/media-types/media-types.xhtml

answered May 22, 2015 at 7:52

lordHougs

5614 silver badges3 bronze badges

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

1 Comment

Kjeld Over a year ago

Actually these days, at least in Chrome, use accept=".xml" to explicitly have an XML option. The text/xml option will allow XML, XSLT, XBL and XSL.

Ulises Peña Pinto · Accepted Answer · 2023-09-01 17:42:55Z

1

This worked for me, just write the accept attribute as follows in the input:

accept=".xml"

Hope it helps

answered Sep 1, 2023 at 17:42

Ulises Peña Pinto

111 bronze badge

Comments

kjetilh · Accepted Answer · 2011-08-13 22:05:28Z

-1

Not sure if you can do that, but at least you could use a callback function and check the input value for the .xml extension.

Snippet:

<script type="text/javascript">
    function isXml(input)
    {
        var value = input.value;
        var res = value.substr(value.lastIndexOf('.')) == '.xml';
            if (!res) {
                input.value = "";
            }
        return res;
    }
</script>

<form method="post" action="">
    <input type="file" name="myfile" id="myfile" onchange="return isXml(this)" />
    <input type="submit" />
</form>

edited Aug 13, 2011 at 22:05

answered Aug 13, 2011 at 21:42

kjetilh

4,9862 gold badges21 silver badges26 bronze badges

2 Comments

Shai Over a year ago

yea, I know I can do this while submitting but I prefer to do so when a user browse for the file. I saw that image uploading sites restrict for images only but they are using flash to achieve it and I don't want to use flash :-\

kjetilh Over a year ago

Hm if you want to give an immidiate response to the user as he/she chooses a file you might be out of look with simply html/js, but at least you can give some feedback as the user chooses a file. I updated my answer with a snippet for demonstration. Here I simply set the field value to be empty if a file with wrong extension is chosen. You could probably implement some more visual effects to indicate an error.

Collectives™ on Stack Overflow

Showing only XML files in HTML file input element

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related