hesh hesh - 4 months ago 30
Javascript Question

How to check duplicate of my input file upload?

I have this form which has a button for file upload. When you select a file it shows at upload_prev div.
My problem is that when I try to select the same file nothing happens. I would like a validation or kind of non duplication function to run.
I did that. I tried many things and methods like using child nodes and seeing if the inner text is the same. I tried to loop using jquery each and getting the value, but all of them failed. I want to display a message that this file is already in the Box of upload_prev when I select it again.

<!DOCTYPE html>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.1.js"></script>

<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">

<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">

<style type="text/css">
.fileUpload {
position: relative;
overflow: hidden;
margin: 10px;

.fileUpload input.upload {
position: absolute;
top: 0;
right: 0;
margin: 0;
padding: 0;
font-size: 20px;
cursor: pointer;
opacity: 0;
background-color: #fff;
filter: alpha(opacity=0);

.buttonwrap {
text-align: center;
padding-top: 20px;
float: left;
display: block;

.buttonsend:hover {
background-color: rgba(255, 255, 255, 0.2);
color: #225C51;

.buttonsend {
text-decoration: none;
color: #fff;
font-size: 18px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 10px;
padding-right: 10px;
background-color: rgba(72, 133, 130, .5);

span {
float: left;
display: flex;
width: 100%;

p.closed {
margin: 0 0 0 7px;
cursor: pointer;



<script type='text/javascript'>//<![CDATA[

$(document).on('click', '.close', function() {

document.getElementById("uploadBtn").onchange = function() {
document.getElementById("uploadFile").value = this.value;

document.getElementById('uploadBtn').onchange = uploadOnChange;
//document.getElementById('uploadBtn').onchange = myFunction;

function uploadOnChange() {

var filename = this.value;
var lastIndex = filename.lastIndexOf("\\");
if (lastIndex >= 0) {
filename = filename.substring(lastIndex + 1);

// alert (filename);

var files = $('#uploadBtn')[0].files;

for (var i = 0; i < files.length; i++) {
$("#upload_prev").append('<span>' + '<div class="hesh">' + files[i].name +'</div>' + '<p class="close">X</p></span>');
document.getElementById('filename').value = filename;

document.getElementById("demo").innerHTML = files.length;





<FORM METHOD="post" ACTION="" ENCTYPE="multipart/form-data">
<!-- <input id="uploadFile" placeholder="Add files from My Computer" class="steptextboxq3" />-->
<div class="fileUpload btn btn-primary">
<input id="uploadBtn" type="file" class="upload" multiple="multiple" name="browsefile" />
<input id="filename" type="text" />

<div id="upload_prev"></div>

<div style="clear:both;"></div>
<div class="buttonwrap">
<a href="contactus.html" class="buttonsend" style="float:right;">Send </a> </div>

<p id="demo"></p>



This is my fiddle. How can I find a way to do this.



You can create an array to store files[i].name, use Array.prototype.indexOf() to check if file name has been added to array, if true call alert(), else add file name to array. You can reset array to [] at any point during process.

Note, <div> and <p> elements are not valid content of <span> element

// outside of `onchange`
var arr = [];

for (var i = 0; i < files.length; i++) {
  if (arr.indexOf(files[i].name) === -1) { 
     + '<div class="hesh">' 
     + files[i].name + '</div>' 
     + '<p class="close">X</p></div>');
  } else {
    alert(files[i].name + " already selected")

jsfiddle https://jsfiddle.net/Lc5gb7c9/2/