Javascript validate file input name

Question

I currently having a problem to validate the file name that user upload into the file input. I already had the validation on file extension, but when user trying to upload a file name example 1.hello.jpg, for my JavaScript validation code it was look okay as it was jpg extension. But in my PHP part my validation for the file extension does not recognize it as I'm using explode function to validate the file extension.

Is there anyway to validate the special character of the file in client side before submitted to my server side? Thanks

Here are my validation on client side:

    <script type='text/javascript'>

            function checkDisabled(yourSubmitButton){


              //No 1 file input validation  
              var res_field = document.getElementById('uploaded_file').value; 
              var extension = res_field.substr(res_field.lastIndexOf('.') + 1).toLowerCase();
              var allowedExtensions = ['jpg','JPG','bmp','BMP','png','PNG','jpeg','JPEG'];

              if(document.getElementById('bannerName').value.length !=0){
                  //File input extension validation
                  if (res_field.length > 0)
                 {
                      if (allowedExtensions.indexOf(extension) !== -1) 
                         {
                           yourSubmitButton.disabled = false;
                            return;
                         }
                }
              }



                // If we have made it here, disable it
                yourSubmitButton.disabled = true;

              };
              </script>

Here are my php code for validate the extension:

$valid_formats = array("jpg", "JPEG","png","PNG","bmp","BMP",'JPG','jpeg');
    if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST")
        {
            $name = $_FILES['uploaded_file']['name'];
            $size = $_FILES['uploaded_file']['size'];
            $bName = $_POST['bannerName'];
            $bDescription = $_POST['bannerDescription'];
            $bK = $_POST['bannerK'];
            $bKe = $_POST['bannerKe'];
            $bS= $_POST['bannerS'];

            if(strlen($name))
                {
                    list($txt, $ext) = explode(".", $name);
                    if(in_array($ext,$valid_formats))
                    {

                        ...........
                    }
                }

1.hello.jpg has two dots, by which you are trying to explode, so when exploding $ext has value hello which is invalid. — Sanjay Kumar N S
– Sanjay Kumar N S, Commented May 13, 2015 at 4:35
What if i uploaded a file something.jpg.php from what i'm reading this would upload and i could then execute my own server-side code on your server giving me access to pretty much everything and anything... — NewToJS
– NewToJS, Commented May 13, 2015 at 4:41
@newtojs What I understand from your statement, php file is unable to submit it to my server because my java script validation is only allowed image file — Marcus Tan
– Marcus Tan, Commented May 13, 2015 at 4:51
@sanjay Based on your knowledge which is the best solution to validate the file name and extension? Thanks — Marcus Tan
– Marcus Tan, Commented May 13, 2015 at 4:55
@MarcusTan Javascript is client-side and can be changed using the browser console. Example allowedExtensions.push('php'); — NewToJS
– NewToJS, Commented May 13, 2015 at 5:07

Community · Accepted Answer · 2017-05-23 10:26:54Z

2

In your PHP use PATHINFO_EXTENSION to get the file extension :

$ext = pathinfo($name, PATHINFO_EXTENSION);

For more info , check Here.

edited May 23, 2017 at 10:26

CommunityBot

11 silver badge

answered May 13, 2015 at 4:37

Afsar

3,1242 gold badges27 silver badges35 bronze badges

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

4 Comments

Afsar Over a year ago

what is it outputting ?

Marcus Tan Over a year ago

If I try 1.dscksodjh.jpg it also don't allow me to insert into my database

Afsar Over a year ago

what are you trying to insert , Name or the File

Marcus Tan Over a year ago

When user browse the file and wanted to submit

Sanjay Kumar N S · Accepted Answer · 2015-05-13 05:00:50Z

1

Try access the below value

$_FILES["uploaded_file"]["type"]

and validate in server side.

answered May 13, 2015 at 5:00

Sanjay Kumar N S

4,7595 gold badges25 silver badges41 bronze badges

3 Comments

Marcus Tan Over a year ago

Wait me have a try and get back to u

Marcus Tan Over a year ago

How can i do the validation on client side?

Sanjay Kumar N S Over a year ago

return filename.split('.').pop();

Marcus Tan · Accepted Answer · 2015-05-13 06:32:33Z

I had solve it by using split function on javascript.

Here is my code:

//Check for dot that is not more than 1
            var checkStr = 0;
            var str = document.getElementById('uploaded_file').value;
            var res = str.split(".");

            for(var i = 0 ; i <= res.length;i++){
                checkStr++;
            }

            if(checkStr>3){

                alert(str+' invalid filename detected. \n\n Please rename your file.');
                return false;
            }

For those beginner like me can refer to that, as i'm trying to split the filename that browser into the file input. If the array after split function is more than 3 then prompt out error.

Example :

-1.hello.jpg (Error)
-1_hello.jpg (Success)

Thanks for all the help. Much Appreciate

Collectives™ on Stack Overflow

Javascript validate file input name

3 Answers 3

4 Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related