This regex does not work in Chrome

Question

Hi i just put up a validation function in jScript to validate filename in fileupload control[input type file]. The function seems to work fine in FF and sometimes in ie but never in Chrome. Basically the function tests if File name is atleast 1 char upto 25 characters long.Contains only valid characters,numbers [no spaces] and are of file types in the list. Could you throw some light on this

function validate(Uploadelem) {
    var objRgx = new RegExp(/^[\w]{1,25}\.*\.(jpg|gif|png|jpeg|doc|docx|pdf|txt|rtf)$/);
    objRgx.ignoreCase = true;
    if (objRgx.test(Uploadelem.value)) {
        document.getElementById('moreUploadsLink').style.display = 'block';
    } else {
        document.getElementById('moreUploadsLink').style.display = 'none';
    }
}

EDIT:

Nope still does not seem to work , i am using IE 8(tried all the compatibility modes), Chrome v8.0, FF v 3.6. Here is a html snippet in which i wired up the validate function,

 <div>
    <input type="file" name="attachment" id="attachment" onchange="validate(this)" />
    <span class="none">Filename should be within (1-25) letters long. Can Contain only letters
        & numbers</span>
    <div id="moreUploads">
    </div>
    <div id="moreUploadsLink" style="display: none;">
        <a href="javascript:addFileInput();">Attach another File</a></div>
</div>

It works perfectly for me. How do you call the validate function ? – M42

You tried this on Google Chrome and IE 8 ? i added HTML Snippet in where in i used all of the recommended regX. No Clues as to why doesn't work!!

Mike, i am unable to comment your post here So this is for you. The Validation Fails for which ever file i choose in the html input. I Also wired the validation in onblur event but proves same. The validate function will mimic the asp.net regular expression validator which displays validation error message when regular expression is not met.

What are you trying to achieve with `\.*\.`? And why is there a `new RegExp(...)` around a regex literal? I think that may have the effect of stripping backslashes. — Mike Samuel, Jan 04 '11 at 10:49
That would match before . and after . for filename, and fileextension. — Deeptechtons, Jan 04 '11 at 11:39
It works perfectly for me. How do you call the `validate` function ? — Toto, Jan 04 '11 at 13:36
@Deeotechtons, the function is named "validate", but it never returns a boolean value. If you're using that with `onchange`, and expecting it to affect the input elements behaviour then not returning a value might cause problems. Also, `onchange` events for text inputs for some browser versions only fire when the input blurs. Are you taking that into account in your testing? — Mike Samuel, Jan 05 '11 at 06:41
Whats with the `\.*\.` expression? _"Zero or more dots followed by one dot."_ ??? Look at Tim's answer for a better expression! — ridgerunner, Mar 23 '11 at 04:35

score 1 · Answer 1 · answered Jan 04 '11 at 10:50

1

Try simplifying your code.

function validate(Uploadelem) {
    var objRgx = /^[\w]{1,25}\.+(jpg|gif|png|jpeg|doc|docx|pdf|txt|rtf)$/i;
    if (objRgx.test(Uploadelem.value)) {
        document.getElementById('moreUploadsLink').style.display = 'block';
    } else {
        document.getElementById('moreUploadsLink').style.display = 'none';
    }
}

answered Jan 04 '11 at 10:50

Mike Samuel

118,113
30
216
245

Well i tried the same before but sadly doesn't work in Chrome, Ie . Works only on Firefox. Man such a simple validation and hours of work dooh. Do you have any ideas, please do quick test to your code before posting is neat habit :D – Deeptechtons Jan 04 '11 at 11:22
I would test, but you have not provided an input for which it fails, and I am unable to find one in my testing. – Mike Samuel Jan 05 '11 at 06:37

score 1 · Answer 2 · answered Jan 04 '11 at 13:36

Your specification is hazy, but it appears that you want to allow dots within filenames (in addition to the dot that separates filename and extension).

In that case, try

var objRbx = /^[\w.]{1,25}\.(jpg|gif|png|jpeg|doc|docx|pdf|txt|rtf)$/i;

This allows filenames that consist only of the characters a-z, A-Z, 0-9, _ and ., followed by a required dot and one of the specified extensions.

score 1 · Answer 3 · answered Jan 05 '11 at 10:49

1

As far as I know, Chrome adds a path in front of the filename entered, so you have just to change your regex from:

/^[\w]{1,25}\.*\.(jpg|gif|png|jpeg|doc|docx|pdf|txt|rtf)$/

to:

/\b[\w]{1,25}\.+(jpg|gif|png|jpeg|doc|docx|pdf|txt|rtf)$/

answered Jan 05 '11 at 10:49

Toto

89,455
62
89
125

Deeptechtons · Answer 4 · 2011-01-05T11:00:32.803

SOLVED

Primary reason that all [CORRECT regx pattern] did not work is Different browsers returned different values for HTML File Input control.

Firefox: Returns the File Upload controls FileName {As Expected}

Internet Explorer: Returns the Full Path to the File from Drive to File [Pain in the Ass]

Chrome: Returns a fake path as [C:\FakePath\Filename.extension]

I got a solution to the thing for chrome and FF but not IE.

Chrome and Firefox: use FileUploadControlID.files[0].fileName or FileUploadControlID.files[0].name

IE Again biggest pain in the ass [someone suggest a solution]

Valid Regex to Validate both fileName and Extension would be:

/\b([a-zA-Z0-9._/s]{3,50})(?=(\.((jpg)|(gif)|(jpeg)|(png))$))/i

1.File Nameshould be between 3 and 50 characters 2. Only jpg,gif,jpeg,png files are allowed

This regex does not work in Chrome

4 Answers4