Validate onchange filename from input field (plain javascript)

Question

HTML

<form>
<input type="file" onchange="return validateSize()" id="uploadFile" accept="image/*">
<button type="submit">Send</button>
</form>

JavaScript

function validateSize() {
const file = document.querySelector('#uploadFile');
const file_name = file.value;
const extension = file_name.split('.').pop().toLowerCase();
const size = file.files[0].size;
const allowedFormats = ["jpg", "jpeg"];
if (((size/1024)/1024) > 4) {
    // works perfect
    alert("Please optimize your image to maximum 4MB!");
    file.value = "";
    return false;
}
else if (!(allowedFormats.indexOf(extension) > -1)) {
    // works perfect
    alert("Please save your image in JPG format!");
    file.value = "";
    return false;
}
else if ((/^[a-z0-9\s\,\.\-\_]{5,50}\.(?:jpg|jpeg)$/i.test(file_name)) ==  false) {
    // this IS NOT working
    alert("Filename can have only letters (a-z), numbers, spaces, dots, '-' and '_'!");
    file.value = "";
    return false;
}
}

The size validation WORKS.

The extension validation WORKS.

The filename validation NOT work.

I wish to have this regex condition:

/^[a-z0-9\s\,\.\-\_]{5,50}\.(?:jpg|jpeg)$/i

And if the filename have other characters that aren't included in the regex to return the alert.

Thanks!

PS: You can test the code here https://jsfiddle.net/jacob19/a3fLog6r/5/ and see if you'll find a solution.

Kaiido · Accepted Answer · 2018-08-19 05:44:37Z

1

You are not doing your checking against the file's name, but against a Fake Path, generally something like "C:\fakepath\file_name.ext".

The File's name is accessible as the .name property of the File object you get:

var input = document.querySelector('input');
input.onchange = function(e) {
  // grab the File object that has been selected by the user
  var file_object = input.files[0];
  // here you have the file's name
  var file_name = file_object.name;

  // now you can do your check
  if ((/^[a-z0-9\s\,\.\-\_]{5,50}\.(?:jpg|jpeg)$/i.test(file_name)) == false) {
    alert("Filename can have only letters (a-z), numbers, spaces, dots, '-' and '_'!");
    input.value = "";
  }
  console.log("for info, the input's value was ", input.value);
  console.log("while the file's name was ", file_name);
};

<input type="file">

answered Aug 19, 2018 at 5:44

Kaiido

139k15 gold badges266 silver badges333 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Stan Over a year ago

Thank you! This is the solution :). I've adapted to my needs, but works perfect if access only the filename input.files[0], not the whole path.

mariamelior · Accepted Answer · 2018-08-18 19:12:33Z

0

Your regexp need letters or digits and necessarily 'space', comma, dot, -, _ I think you meant this

   /[a-zA-Z0-9\s\,\.\-\_]{5,50}\.(?:jpg|jpeg)$/i

answered Aug 18, 2018 at 19:12

mariamelior

911 silver badge7 bronze badges

2 Comments

Stan Over a year ago

Not the alert("Filename can have only letters (a-z), numbers, spaces, dots, '-' and '_'!"); is the problem. I'll customize it after will work... The filename must have only a-z letters, 0-9 digits, spaces, commas, dots, hyphens and underlines. (the filename can combine in any order all of them, it is practically the most common filenames; i only wish to block upload for files with all kind of strange characters from Chinese, Vietnamese...)

mariamelior Over a year ago

Yes, i understand you, but your regular expression does not what you want. Symbols \s\,\.\-_ are must unclude in [] for this. Try /^[a-zA-Z0-9\s\,\.\-_]{5,50}\.(?:jpg|jpeg)$/i

Alexander van Oostenrijk · Accepted Answer · 2018-08-18 19:23:15Z

0

You've made a small mistake in your regular expression. This bit:

[a-zA-Z0-9]\s\,\.\-\_

Means: any lowercase letter, any uppercase letter or any digit followed by a whitespace character, a comma, a period, a dash and an underscore.

The [] operator indicates a selection. You should move everything inside it.

The A-Z syntax is just shorthand for ABCD...WXYZ.

Change the expression part to:

[a-zA-Z0-9\s\,\.\-\_]

answered Aug 18, 2018 at 19:23

Alexander van Oostenrijk

4,7843 gold badges25 silver badges37 bronze badges

Comments

ThS · Accepted Answer · 2018-08-19 05:24:28Z

0

Your regular expression seems to be correct. Your missing to return true in the end of your function after all the conditioning. Try this:

function validateSize() {
const file = document.querySelector('#uploadFile');
const file_name = file.value;
const extension = file_name.split('.').pop().toLowerCase();
const size = file.files[0].size;
const allowedFormats = ["jpg", "jpeg"];
if (((size/1024)/1024) > 4) {
    // works perfect
    alert("Please optimize your image to maximum 4MB!");
    file.value = "";
    return false;
}
else if (!(allowedFormats.indexOf(extension) > -1)) {
    // works perfect
    alert("Please save your image in JPG format!");
    file.value = "";
    return false;
}
else if ((/[a-z0-9\s\,\.\-\_]{5,50}\.(?:jpg|jpeg)/i.test(file_name)) ==  false) {
    // this IS NOT working
    alert("Filename can have only letters (a-z), numbers, spaces, dots, '-' and '_'!");
    file.value = "";
    return false;
} else {
    // stuf to do if everything is good, rhen return true.
    return true;
}
}

edited Aug 19, 2018 at 5:24

answered Aug 18, 2018 at 20:18

ThS

4,7932 gold badges17 silver badges29 bronze badges

4 Comments

Stan Over a year ago

No, your solution is not working. Try it here jsfiddle.net/jacob19/a3fLog6r/5 and maybe you'll find a solution, because in the past 5 hours i struggled only with this problem. :)

Stan Over a year ago

No, no errors. But the validation isn't working as it should. You can upload any filename (with all kind of characters !@#$%^&*...). You can test yourself and modify the code as you wish in the jsfiddle.net/jacob19/a3fLog6r/5

ThS Over a year ago

@Jacob19 I edited my answer check it out. Removing ^ and $ make it work.

Stan Over a year ago

Have you tried to select an image file called for example myimage#.jpg and the validation returned the alert ? I tried and the validation allowed that name, doesn't return the alert message even after i removed ^ $.

Stan · Accepted Answer · 2018-08-19 07:09:22Z

After the feedback from @Kaiido here's my solution that works and accomplish these tasks:

Check the file size.
Validate the file name.
Validate the file extension.

The JS code is smaller and i test it with various file names and sizes.

const input = document.querySelector('#uploadFile');
input.onchange = function(e) {
if (((input.files[0].size/1024)/1024) > 4) {
	alert("Please optimize your file to maximum 4MB!");
	input.value = "";
}
else if ((/^[a-z0-9\s\,\.\-\_]{5,50}\.(?:jpg|jpeg)$/i.test(input.files[0].name)) == false) {
    //i tested for image file, but i'll use it for various extension,
    //so you can just add other extensions in this part of the regex code (?:jpg|jpeg|pdf|docx)
	alert("Filename between 5-50 characters (letters (a-z), numbers, spaces, dots, '-' and '_').");
	input.value = "";
}
};

<form>
<input type="file" id="uploadFile">
</form>

PS: Never forget that this validation is in frontend (client side), so you must have a validation rule for backend too. :)

Cheers!

Collectives™ on Stack Overflow

Validate onchange filename from input field (plain javascript)

5 Answers 5

1 Comment

2 Comments

Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

2 Comments

Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related