CODEWITHSUNDEEP
javascriptjqueryduplicates
staples
staples

Reputation: 424

jquery - check to see if files are the same

I inherited a webapp which allows users to submit up to 7 files at a time. There is code that works in checking to see if there are two of the same file, but it is bulky and not flexible. 

if (elementId == "file2") {     
    if ((form.file2.value == form.file1.value) ||
        (form.file2.value == form.file3.value) ||
        (form.file2.value == form.file5.value) ||
        (form.file2.value == form.file6.value) ||
        (form.file2.value == form.file7.value)) {
        alert("ERROR!  File - " + form.file2.value + "\nselected more than once.  Select another file.");
        validFile = "false";    
     }
}

If I want to add another file or remove the file, I have to alter the JavaScript/Jquery to work with the new code. I want to make it flexible.

In other places in my code I have been able to cut back on my code to check the file name against the date they submitted to see if they match

$("[id^=file]").filter(function() {
    if ($(this).val().length > 0){
        if($(this).val().search(reportingPeriod) < 0 ) { 
          alert("ERROR! " + $(this).get(0).id + " does not match the selected reporting period!"); 
          $(this).focus(); 
          validForm = false;
        }                                               
    }
});

I am thinking I could use something along these lines for checking the file names, but when I do $(this).val(), I only return the first file name and not all of them. Can I use this same idea and put all the file names into an array and do a dup check there? If so how? Or is there a better way to do what I want to?

Upvotes: 0

Views: 58

Answers (2)

staples
staples

Reputation: 424

The correct answer is by @epascarello, but this is how I modified it to fit my needs. I was unable to post it in the comments below the answer

$(document).ready(function(){
$('input[type="file"]').change(function() {
    var allFields = $('input[type="file"]').removeClass("error");  //Get the text fields
    var vals = allFields.map( function() { return this.value; }).get();  //get the values into an array
    vals = jQuery.grep(vals, function(value){ return value != "" })
    while(vals.length > 1) {  //loop until we only have one value left
        var val = vals.pop();  //pull off an index to see if it exists
        if (vals.indexOf(val)>-1) {  //if exists, find the others and set error
            alert("Duplicate File Selected!");
            return false;
        }
    }      
});

})

Upvotes: 0

epascarello
epascarello

Reputation: 207501

There are a bunch of ways to do it. One way is to have a common class and loop over the values and look for matches.

$(".test").on("change", function() {
    var allFields = $(".test").removeClass("error");  //Get the text fields
    var vals = allFields.map( function() { return this.value; }).get();  //get the values into an array
    while(vals.length>1) {  //loop until we only have one value left
       var val = vals.pop();  //pull off an index to see if it exists
       if (vals.indexOf(val)>-1) {  //if exists, find the others and set error
           allFields.not(".error").filter( function(){ return this.value==val; }).addClass("error");
       }
    }      
});
.error { background-color: red; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" value="1" class="test" />
<input type="text" value="2" class="test" />
<input type="text" value="3" class="test" />
<input type="text" value="4" class="test" />
<input type="text" value="5" class="test" />

Upvotes: 1

Related Questions