Uploading files via jquery - how do I restrict the accepted file types?

Question

0.00/5 (No votes)

See more:

Hi all,

I have what I hope will be a simple problem to solve. I am attempting to edit the details of what types of files can be uploaded in an online form that's jQuery-based. I'm sorry if I'm missing something obvious - I've looked at many different questions/answers surrounding this issue on Code Project and elsewhere, but I can't seem to find quite what I need to make this work... I am definitely a novice at this and would appreciate any help you can offer!

What I have tried:

Ok, the current code looks like this:

jQuery(document).ready(function() {   
      
jQuery('#tenant_license').bind('change', function() {
        var a=(this.files[0].size);
        
        if(a > 5000000) {
			
	jQuery("#file_limit").html("Image needs to be less than 5 MB and .JPG or .PNG Format");
    jQuery("#file_limit").css("color", "#dd4b39");
    jQuery("#file_limit").val('');
         
			jQuery("#tenant_license").val(null);
			tenant_continue_button
			 jQuery("#tenant_continue_button").css("pointer-events", "none");
			            
                return false;

			
        } else { jQuery("#file_limit").html("Image uploaded successfully.");
    jQuery("#file_limit").css("color", "green");   jQuery("#tenant_continue_button").css("pointer-events", "all"); }
    

});

...and it successfully limits the size of the files accepted for upload to 5MB. However, I also need to limit the file types accepted for upload to .JPG, .JPEG, and .PNG. I've found code that I think will do that, I just can't figure out how to incorporate it into the code blocks above. Here's what I want to add, which looks right to me... but goes a little over my head:

jQuery('#upload').fileupload({
      change: function (e, data) {
               if (!(/\.(jpg|jpeg|png)$/i).test(data.files[0].name)) {
                   alert('Not Allowed');
                   return false;
               }
       }
});

If anyone with a better grasp of jQuery (which I imagine is just about everybody on this forum) can help me figure this out, I am open to any and all suggestions.

Thanks in advance!

Posted 26-May-23 5:34am

Josh Mitchell

Updated 28-May-23 2:25am

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Andre Oosthuizen · Answer 1 · 2023-05-28T02:25:00

You can do this within your file input element -

<input type="file" id="fileInput" accept=".jpg, .jpeg, .png" multiple />

or you can use it in a script -

<input type="file" id="fileInput" multiple />

<script>
$(document).ready(function() {
  $('#fileInput').on('change', function() {
    var fileInput = $(this);
    var files = fileInput[0].files;

    // Check if any files were selected
    if (files.length > 0) {
      var validExtensions = ['jpg', 'jpeg', 'png'];

      // Iterate over the selected files
      for (var i = 0; i < files.length; i++) {
        var file = files[i];
        var fileExtension = file.name.split('.').pop().toLowerCase();

        // Check if the file extension is valid
        if (validExtensions.indexOf(fileExtension) === -1) {
          alert('Invalid file type: ' + file.name);
          fileInput.val(''); // Clear the file input
          return;
        }
      }
    }
  });
});
</script>

To use it in your block of code, I will do something like -

jQuery(document).ready(function() {
  jQuery('#tenant_license').bind('change', function() {
    var fileInput = this;
    var file = fileInput.files[0];
    var fileSize = file.size;

    // Check file size
    if (fileSize > 5000000) {
      jQuery("#file_limit").html("Image needs to be less than 5 MB and .JPG or .PNG Format");
      jQuery("#file_limit").css("color", "#dd4b39");
      jQuery("#file_limit").val('');
      jQuery("#tenant_license").val(null);
      jQuery("#tenant_continue_button").css("pointer-events", "none");
      return false;
    }

    // Check file extension
    var validExtensions = ['jpg', 'jpeg', 'png'];
    var fileExtension = file.name.split('.').pop().toLowerCase();
    if (validExtensions.indexOf(fileExtension) === -1) {
      jQuery("#file_limit").html("Invalid file type. Please upload a .JPG or .PNG image.");
      jQuery("#file_limit").css("color", "#dd4b39");
      jQuery("#file_limit").val('');
      jQuery("#tenant_license").val(null);
      jQuery("#tenant_continue_button").css("pointer-events", "none");
      return false;
    }

    // File size and type are valid
    jQuery("#file_limit").html("Image uploaded successfully.");
    jQuery("#file_limit").css("color", "green");
    jQuery("#tenant_continue_button").css("pointer-events", "all");
  });
});