CODEWITHSUNDEEP
javascriptjquery
rinru
rinru

Reputation: 141

Jquery Condition not working

The problem is when I uploaded an invalid file extension and invalid file size. It doesn't alert Invalid file type and file size but instead it alerts depending on what is the first file that meets the 2 condition.

For example when I uploaded example.php and another file that has greater than 2048 it will alert the invalid file type. Then vise versa.

What I want is if I uploaded example.php and another file that has greater than 2048 the output must be Invalid file type and file size.

Here is my code:

var fileextension = new RegExp("(.*?)\.(csv|doc|docx|gif|jpeg|jpg|pdf|png|ppt|pptx|txt|xls|xlxs|zip|mp3|mp4)$");
$('input[type=file]').change(function () {
var val = $(this).val().toLowerCase();

for(var i=0; i<this.files.length; i++){
    var filename = this.files[i].name.toLowerCase();
    var fsize = this.files[i].size,
        fsize = fsize / 1024; // 1024 = 1mb
        if(fsize > 2048){
            $(this).val('');
            swal('Opps','Invalid file size','warning');
        }else if(!fileextension.test(filename)){
            $(this).val('');
            swal('Opps','Invalid file type','warning');
        }else if(!fileextension.test(filename) &&  fsize > 2048){
            $(this).val('');
            swal('Opps','Invalid file type and file size','warning');
        }
}

Upvotes: 0

Views: 80

Answers (2)

31piy
31piy

Reputation: 23859

Create a temporary string with e.g. message, and change your if block like this:

var message = "";

if(fsize > 2048){
  message += "Invalid file size";
}

if(!fileextension.test(filename)) {
  message += message === "" ? "Invalid" : " and";
  message += " file type";
}

Then you can call swal like this:

if (message) {  // Checks if there is something in `message`
  $(this).val('');
  swal('Opps',message,'warning');
}

Edit: Here is the updated answer (which is mentioned in the fiddle):

var fileextension = new RegExp("(.*?)\.(csv|doc|docx|gif|jpeg|jpg|pdf|png|ppt|pptx|txt|xls|xlxs|zip|mp3|mp4)$");

$('input[type=file]').change(function() {
  var val = $(this).val().toLowerCase(),
    invalidType = false,
    invalidSize = false;

  for (var i = 0; i < this.files.length; i++) {
    var filename = this.files[i].name.toLowerCase();
    var fsize = this.files[i].size,
      fsize = fsize / 1024; // 1024 = 1mb

    if (fsize > 2048) {
      invalidSize = true;
    }

    if (!fileextension.test(filename)) {
      invalidType = true;
    }
  }

  var message = "";

  if (invalidType) {
    message += "Invalid type";
  }

  if (invalidSize) {
    message += (message === "" ? "" : " and") + " size";
  }

  if (message) {
    swal('Opps', message, 'warning');
  }

});

Upvotes: 1

jitin
jitin

Reputation: 732

What's happens is that the first if condition that evaluates to true gets executed, and the program does not evaluate the rest. In your case, this makes the last condition in your if else loop inaccessible. If you want your last condition to be evaluated first, then move it up - something like this:

var fileextension = new RegExp("(.*?)\.(csv|doc|docx|gif|jpeg|jpg|pdf|png|ppt|pptx|txt|xls|xlxs|zip|mp3|mp4)$");
$('input[type=file]').change(function () {
var val = $(this).val().toLowerCase();

for(var i=0; i<this.files.length; i++){
    var filename = this.files[i].name.toLowerCase();
    var fsize = this.files[i].size,
        fsize = fsize / 1024; // 1024 = 1mb
        if(!fileextension.test(filename) &&  fsize > 2048){
            $(this).val('');
            swal('Opps','Invalid file type and file size','warning');
        }
        else if(fsize > 2048){
            $(this).val('');
            swal('Opps','Invalid file size','warning');
        }
        else if(!fileextension.test(filename)){
            $(this).val('');
            swal('Opps','Invalid file type','warning');
        }
}

Edit- If you want your output to be based on the status of all the files as a group, and not individual files, then obviously you cannot process your output inside the loop. You would need to do something like this:

 var fileextension = new RegExp("(.*?)\.(csv|doc|docx|gif|jpeg|jpg|pdf|png|ppt|pptx|txt|xls|xlxs|zip|mp3|mp4)$");
$('input[type=file]').change(function () {
var val = $(this).val().toLowerCase();

var sizeError=false;
var extensionError=false;

for(var i=0; i<this.files.length; i++){
    var filename = this.files[i].name.toLowerCase();
    var fsize = this.files[i].size,
        fsize = fsize / 1024; // 1024 = 1mb
        if(fsize > 2048){
            sizeError=true;
        }
        if(!fileextension.test(filename)){
            extensionError=true;
        }
}

Now use these boolean values extensionError and sizeError outside the for loop to check and process the output.

Upvotes: 0

Related Questions