How can I have a file upload input filter by file type

Posted on 2007-10-02
Last Modified: 2010-05-18
I have a form with a file input which I want only PDF files to display when the user clicks browse. How do I do it? Thanks
Question by:steveo225
    LVL 54

    Accepted Solution


    You can't.  The browser doesn't allow that file input to be controlled with script and you can't control which view or type of files are seen in Browse.  You would need to use your own object or applet to provide that type of control.  You can use the (server) script that processes the form and the file to make sure only PDFs are sent and reject it if another file type is sent.

    Let me know if you have any questions or need more information.

    LVL 10

    Assisted Solution

    According the W3C, there is an 'accept' attribute that can restrict to specific file types, but according to another source, no current browsers support it.
    LVL 4

    Author Comment

    Thats what I was wondering. I also found accept but could not figure out how to use it. Thanks to you both
    LVL 54

    Expert Comment

    Your welcome!  I'm glad I could help.  Thanks for the grade, the points and the fun question.

    I would avoid using the accept attribute even if it does get support some day.  I doubt it will be universally supported in browsers.  If it is I really hope noone's server script depends on that setting.  The idea is nice but, since it is html, it would be too easy to change or override by a user.  It would defeat the whole purpose of the setting and is probably the reason it won't ever take off.  Those are my thoughts on it at least. :)

    Thanks again for a fun question.


    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Course: HTML5 Specialist

    HTML5 development skills are critical to all developers. HTML5 is the foundation to almost any development process. That's why business, design studios, development shops and other organizations need HTML5 developers. Get your foot in the door as a HTML5 specialist.

    A colleague recently asked me about how to give his client a small part of the web site that could be completely under the client's control.  Since I have done this sort of thing before to add emergency banners to a web site, I decided I would creat…
    Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
    In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
    In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…

    760 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    7 Experts available now in Live!

    Get 1:1 Help Now