Input file avoid duplicates

Question

I have next HTML code for file upload, and I need JS that will check file names and display message if two same name and extension files are uploaded.

<div id="el_1">
<input name="file_1" id="file_1" type="file">
</div>
<div id="el_2">
<input name="file_2" id="file_2" type="file">
</div>
<div id="el_3">
<input name="file_3" id="file_3" type="file">
</div>
<input name="button" id="button" type="submit" value="Submit" class="" style="">

And what is your question? You don't know how to access file properties? Or don't know how to do string comparison in JS? Or don't know JS and want us to write your code for you? — rsm, Jan 21 '19 at 19:37
@rsm I do not know JS, I need someone to write it for me. I have spend last few hours on the met, and I could not find solution, — stojsins, Jan 21 '19 at 19:42
"I need JS code" - you know, you can hire someone to write code for you... StackOverflow is not a free coding service, we can only help you with specific problems when you are writing code yourself. — Bergi, Jan 21 '19 at 19:42
@Bergy I has hoping that someone will spend few minutes and write few JS lines for me. It is not all about money. — stojsins, Jan 21 '19 at 19:50
If you run into these kind of things it might be a good idea to invest a few hours into learning how to use jQuery ... these kind of things do not require a deep understanding of JS and it could save you a lot of time down the stretch. — Cherusker, Jan 21 '19 at 19:53

score 3 · Answer 1 · answered Jan 21 '19 at 21:30

Here's a pure javascript solution that doesn't limit you to a set number of inputs.

You'll need to iterate through all of the input tags and see if any of them have the same file selected. You could use various methods to do this but regardless of how you do it you would want to look at the file name of the file that is selected. A file type input has a files attribute. It could contain more than one file but in your case it shouldn't. The files attribute is a FileList. Each element of the FileList has a name property that contains the file name including the extension. Here's a proof of concept:

<html>
<head>
<title>Test</title>
</head>
<body>
<form action="some action">
<div class="container">
   <input type="file" name="myFile1"  class="testFiles"><br>
   <input type="file" name="myFile2"  class="testFiles"><br>
   <input type="file" name="myFile3"  class="testFiles"><br>
   <input type="file" name="myFile4"  class="testFiles"><br>
   <input type="submit" name="Submit" onclick="checkDuplicates(event)">
</div>
</form>
<script type="text/javascript">
checkDuplicates = function(e){
  var arr = [];
  var fileInputs = document.querySelectorAll(".testFiles");
   fileInputs.forEach(function(input){
    if(arr.length == 0){
      arr.push(input.files[0].name);
    } else {
      if(arr.indexOf(input.files[0].name) > -1){
        e.preventDefault();
        alert("there's a duplicate");
      } else {
        arr.push(input.files[0].name);
      }
    }
  }); 
};
</script>
</body>
</html>

You're welcome, but an up vote would be appreciated. I'm trying to build some reputation points. — T. Stoddard, Jan 22 '19 at 11:31
I will like to, but I do not have enough reputations (Thanks for the feedback! Votes cast by those with less than 15 reputation are recorded, but do not change the publicly displayed post score.). Sorry. — stojsins, Jan 22 '19 at 13:01
I upvoted for you @T.Stoddard! One year late but it's never too late! :) — Acdn, Nov 25 '20 at 22:54

score 1 · Answer 2 · answered Jan 21 '19 at 19:53

1

you have to change the Id of the div so it must be unique like this way for example

$('#file_1, #file_2, #file_3').change(function(e){
    if (($('#file_1').val() == $('#file_2').val()) || ($('#file_1').val() == $('#file_3').val()) || ($('#file_2').val() == $('#file_3').val()))
    {
      alert("one file or two are duplicated")
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="file_1">
<input name="file_1" id="file_1" class="" title="" style="" multiple="0" type="file">
</div>
<div class="file_2">
<input name="file_2" id="file_2" class="" title="" style="" multiple="0" type="file">
</div>
<div class="file_3">
<input name="file_3" id="file_3" class="" title="" style="" multiple="0" type="file">
</div>
<input name="button" id="button" type="submit" value="Submit" class="" style="">

answered Jan 21 '19 at 19:53

mohamd Agoumi

80
1
11

If I'm not mistaken, `$('#file').val()` takes the whole filepath so you need something like https://stackoverflow.com/questions/423376/how-to-get-the-file-name-from-a-full-path-using-javascript in addition (if only the filename should be compared). – Cherusker Jan 21 '19 at 20:00
@mouhamd Agoumi Thank you very much. But I have received alert "one file or two are duplicated" as soon as I have uploaded first file. Can we prevent that behaviour? – stojsins Jan 21 '19 at 20:03
you have to add a condition to see if it's not empty – mohamd Agoumi Jan 21 '19 at 20:03
`$('#file_1').val() != ''` will be enough to solve that problem – mohamd Agoumi Jan 21 '19 at 20:10

stojsins · Answer 3 · 2019-01-22T14:05:14.700

@mouhamd Agoumi Thank you very much. I have changed code:

$('#file_1, #file_2, #file_3').change(function (e) {
            if ($('#file_1').val() != '' && $('#file_1').val() == $('#file_2').val() != '' && $('#file_2').val() || $('#file_1').val() != '' && $('#file_1').val() == $('#file_3').val() != '' && $('#file_3').val() || $('#file_2').val() != '' && $('#file_2').val() == $('#file_3').val() != '' && $('#file_3').val())
            {
                alert("one file or two are duplicated");
            }
        });

score 0 · Accepted Answer · answered Jan 22 '19 at 17:02

Thanks to Muhamd Agoumi and T. Stoddard, I have prepared final solution for me, and I will like to share it with you.

<!DOCTYPE html>
<html lang='en' class=''>
    <head><meta charset='UTF-8'>
        <meta name="robots" content="noindex">
    </head>
    <body>
        <div class="file_1">
            <input name="file_1" id="file_1" class="files" title="" style="" multiple="0" type="file">
        </div>
        <div class="file_2">
            <input name="file_2" id="file_2" class="files" title="" style="" multiple="0" type="file">
        </div>
        <div class="file_3">
            <input name="file_3" id="file_3" class="files" title="" style="" multiple="0" type="file">
        </div>
        <input name="button" id="button" type="submit" value="Submit" class="" style="" onclick="checkDuplicates(event)">
        <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
        <script >
            $('#file_1, #file_2, #file_3').change(function (e) {
                if ($('#file_1').val() != '' && $('#file_1').val() == $('#file_2').val() != '' && $('#file_2').val() || $('#file_1').val() != '' && $('#file_1').val() == $('#file_3').val() != '' && $('#file_3').val() || $('#file_2').val() != '' && $('#file_2').val() == $('#file_3').val() != '' && $('#file_3').val())
                {
                    alert("You can not send two or more same files.");
                }
            });
        </script>
        <script type="text/javascript">
            checkDuplicates = function(e){
              var arr = [];
              var fileInputs = document.querySelectorAll(".files");
               fileInputs.forEach(function(input){
                if(arr.length == 0){
                  arr.push(input.files[0].name);
                } else {
                  if(arr.indexOf(input.files[0].name) > -1){
                    e.preventDefault();
                    alert("You can not send two or more same files.");
                  } else {
                    arr.push(input.files[0].name);
                  }
                }
              }); 
            };
        </script>
    </body>
</html>

Shortly, there is two validations: First validation will be triggered instantly during file selection, when duplicated file is selected. This validation will be a warning for user that two same files are selected. In case that user ignores the first validation, second validation will be triggered at submit action. User will not be able to submit files as long as he does not remove duplicated file(s).

Thank you all for help!

Input file avoid duplicates

4 Answers4

Linked