Good way of checking if an uploaded file has a space in? 1

[youradds]

Hi,

I'm trying to make sure people don't upload files with a space in - is there a good way to do this via Javascript?

I'm already doing it in the Perl script, with:

^([%\w-_]+\.(?:jpe?g|JPE?G|gif|GIF|png|PNG)|)$

....but I'm a little unsure as to how to convert this to JS (basically, people are moaning they don't get a warning until after they have uploaded the file [which can sometimes be quite big, and thus take a little while to upload =)])

TIA

Andy

 

[Pirellio]

I saw this before

http://www.dreamincode.net/code/snippet980.htm

 

[BillyRayPreachersSon]

I know you can't set the value of a file input, but if you can read the value, then "onsubmit" of the form you could do your validation there.

You'd need to test this, but it might work.

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[youradds]

Hi,

Heres what I've come up with so far:

<script>
function doChecks() {
   
     var thevalue = document.form_name.TheFile.value;
     alert(thevalue);
   
  
     var reg1 = new RegExp("^([%\w-_]+\.(?:jpe?g|JPE?G|gif|GIF|png|PNG)|)$");
   
     alert(reg1.test(string));
   
}
</script>

<form name="form_name" onSubmit="return doChecks(this)" action="">
<table cellpadding=0 cellspacing=5 border=0><tr>
    <td align="left">Your Name:</td><td align="left"><input type="file" name="TheFile"></td>
</tr>
<input type="submit" value="test" name="test">
</table>
</form>

Problem is, I get an error with the regex side of things :/

Error: invalid range in character class
Source File: file:///C:/Users/Ace/Documents/My%20Webs/testregex.htm
Line: 8

..any suggestions?

TIA

Andy

 

[feherke]

Hi

The dash ( - ) between brackets ( [] ) indicates a range. If you want a literal dash, put it last :

new RegExp("^([%\w_[red]-[/red]]+\.(?:jpe?g|JPE?G|gif|GIF|png|PNG)|)$")

Feherke.

http://rootshell.be/~feherke/

 

[youradds]

Hi,

Thanks - for some reason, it always gives "false" :/ (even if its not an image, or has a space in)... any ideas?

<script>
function doChecks() {
   
     var thevalue = document.form_name.TheFile.value;
     alert(thevalue);
   
  
     var reg1 = new RegExp("^([%\w_-]+\.(?:jpe?g|JPE?G|gif|GIF|png|PNG)|)$");
   
     if (reg1.test(thevalue) == "false") {
       alert("oops, we have a wrong format!");
     } else {
       alert('looks ok');
     }
   
}
</script>

<form name="form_name" onSubmit="return doChecks(this)" action="">
<table cellpadding=0 cellspacing=5 border=0><tr>
    <td align="left">Your Name:</td><td align="left"><input type="file" name="TheFile"></td>
</tr>
<input type="submit" value="test" name="test">
</table>
</form>

TIA

 

[tsuji]

[1] I'm not too impressed on the patterns. I would say it is even incorrect. Minor thing like \w implies underscore, hence no need to duplicate. Detail, see my revision.
[2] You need to set the return false in the case of invalidation.
[3] You need to set enctype attribute in the form element.
[4] Mind the object being passed to the function.
[tt]
function doChecks(obj) {
var thevalue = this.TheFile.value;
//alert(thevalue);
if (thevalue.length!=0 && !/(^|\/|\\)[%\w-]+\.(jpe?g|JPE?G|gif|GIF|png|PNG)$/.test(thevalue)) {
alert('warning: file name(s) might contain space? or lack of extension or of wrong file type?');
this.TheFile.focus();
return false;
}
return true;
}
[/tt]

 

[tsuji]

Further notes

[5] The upper/lower case on the extension seems unrealistically restrictive, either all upper or all lower. It seems not very pragmatic. Better relax that to any combination of upper/lower cases. In that case, simply change it to this.
[tt]
if (thevalue.length!=0 && !/(^|\/|\\)[%\w-]+\.(jpe?g|gif|png)$/i.test(thevalue)) {
//etc etc
}
[/tt]

 

[youradds]

Hi,

Thanks - I'm most of a Perl programmer - and that regex works fine with that 0- but guess JS must be a little different =)

I still get an error with this though :/

<script>
function doChecks(obj) {
    var thevalue = this.TheFile.value;
    //alert(thevalue);
    if (thevalue.length!=0 && !/(^|\/|\\)[%\w-]+\.(jpe?g|JPE?G|gif|GIF|png|PNG)$/.test(thevalue)) {
        alert('warning: file name(s) might contain space? or lack of extension or of wrong file type?');
        this.TheFile.focus();
        return false;
    }   
    return true;
}
</script>

<form name="form_name" onSubmit="return doChecks(this)" action="">
<table cellpadding=0 cellspacing=5 border=0><tr>
    <td align="left">Your Name:</td><td align="left"><input type="file" name="TheFile"></td>
</tr>
<input type="submit" value="test" name="test">
</table>
</form>

BTW, I'm aware I'm missing the enctype="" bit - but this is only a test page, which I'm trying locally (the page where they do the uploading, does have the correct enctype )

TIA for any more suggestions

Cheers

Andy

 

[tsuji]

amendment
Sorry, I added last minute a focus() line which is wrong. This is the corrected line.
>[self] this.TheFile.focus();
[tt][red]obj[/red].TheFile.focus();[/tt]

 

[youradds]

Thank you thank you thank you! (star coming your way for the help )

For anyone interested - heres the final code:

<script>
function doChecks(obj) {
    var thevalue = obj.TheFile.value;

    if (thevalue.length!=0 && !/(^|\/|\\)[%\w-]+\.(jpe?g|gif|png)$/i.test(thevalue)) {
        alert('warning: file name(s) might contain space? or lack of extension or of wrong file type?');
        obj.TheFile.focus();
        return false;
    }   
    return true;
}
</script>

<form name="form_name" onSubmit="return doChecks(this)" action="">
<table cellpadding=0 cellspacing=5 border=0><tr>
    <td align="left">Your Name:</td><td align="left"><input type="file" name="TheFile"></td>
</tr>
<input type="submit" value="test" name="test">
</table>
</form>

Thanks again.

Andy

 

[tsuji]

amendment-2
Also, I had in mind of this, but failed to pass to the edited post!
>[self] var thevalue = this.TheFile.value;
[tt]var thevalue = [red]obj[/red].TheFile.value;[/tt]

 

[youradds]

Hi,

Yeah, I spotted that one (in fact, thats what I changed first - instead of the Blur one LOL)

Thanks

Andy

 

[tsuji]

Thanks, you seem to get it too!