CODEWITHSUNDEEP
phphtml
user2148116
user2148116

Reputation: 195

Check file extension before submitting the form to PHP

I'm trying to do an immediate check on the file extension before uploading it and show a message that if the extension is not allowed (only PDF is allowed) as the following:

Here is the script added to the current PHP page:

<script>
    function checkExt() {
        var form_valid = (document.getElementById('fileToUpload').value= "PDF");
        if(!form_valid) {
            alert('only PDF are allowed');
            return false;
        }
        return true;
    }
</script>

And here is the form in the body (please not that if an extension is not allowed, I want to show a message near to the file upload browsing button without going into the form action):

<form onsubmit='return checkExt()' action='AddPlan.php' method='POST' enctype='multipart/form-data' >

    <input type='file' value="PDF" name='fileToUpload' id='fileToUpload' required>

    <input type='submit' value='upload' name='submit' style="float:left" />
</form>

Upvotes: 2

Views: 1276

Answers (5)

Maths RkBala
Maths RkBala

Reputation: 2195

Please try the following:

<input type='file' value="PDF" name='fileToUpload' id='fileToUpload' required>

Into 

<input type='file' value="PDF" name='fileToUpload' id='fileToUpload' accept="application/pdf" required>

Javascript:

function checkExt(e){
    var fileName = document.getElementById('fileToUpload').value;
    var ext = fileName.substring(fileName.lastIndexOf('.') + 1);
    if(ext == "pdf" || ext == "PDF") {
        return true;
    }else{
        alert('only PDF are allowed');
        return false;                       
    }       
}

It shows only pdf file only.

Upvotes: 0

Passionate Coder
Passionate Coder

Reputation: 7294

You can also try this. theForm is the id of your form

function checkExt(){
    var extension = theForm.fileToUpload.value.substr(theForm.fileToUpload.value.lastIndexOf('.'));
    if ((extension.toLowerCase() != ".pdf") && (extension != ""))
       {
         alert("Only PDF are allowed");
         theForm.FileUpload.focus();
         return false;
       }
        return true;

     }

Upvotes: 0

Professor Abronsius
Professor Abronsius

Reputation: 33813

You could try using the File API See MDN in conjunction with some basic regular expression tests like:

<script type='text/javascript'>
    function checkExt( id ){
        var fileslist = document.getElementById( id ).files;
        var valid=false;
        var type,name,size;
        var pttn_ext=/(\.pdf|\.PDF)/;
        var pttn_mime=/application\/pdf/;

        for( var i=0; i < fileslist.length; i++ ){
            type = fileslist[ i ].type;
            name = fileslist[ i ].name;
            size = fileslist[ i ].size;

            if( pttn_ext.test( name ) && pttn_mime.test( type ) ){
                valid=true;
            }
        }
        if(!valid)alert('Only PDF files are allowed');
        return valid;
    }
</script>



<form name='pdfonly' method='post' action='AddPlan.php' onsubmit='return checkExt("fileToUpload")' enctype='multipart/form-data'>
    <h1>Only PDF File upload</h1>
    <input type='file' value="PDF" name='fileToUpload' id='fileToUpload' required>
    <input type='submit' value='submit' />
</form>

Upvotes: 0

Akkapong Kajornwongwattana
Akkapong Kajornwongwattana

Reputation: 513

function checkExt(){
  var type = $('#fileToUpload')[0].files[0].type;
  if ($.inArray(type, ['application/pdf']) == -1) {
     return false;
  }
  return true;
}

Upvotes: 0

Dipali Sakle Systematix
Dipali Sakle Systematix

Reputation: 875

<script>
function checkExt(){
    var allowedFiles = [".pdf"];
    var form_valid = document.getElementById("fileToUpload");
    var regex = new RegExp("([a-zA-Z0-9\s_\\.\-:])+(" + allowedFiles.join('|') + ")$");
    if (!regex.test(form_valid.value.toLowerCase())) {
        alert('only PDF are allowed');
        return false;
    }
    return true;
}
</script>

Upvotes: 1

Related Questions