0

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?

Community
  • 1
  • 1

3 Answers3

0
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

}
Dark Knight
  • 8,218
  • 4
  • 39
  • 58
  • This works great! But can you please suggest me how to embed this to my input tag? I've used onclick in the input tag, though it shows the alert it still calls the servlet, what to do to make it stop calling the servlet if the files ar same? –  Feb 19 '14 at 08:10
  • updated my code based you your edit, even when the uploaded files are not same, it shows the alert...what to do??? –  Feb 19 '14 at 10:17
0

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

Community
  • 1
  • 1
Shailesh Vaishampayan
  • 1,766
  • 5
  • 24
  • 52
  • You are Welcome. Can you please also accept the answer if it works? Thank n advance :) – Shailesh Vaishampayan Feb 19 '14 at 08:15
  • Will do once I try it out, Can you please suggest me how to embed alerts to my input tag? I've used onclick in the input tag, though it shows the alert it still calls the servlet, what to do to make it stop calling the servlet if the files are same? –  Feb 19 '14 at 08:37
  • What do you mean by "stop calling the servlet if files are same"? You are going to make the call to servlet to check if files are same right? can you elaborate in steps what you want to acheive? – Shailesh Vaishampayan Feb 19 '14 at 08:45
  • don't call function .. .value() call property .value – Shailesh Vaishampayan Feb 19 '14 at 09:08
  • also if you want to make sure that all the file names must be different you can try below code: var duplicate = FileName1 == FileName2 == FileName3 == FileName4; if(duplicate){ alert ("duplicate"); } – Shailesh Vaishampayan Feb 19 '14 at 09:09
  • 1
    Also this is just a client side duplicate check which can only be done by name. I guess your question was really related to server side validation of duplicate files based on content – Shailesh Vaishampayan Feb 19 '14 at 09:13
  • let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/47829/discussion-between-shailesh-vaishampayan-and-zedai) – Shailesh Vaishampayan Feb 19 '14 at 09:22
0

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 .

  • This works great! But can you please suggest me how to embed this to my input tag? I've used onclick in the input tag, though it shows the alert it still calls the servlet, what to do to make it stop calling the servlet if the files are same? –  Feb 19 '14 at 08:13
  • 1
    please update your question and post your current code –  Feb 19 '14 at 10:18
  • Yes, I've just done that. Updated code under EDIT check. –  Feb 19 '14 at 10:18
  • you are not doing as i saied , use the onsubmit in your form , not onlick on the submit button –  Feb 19 '14 at 10:21
  • I've tried what you said @Amrola, but then I am not able to launch my servlet itself! –  Feb 19 '14 at 10:33
  • ok please show me how you did tried it and what are the results –  Feb 19 '14 at 10:35
  • let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/47839/discussion-between-zedai-and-amrola) –  Feb 19 '14 at 10:40