JavaScript Input File Not Storing Contents When I Add More Content to Upload

Alright so I’m looking so much to this code that I can’t figure it out anymore.

So I have a “Select Files” button that I allow users choose multiple files to upload:

<input type="file" multiple id="gallery-photo-add" name="file[]" class="form-control custom-file-input btn btn-info" value="">

Below is the JavaScript. Everything works except this behavior:

• I click and select 1 file to send. It does everything right and send it to the preview. If I click to add more files, it resets the input value and remove the ones I added before. Just from the input, not from the previews.

  var imagesPreview = function (input) {

    if (input.files) {
  
        // remove main principal
        $('.no-image').parent().remove();
  
        // get total files sent this time
        var filesAmount = input.files.length;
  
        // get existent files in carousel
        var totalItens = $('.carousel-inner > .item').length;
  
        // sum all items
        var itensSum = (filesAmount + totalItens);
  
        // update total in title
        $('.slider-total-items > span').html('(' + itensSum + ')');
  
        var reader = new FileReader();
  
        for (i = 0; i < filesAmount; i++) {
  
            reader.onload = function (event) {
  
                $('.carousel-inner > .item').removeClass('active');
  
                if (input.files[0].type.substr(0, 5) == 'video') {
                    var html = '<div class="item ' + (i == 0 ? 'active' : '') + '"><video width="320" height="210" controls><source src="' + event.target.result + '"></video></div>';
                    return
                }
  
                if (filesAmount > 1) {
                    var html = '<div class="item text-center posts-images-edit ' + (i == filesAmount ? 'active' : '') + '"><img src="' + event.target.result + '"></div>';
                } else {
                    var html = '<div class="item text-center posts-images-edit ' + (i == 1 ? 'active' : '') + '"><img src="' + event.target.result + '"></div>';
                }
  
                $(html).appendTo('.carousel-inner');
            }
  
            if (itensSum > 1) {
                $('#galleryControls').removeClass('hide');
            }
  
            reader.readAsDataURL(input.files[i]);
        }
    }
  

  };

  $(function () {
  $(‘#gallery-photo-add’).on(‘change’, function () {
  imagesPreview(this);
  });
  });

How can I keep all the files selected on the input?

Thanks