Как организовать загрузку изображений на сайт с превью и возможностью удаления удаления?

Question

Obivankinobi @Obivankinobi

JavaScript

Как организовать загрузку изображений на сайт с превью и возможностью удаления удаления?

Добрый день!
Встала передо мной обыденная задача сделать загрузку изображений на сайт. Но перед этим показать пользователю изображения и дать ему возможность удалить не понравившиеся, и если что то добавить новые без удаления старых.
сейчас на сайте работает простой обработчик , но он не может добавлять файлы в инпут и удалять .
Кто что может посоветовать ?
Вот код который сейчас работает

function previewFiles(evt) {
		// console.log(evt);
		$('.miniature_block').html('');
		// $('.big_foto img').remove();
		// $(t).html('')


		var counter = 1;
    var files = evt.target.files;
    for (var i = 0, f; i < files.length; i++) {
    	// console.log(i)
        f = files[i];
        var ftype = f.type.substring(0, f.type.indexOf('/'));
        if (['image', 'text'].indexOf(ftype) == -1) continue;
        
        var reader = new FileReader();
        reader.onload = (function () {
            return function (e) {
                var output;
                if(ftype == 'image') {
                    output = document.createElement('img',"id=5");
                    output2 = document.createElement('img',"id=25");

                    output.src = e.target.result;
                    output2.src = e.target.result;
                    console.log(counter + " ggg " + i)
                    if(counter === i) {
                    	$('.big_foto').children('img').attr({src: output.src });
                    }

                    bigimage = document.createElement('a');
                    bigimage2 = document.createElement('a');
                    bigimage.href = e.target.result;
                    bigimage2.href = e.target.result;
                    $(bigimage).append('<div class="img_hover"></div>');
                    $(bigimage2).append('<div class="img_hover"></div>');
                    bigimage.append(output);
                    bigimage2.append(output2);

                } else {
                    output = document.createElement('textarea');
                    output.classList.add('tarea');
                    output.value = e.target.result;
                }
                
                $('#sortContainer').append(bigimage);
                $('#karusel').append(bigimage2);
                counter++
            };
        })();
        reader[ftype == 'image' ? 'readAsDataURL' : 'readAsText'](f);
    }

}
$(document).ready(function(){

document.getElementById('myfile').addEventListener('change', previewFiles);

});