JSP identify duplicate file upload

Question

I've been seraching for this for quite a long time, but found no good answer.

I have four fields which accept files from user,

<form method="post" action="upload" target="_blank" enctype="multipart/form-data" style="position: absolute; right: 0%; top: 2%;">
Left File :  <input type="file" name="dataFile" id="fileChooser" /><br><br>
Right File : <input type="file" name="dataFile" id="fileChooser" /><br><br>
Config File :<input type="file" name="dataFile" id="fileChooser" /><br><br>
my File :  <input type="file" name="dataFile" id="fileChooser" /><br><br>
upload<input type="submit" value="Upload" multiple="multiple" />
</form>

how to identify if the user chooses to upload same file all the four times and prevent it (i.e duplicate uploads)?

this may be on the JSP side or on the sevlet java side. Using commons file upload. I've found on my search here that I need to use DigestOutputStream, but no where I could find how to use it and was of no use.

---------------------------------------------EDIT--------------------------------------

Based on the answers below, I've updated my code as follows,

<form method="post" name="myform" action="upload" target="_blank" enctype="multipart/form-data" style="position: absolute; right: 0%; top: 2%;">
Left File :  <input type="file" name="dataFile1" id="fileChooser1" /><br><br>
Right File : <input type="file" name="dataFile2" id="fileChooser2" /><br><br>
Config File :<input type="file" name="dataFile3" id="fileChooser3" /><br><br>
Geco File :  <input type="file" name="dataFile4" id="fileChooser4" /><br><br>
</form>
<button type="button" onclick="ValidateFile()" style="position: absolute; right: 8%; top: 20%;">Click to Upload</button>
<script type='text/javascript'>
 function ValidateFile()
 {
var FileName1 = document.getElementById("fileChooser1");
var FileName2 = document.getElementById("fileChooser2");
var FileName3 = document.getElementById("fileChooser3");
var FileName4 = document.getElementById("fileChooser4");

if(FileName1 == FileName2)
    {
        alert("Same file cannot be uploaded!");
    }

        document.myform.submit(); // This works fine, but the alert doesn't. Tried .value and .value() also still doesn't work.     
 }
 </script>

Still the code doesn't work what is my mistake?

Answer 1

Try the value property, like this:

   var file1= document.getElementById("FileUpload1");
var file2= document.getElementById("FileUpload2");

if(file1.value == file2.value){
alert("Duplicate ");

}

you form should do the following to override the behaviour of the submit button :

<form method="post" onsubmit="return doSomething()">
  <input type="file" name="file1">
  <input type=submit>
</form>

in you doSomethingme thod do the following :

function doSomething(){
// if you dont want to sumbit return false ;
return false;

//if you want to submit return true 
return true;
}

and plese give me some feedback

Hope that helps .

Answer 2

I assume you mean duplicate means duplicate by content and not file name. if its only by file name then its pretty easy as suggested by @Dark Knight.

If you want to test duplicity by content here are the brief steps you can do:

1) Write the contents of the files to temperory files / permenant ones if you are anyway      
   going to store them. 
2) While constructing the outputstream for writing the file,instead of creating normal 
   FileoutourStream create DigestOutputStream and pass the FileOutputStream to
   DigestOutputStream's constructor.
3) DigestOutputStream's constructor takes another parameter called MessageDigest.You can   
   instantiate this seperately :MessageDigest md = MessageDigest.getInstance("MD5");
   and pass on this instance to constructor in step 2. 
4) after you call write on the output stream and done with the write calls,
   Call one of the digest methods on the MessageDigest instance as follows:  
   mdos.getMessageDigest().digest().
6) store the string representation of byte array returned by digest by using technique  
   as suggested in following link :

Get MD5 String from Message Digest

Hope it helps. pleaase let me know if you need clarification

Answer 3

Left File :  <input type="file" name="dataFile1" id="fileChooser1" /><br><br>
Right File : <input type="file" name="dataFile2" id="fileChooser2" /><br><br>
Config File :<input type="file" name="dataFile3" id="fileChooser3" /><br><br>
my File :  <input type="file" name="dataFile4" id="fileChooser4" /><br><br>

Assign unique ids to each input and onclick of upload button, invoke validateFiles() function. This function will validate files selected.

function validateFiles(){
  var fileName1=document.getElementById("fileChooser1").value;
  var fileName2=document.getElementById("fileChooser2").value;
  ............

  if(fileName1 == fileName2 ...){
   return false;
  }

  //Here goes Code to Submit form

}