Applying javascript to check file size and extension

[nanie]

HI. Can anyone help me. I've change the code here and there to make it works but failed. The problem is there is 2 files to be uploaded, but only the second one will display alert message, while the first one will just receive any file. EG: I try select the same file for both. But the first one does not respond while the second part respond that it is not the acceptable file extension.

 

Here is the code.

<script>
    function checkFile()
    {   
    var node_list = document.getElementsByTagName('input');
    for (var i = 0; i < node_list.length; i++) 
    {
        var node = node_list[i];
        if (node.getAttribute('type') == 'file') 
        {
            var sFileName = node.value;
            var sFileExtension = sFileName.split('.')[sFileName.split('.').length - 1];
            var iFileSize = node.files[0].size;
            var iConvert=(node.files[0].size/10485760).toFixed(2);
        }


        if (sFileExtension != "pdf" && sFileExtension != "doc" && sFileExtension != "docx" && iFileSize>10485760)
        {   
            txt="File type : "+ sFileExtension+"\n\n";
            txt+="Size: " + iConvert + " MB \n\n";
            txt+="Please make sure your file is in pdf or doc format and less than 10 MB.\n\n";
            alert(txt);
        }
    }
}
    </script>

my form,

<input type="file" name="file" id="confirm" onchange="checkFile()">
<input type="file" name="file" id="approveletter" onchange="checkFile()">

Please help me...

[Psycho]

Well, both fields have the same name. that may not explain why the JavaScript isn't doing what you want, but you would only ever get one file in your uploads.

 

In your function the second if() condition belongs inside the first condition's code block. Why would you be checking the extension on the file if the first condition was false. A better alternative is to check if the type is NOT 'file' and use 'continue' to skip to the next item in the for() loop.

 

In any event, you should do this validation on the server-side. JavaScript can only check the extension, but you can check the real file type on the server using PHP.

[nanie]

Well, both fields have the same name. that may not explain why the JavaScript isn't doing what you want, but you would only ever get one file in your uploads.

 

In your function the second if() condition belongs inside the first condition's code block. Why would you be checking the extension on the file if the first condition was false. A better alternative is to check if the type is NOT 'file' and use 'continue' to skip to the next item in the for() loop.

 

In any event, you should do this validation on the server-side. JavaScript can only check the extension, but you can check the real file type on the server using PHP.

> Before this I put different name for different file, but when I faced problem on how to handle multiple uploads, some people in a forum suggest to use array to grab the files. So I have to use the same name for each files (file[ ]) . Now I get confused.

 

> I'll try what you have suggested.

 

> The file still will be checked later on server-side. This is just to alert user to insert the correct file so that it is easier to check later. Since I have a long form, handling it might takes time and imagine if user upload wrong file.

[Psycho]

> Before this I put different name for different file, but when I faced problem on how to handle multiple uploads, some people in a forum suggest to use array to grab the files. So I have to use the same name for each files (file[ ]) . Now I get confused.

 

You can name the upload fields for multiple files as an array - but you didn't do that. You named them "file", not "file[]". But there is no reason you need to do that. If one upload is for an approval letter, then give that fiel a representative name. The other people may have been confusing the fact the that uploads and the details will be in an array regardless - i.e. the $_FILES array. But, you can have multiple fields with different names and they will be handled within that global array.

[Psycho]

Also, I just noticed you are calling the function using an onchange event on the upload fields. So, there is no need to have the function iterate through all of the input fields. Just pass the field object to the function since you know which field was changed.

 

Also, the logic to check the file is off. If any ONE condition is false it triggers the error message. So, if the file has the right extension then one of the conditions will be false and the image passes - regardless of the size. It need to test the extension and the size separate as an OR condition. Lastly, the conversion to MB is wrong - there's an extra 0 at the end.

 

This seems to work.

 

    function checkFile(fieldObj)
    {
        var FileName  = fieldObj.value;
        var FileExt = FileName.substr(FileName.lastIndexOf('.')+1);
        var FileSize = fieldObj.files[0].size;
        var FileSizeMB = (FileSize/10485760).toFixed(2);

        if ( (FileExt != "pdf" && FileExt != "doc" && FileExt != "docx") || FileSize>10485760)
        {
            var error = "File type : "+ FileExt+"\n\n";
            error += "Size: " + FileSizeMB + " MB \n\n";
            error += "Please make sure your file is in pdf or doc format and less than 10 MB.\n\n";
            alert(error);
            return false;
        }
        return true;
    }

 

 

<input type="file" name="confirm" id="confirm" onchange="checkFile(this)">
<input type="file" name="approveletter" id="approveletter" onchange="checkFile(this)">

[nanie]

Thanks Guru!

 

It works very well!   I appreciate your help. My problem with the script solved.

 

Now I'm trying to figure out on how to handle this multiple upload in the server-side. There are 6 files user have to upload. and will be store under one table named submission (field name: file1, file2 and so on)

 

If possible please guide me with this too..