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, May 13 '15 at 04: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, May 13 '15 at 04: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, May 13 '15 at 04:51
@sanjay Based on your knowledge which is the best solution to validate the file name and extension? Thanks — Marcus Tan, May 13 '15 at 04:55
@MarcusTan Javascript is client-side and can be changed using the browser console. Example `allowedExtensions.push('php');` — NewToJS, May 13 '15 at 05:07

score 2 · Answer 1 · edited May 23 '17 at 10:26

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 '17 at 10:26

Community

1
1

answered May 13 '15 at 04:37

Afsar

3,104
2
25
35

what is it outputting ? – Afsar May 13 '15 at 04:50
If I try 1.dscksodjh.jpg it also don't allow me to insert into my database – Marcus Tan May 13 '15 at 04:52
what are you trying to insert , Name or the File – Afsar May 13 '15 at 04:55
When user browse the file and wanted to submit – Marcus Tan May 13 '15 at 05:15

score 1 · Answer 2 · answered May 13 '15 at 05:00

1

Try access the below value

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

and validate in server side.

answered May 13 '15 at 05:00

Sanjay Kumar N S

4,653
4
23
38

Wait me have a try and get back to u – Marcus Tan May 13 '15 at 05:16
How can i do the validation on client side? – Marcus Tan May 13 '15 at 05:52
return filename.split('.').pop(); – Sanjay Kumar N S May 13 '15 at 10:41

score 0 · Accepted Answer · answered May 13 '15 at 06:32

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

Javascript validate file input name

3 Answers3