file extension verification in java script

Question

Possible Duplicate:
How can the file extension be validated in an input type file using JQuery?

this is my file Extension verification code to prevent unwanted files uploaded

is there a much simpler method to code this?

can anyone improve on this?

<script>
function onSubmitForm(re) {
    var formDOMObj = document.frmSend;
    var file1 = formDOMObj.attach1.value;

    var pdf=file1.toLowerCase().lastIndexOf(".pdf");
    var doc=file1.toLowerCase().lastIndexOf(".doc");
    var docx=file1.toLowerCase().lastIndexOf(".docx");
    var xls=file1.toLowerCase().lastIndexOf(".xls");
    var xlsx=file1.toLowerCase().lastIndexOf(".xlsx");
    var wps=file1.toLowerCase().lastIndexOf(".wps");


    if (file1  == "" )
    {
        alert("Please pick a file.")
        return false;
    }
    else
    if ( pdf == -1 && doc == -1 && docx == -1 && xls == -1 && xlsx == -1 && wps == -1 )
    {
        alert("File not acceped. Please upload your RESUME in .pdf, .doc, or docx")
        frmSend.reset(re);
        return false;
    }
    else
        return true;
}
</script>

Be sure to verify on the server too; an attacker could just disable your client-side verification code and upload a restricted file anyway. — voithos, Dec 24 '12 at 23:34
Also, http://stackoverflow.com/questions/5796537/input-type-file-limit-selectable-files-by-extensions — tvanfosson, Dec 24 '12 at 23:42
Although, if you have things set up in such a way that a malicious upload could actually cause problems, you’ve got bigger problems. (Re: @voithos’ comment) — Ry-, Dec 24 '12 at 23:44

score 5 · Answer 1 · answered Dec 24 '12 at 23:42

5

To simplify that:

var extension = file1.split('.').pop().toLowerCase();
var allowed = ['pdf', 'doc', 'docx', 'xls', 'xlsx', 'wps'];

if(allowed.indexOf(extension) === -1) {
    // Not valid.
}

Of course, a file doesn’t necessarily contain what its extension says it contains.

answered Dec 24 '12 at 23:42

Ry-

218,210
55
464
476

2

+1 for `.split().pop()` to get the extension – Moritz Roessler Dec 24 '12 at 23:48
I guess you can remove `xlsx` from that list... ;-) – Arjan Dec 24 '12 at 23:52
@Arjan: ... why? That’s `allowed.indexOf`, by the way :) – Ry- Dec 24 '12 at 23:52
1

What if a file named "pdf" would be uploaded ? ^^ – Moritz Roessler Dec 25 '12 at 00:01
@Glutamat: Well, there is that! :D It’s pretty easy to rename a file, though, so may as well assume that `pdf` is a PDF :) Although, for correctness' sake: `if(file1.indexOf('.') === -1 || allowed.indexOf(extension) === -1) { ... }` – Ry- Dec 25 '12 at 00:04
@minitech :P just saying ^^ But you are right, in the end it doesn't really matter if you don't check the file content, you can always just rename the file – Moritz Roessler Dec 25 '12 at 00:14
Ha, you're right minitech, I failed to realize it's `Array#indexOf`, not `String#indexOf` at work here! – Arjan Dec 25 '12 at 21:12

Umur Kontacı · Answer 2 · 2012-12-24T23:44:41.143

2

Regular expressions are powerful.

function onSubmitForm(re) {
    var formDOMObj = document.frmSend;
    var file1 = formDOMObj.attach1.value;

    var acceptedTypes = ["pdf", "doc", "docx", "xls", "xlsx", "wps"];
    var re = new RegExp("\\.(" + acceptedTypes.join("|") + ")$");

    if (file1  == "" )
    {
        alert("Please pick a file.")
        return false;
    }
    if (!re.test(file1))
    {
        alert("File not acceped. Please upload your RESUME in .pdf, .doc, or docx")
        frmSend.reset(re);
        return false;
    }
    return true;
}

edited Dec 24 '12 at 23:44

answered Dec 24 '12 at 23:38

Umur Kontacı

35,403
8
73
96

shouldn't that be `!re.test(file1)` ? – Moritz Roessler Dec 24 '12 at 23:43
yes, it should. updated, thanks. – Umur Kontacı Dec 24 '12 at 23:44
Might want to include a `\.` before there, just to make sure `.rdoc` (or something) files aren’t accepted. (Not really a huge issue for client-side validation, though.) – Ry- Dec 24 '12 at 23:45
Indeed, but who knows =) – Umur Kontacı Dec 24 '12 at 23:51

HMarioD · Answer 3 · 2012-12-24T23:46:19.553

1

You don't need this code use accept inside your tag

<input type="file" accept="application/pdf,application/msword">

edited Dec 24 '12 at 23:46

answered Dec 24 '12 at 23:40

HMarioD

842
10
18

2

`accept` should contain MIME types, not extensions. – Ry- Dec 24 '12 at 23:43
My fault, corrected, thanks @minitech – HMarioD Dec 24 '12 at 23:47
1

And: much more friendly for operating systems that do not rely on file extensions to determine a file type. – Arjan Dec 24 '12 at 23:49
You are right @Arjan solid as rocks OS don't rely on file extension. – HMarioD Dec 24 '12 at 23:59
1

I’m really not sure about `accept` for things like Word documents, though, and browsers(/OSes?) that may or may not recognize them. For example, in Firefox on Linux for me, this doesn’t filter anything. – Ry- Dec 25 '12 at 00:03

Moritz Roessler · Answer 4 · 2012-12-25T00:07:30.867

0

You could also assign the extension to a var and do a switch case on it, this way you could handle different actions too if you ever want to,thats one other possible shorter solution

function onSubmitForm(re) {
    var formDOMObj = document.frmSend;
    var file1 = formDOMObj.attach1.value;
    var ext = file1.match(/\.(.+?)$/)
    ext = ext == null ?"NONE": ext.ext[1].toLowerCase();

    switch (ext) {
        case "":
            alert("Please pick a file.")
            return false;
        case "pdf":
        case "doc":
        case "docx":
        case "xls":
        case "xlsx":
        case "wps":
            return true;
        default:
            alert("File not acceped. Please upload your RESUME in .pdf, .doc, or docx")
            frmSend.reset(re);
            return false;
    }

}

edited Dec 25 '12 at 00:07

answered Dec 24 '12 at 23:42

Moritz Roessler

8,542
26
51

What if a file without an extension is uploaded? – Arjan Dec 24 '12 at 23:51
You might want to add a null check before indexing – Umur Kontacı Dec 24 '12 at 23:55
@fastreload Thx, just realized this, a length check would do fine, wouldn't it ? @ Arjan it would run into the default case – Moritz Roessler Dec 25 '12 at 00:00
1

It won't, `match` method returns `null` instead of `[]` when there is no match; I guess it is done for using that in `if` statements as `!![]` is `true` while `!!null` is `false` – Umur Kontacı Dec 25 '12 at 00:04
Oooh, that's correct, it would result in a type error with a length check. Mh thats interesting, didn't ever thought about why it is returning `null`, instad of `[]` – Moritz Roessler Dec 25 '12 at 00:09

score 0 · Answer 5 · answered Dec 25 '12 at 00:09

0

I think it's easier to read just using a straight RegExp:

function onSubmitForm(re) {
    var formDOMObj = document.frmSend;
    var file1 = formDOMObj.attach1.value;

    if (file1  == "" )
    {
        alert("Please pick a file.")
        return false;
    }
    if (!/\.(doc|docx|pdf|wps|xls|xlsx)$/.test(file1))
    {
        alert("File not acceped. Please upload your RESUME in .pdf, .doc, or docx")
        frmSend.reset(re);
        return false;
    }
    return true;
}

answered Dec 25 '12 at 00:09

ic3b3rg

14,629
4
30
53

I'm not sure about anyone else, but this really says _"file1 ends with .doc or .docx or .pdf ..."_ more clearly than some of the more concise answers. – D.Shawley Dec 25 '12 at 00:54

file extension verification in java script

5 Answers5