How to Prevent on Uploading Duplicated Image(s) to Preview before Upload

Question

How can I stop loading to preview of files which are already listed in the preview? Apparently this is somehow working only when exactly same file(s) are selecting to upload to preview but if there are few new files it will upload all files nerveless if they are already there.

Here is my code:

// var url = window.URL || window.webkitURL; // alternate use

function readImage(file) {
  var reader = new FileReader();
  var image = new Image();

  reader.readAsDataURL(file);
  reader.onload = function(_file) {
    image.src = _file.target.result; // url.createObjectURL(file);
    image.onload = function() {
      var w = this.width,
        h = this.height,
        t = file.type, // ext only: // file.type.split('/')[1],
        n = file.name,
        s = ~~(file.size / 1024) + 'KB';
      $('#uploadPreview').append('<img src="' + this.src + '"> ' + w + 'x' + h + ' ' + s + ' ' + t + ' ' + n + '<br>');
    };

    image.onerror = function() {
      alert('Invalid file type: ' + file.type);
    };
  };

}
$("#choose").change(function(e) {
  if (this.disabled) {
    return alert('File upload not supported!');
  }

  var F = this.files;
  if (F && F[0]) {
    for (var i = 0; i < F.length; i++) {
      readImage(F[i]);
    }
  }
});

#uploadPreview img {
  height: 64px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="file" id="choose" multiple="multiple" />
<br>
<div id="uploadPreview"></div>

duplicate validation based on filename or exact image view ? — prasanth, Feb 02 '20 at 07:11
Right. for second condition we need some external library support to process [like](https://stackoverflow.com/questions/18510897/how-to-compare-two-images-using-node-js). so far i just validate with in name duplication — prasanth, Feb 02 '20 at 07:25

Mehdi Dehghani · Accepted Answer · 2020-02-02T09:04:55.640

One possible solution is using array of files and prevent adding duplicate files into this array using filename, something like this:

untested code

// send this to the server
var files = [];

function readImage(file) {
    var reader = new FileReader();
    var image = new Image();

    reader.readAsDataURL(file);
    reader.onload = function(_file) {
        image.src = _file.target.result; // url.createObjectURL(file);
        image.onload = function() {
            var w = this.width,
                h = this.height,
                t = file.type, // ext only: // file.type.split('/')[1],
                n = file.name,
                s = ~~(file.size / 1024) + 'KB';

            var isNewFile = files
               .filter(function(x) { return x.name === file.name; }).length === 0;

            if(isNewFile) {
                files.push(file);
                $('#uploadPreview').append('<img src="' + this.src + '"> ' + w + 'x' + h + ' ' + s + ' ' + t + ' ' + n + '<br>');
            }
            else
                alert('Duplicate file: ' + file.name);  
        };

        image.onerror = function() {
          alert('Invalid file type: ' + file.type);
        };
    };
}

How to Prevent on Uploading Duplicated Image(s) to Preview before Upload

1 Answers1