Drag&Drop превью

[McLotos]

Добрый день. Подскажите как реализовать превью с кнопочками для удаления после загрузки картинок?
Есть код самой загрузки

dropzone = document.getElementById('dropbox');
maxFileSize = 100000;
dropzone.ondragover = function() {
        dropzone.style.ClassName='hover';
        console.log('ondragover');
        return false;
    };
    
    dropzone.ondragleave = function() {
        dropzone.style.ClassName='';
        console.log('ondragleave');
        return false;
    };
    dropzone.ondrop = function(event) {
        event.preventDefault();
        dropzone.style.ClassName='';
        dropzone.style.ClassName='drop';
        i=0;
        var file = event.dataTransfer.files;
        for(i=0;i<file.length;i++)
       {
        if (file[i].size > maxFileSize) {
            dropzone.innerHTML='Файл слишком большой! Размер файла: '+file[i].size+'. Разрешенный размер файла: '+maxFileSize;
            dropzone.style.ClassName='error';
            return false;
        }
       
       }
    };
    function uploadProgress(event) {
        var percent = parseInt(event.loaded / event.total * 100);
        dropzone.innerHTML = 'Загрузка: ' + percent + '%';
    }
    
    function stateChange(event) {
        if (event.target.readyState == 4) {
            if (event.target.status == 200) {
                dropzone.innerHTML='Загрузка успешно завершена!';
            } else {
                dropzone.innerHTML = 'Произошла ошибка!';
                dropzone.style.ClassName = 'error';
            }
        }
    }

[kostyanet]

После загрузки куда - в форму или на сервер?

Вариант 2 - с сервера приходит хтмл со всеми src и кнопочками.

Вариант 1 - в браузере делаются тумбы из канваса.

В терминах отправки формы удалить можно только все файлы висящие на данной кнопке. По-отдельности удалить нельзя. Или на каждый файл надо делать кнопку file и таскать по-одному.

[kostyanet]

Вариант 2, вместо

dropzone.innerHTML='Загрузка успешно завершена!';

должен прийти html или json с сервера и

dropzone.innerHTML=link.responseText; // например

[kostyanet]

Можно, пользуясь случаем, еще раз задать вопрос по драгу тем, кто его делает? Спасибо.

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

Я к тому, что не надо тратить силы и время на эту фичу вообще. Ни один нормальный юзер ей не воспользуется никогда.