Click here to Skip to main content
15,877,573 members
Please Sign up or sign in to vote.
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
Updated 28-May-23 2:25am

1 solution

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");
  });
});
 
Share this answer
 

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



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900