Regex does not work on Chrome

Question

Regex does not work on Chrome

Asked 8 years, 10 months ago

Viewed 108 times

2

I have the following script in which I use a jquery to validate a regular expression that matches the filenames for upload:

$(document).on('change', "input[type='file']", function() {
         var validaFile = $("input[type='file']").val();

        if (validaFile != '') {
            var regex = RegExp('^[a-zA-Z0-9-_.]+$');

            if (!regex.test(validaFile)) {
                $("input[type='file']").val('');
                alert("O nome deste arquivo é inválido. Por favor renomeie o arquivo.");
                return;
            } 
        }
    });

The point is that the code worked with Firefox Developer, but it doesn’t work with Chrome and Edge. Regardless of the file I enter will always give invalid file name.

What this regex should do?

– PauloHDSousa

2015/12/02 at 17:07
I have an input on my site for uploading files. This regex does not handle the file type, only the name. Example: if the user tries to insert a file with the name Me,u! Arqu;Ivo will be an invalid filename and cannot be attached. Only az Az file will be attached _ -.

– Leonardo

2015/12/02 at 17:12
Weird.. I tested it here and it worked. http://jsfiddle.net/yj78v/57/

– PauloHDSousa

2015/12/02 at 17:14
Test a file Example: Test.txt and a T,es! te.txt ... Will return the same message

– Leonardo

2015/12/02 at 17:18
@Paulohdsdare questioning him are the correct files that are entering If.

– Marconi

2015/12/02 at 17:33
Correct, firefox dev works fine. if I enter a file with an invalid name it does not allow me, and if I put a valid name it allows. The problem is that Chrome does not work and even if I try to put a valid file, it says it is invalid

– Leonardo

2015/12/02 at 17:39
Why new RegExp('^[a-zA-Z0-9-_.]+$'); instead of /^[a-zA-Z0-9-_.]+$/? Another thing has a hyphenating after the 9, you have to escape this hyphen so: /^[a-zA-Z0-9\-_.]+$/ or better /^[\w\d\-_.]+$/

– Guilherme Nascimento

2015/12/02 at 18:31
Thanks for the tip expensive, but with the answer from below the problem has already been solved.

– Leonardo

2015/12/02 at 18:36

Show 3 more comments

1 answer

Browser other questions tagged javascript jquery regex

You are not signed in. Login or sign up in order to post.

by André Ribeiro • **5,137** points · Answer 1 · 2015-12-02T17:39:50+00:00

The problem is that Chrome adds C:\fakepath\ before the file name.

A solution that works in both browsers is to directly access the property files of input:

$(document).on('change', "input[type='file']", function() {
  // acessa diretamente o objeto do input
  var validaFile = $(this)[0].files[0].name;

  if (validaFile != '') {
    var regex = new RegExp('^[a-zA-Z0-9-_.]+$');

    if (!regex.test(validaFile)) {
      $("input[type='file']").val('');
      $('#msg').html("O nome deste arquivo é inválido. Por favor renomeie o arquivo.");
      return;
    } else {
      $('#msg').html('O nome do arquivo é válido!');
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" />
<br /><span id="msg"></span>

More details about the interface File.