18

How do I restrict file types with the HTML input file type?

I have this

<input type="file" id="fileUpload" name="fileUpload" size="23" accept="Calendar/ics"/>

I am trying to restrict the type to only the iCalendar format type.

I also want to check it on the server side. How do I do this in ASP.NET MVC?

5 Answers 5

20

Unfortunately, you can't restrict the file extension like you can in a standard file browser dialog. You can, however, check the extension once the user selects a file.

You can add this event handler.

filebox.Attributes.Add("onchange", "fileSelectedChanged(this);");

and this JavaScript function

function fileSelectedChanged(obj) {
    var filePath = obj.value;

    var ext = filePath.substring(filePath.lastIndexOf('.') + 1).toLowerCase();
    if(ext != 'csv') {
        alert('Only files with the file extension CSV are allowed');
    } else {
        document.getElementById('form1').submit();
    }
}

You should also check it on the server, using:

filebox.PostedFile.FileName

and:

filebox.PostedFile.ContentType
4
  • do you mean when they upload the file to the server or the when they click on the file in the "choose file dialog"?
    – chobo2
    Dec 30, 2009 at 2:52
  • This is done in JavaScript when the user selects a new file (I included a function for you) Dec 30, 2009 at 2:56
  • Remember to accept this answer if it helped to solve your problem. Dec 30, 2009 at 3:43
  • 3
    lol...gabriel. he's got 2000 rep and 88% accept ratio... i think he knows.
    – mpen
    Dec 31, 2009 at 5:19
3

text/calendar is the right mime type

<input type="file" id="fileUpload" name="fileUpload" size="23" accept="text/calendar" />
3
  • 4
    Current browsers generally ignore the ACCEPT attribute Dec 30, 2009 at 2:55
  • Cool, didn't know about the accept attribute. Still needs to be validated server-side ofc, but can help reduce resource usage on the server as files that don't hit the server don't need to be checked. Dec 30, 2009 at 2:55
  • as Gabriel said this attribute is generally ingored by major browsers so you have to use javascript for "pre-validation".
    – Flatlin3
    Dec 30, 2009 at 3:00
1

instaed of accept you should use contetypes attribute notice that there is single "t" in contentypes

and in server code check like this

HttpPostedFileBase file = Request.Files[0];

if(!file.ContentType.startsWith("text/calendar")) { //Error }

hope this will sove your problem Mark my answer if it will.

0

You cannot specify what kind of files the user can choose. You can use Javascript to prevent the user from submitting the form, but that is not good enough. Javascript can be easily disabled within the browser. You need logic on the server-side that evaluates the content-type of the upload (even just checking the file extension is really not good enough)...

HttpPostedFile file = Request.Files(0);

if(file.ContentType != "text/calendar")
{
    //Error
}
0

I personally prefer something like Uploadify which lets you do this, and also provides a fancy progress bar... I don't know if that's a bit too "heavy weight" for you though.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.