Jquery Form File Upload validation

Question

need some help with file upload validation, currently i have a script that checks for a max upload size and for proper file type.

The validation works fine however the "file type" validation part comes up with the error message if there is no file chosen either.

Is there a way to modify to code to say if there is no file chosen submit the form and if there is a file check if its the correct type before submitting.

Thanks, let me know if you need more info.

<form method="post" enctype="multipart/form-data" action="thankyou.html" name="SampleForm" id="app-form">
    <p>
    <label class="sr-only" for="upload">Attach Resume </label>
    <input type="file" name="fileUpload" class="upload-file" data-max-size="5242880" id="fileUpload" accept=".pdf,.jpg,.jpeg,.png,.doc,.docx">
        <br>(.pdf, .jpg, .png, .doc, .docx file types only) Max 5MB
        <span class="error error-msg"></span>
        <span class="error error-msg-two"></span>   
    </p>    
    <p>
    <input type="submit" id="submitbutton" value="Submit" name="submitbutton">
    </p>

    </form>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

    <script>

       $(document).ready(function(){
         //attachments  
           //for file size
        var fileInput = $('.upload-file');
        var maxSize = fileInput.data('max-size');
        var errmsg = 'File size is larger than 5MB';  
        $('#app-form').submit(function(e){
            if(fileInput.get(0).files.length){
                var fileSize = fileInput.get(0).files[0].size; // in bytes
                if(fileSize>maxSize){
                    $('.error-msg').text(errmsg);
                    return false;
                }else{
                    ''
                }       
            }
       });     
      //for file types
        $('#app-form').submit(function(e){
            var allowedFiles = [".doc", ".docx", ".pdf",".jpg",".jpeg",".png"];
            var fileUpload = $("#fileUpload");
            var errmsgtwo = 'Please upload the correct file type';
            var regex = new RegExp("([a-zA-Z0-9\s_\\.\-:])+(" + allowedFiles.join('|') + ")$");
            if (!regex.test(fileUpload.val().toLowerCase())) {
                $('.error-msg-two').text(errmsgtwo);
                $('.error-msg').text('');
                    return false;
            }else{
              $('.error-msg-two').text('');
              return true;
            }
          });
    });

</script>

Harry · Accepted Answer · 2018-10-31 05:37:36Z

1

Simply check this

var fileUpload = $("#fileUpload").val();
if(fileUpload){
   // when file exist
} else {
   // when file not exist
}

Feel free to comment for more help

answered Oct 31, 2018 at 5:37

Harry

2351 silver badge8 bronze badges

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

1 Comment

Steven Mihelakis Over a year ago

sorry forgot to get back to you, yes thank you very much it was so simple! just had to amend the 'else' part to read }else if (fileUpload.val() == ' ' ) { ' ' }

Collectives™ on Stack Overflow

Jquery Form File Upload validation

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related