Кадрирование картинок для размещения на сайте, full & preview
 

искал, но не нашёл, пришлось сделать
https://github.com/JonHappy/EX_template
позволяет изменить размер, повернуть, передвинуть, обрезать
в итоге из исходной катинки получить наилучший вид для размещения на сайте превьюшки и полного вида картинку
без использования внешнего редактора. после кадрирования картинки готовы для аплоада на сайт с привязкой к теме/товару

в демке есть такой код для загрузки нескольких файлов

target.addEventListener("drop", function (event) {
                // отменяем действие по умолчанию
                event.preventDefault();
                var files = event.dataTransfer.files;
                var n = files.length;
                var g = n;
                var a = 0;
                var name_files = [];
                for (var i = 0; i < n; i++) {
                    var reader = new FileReader();
                    reader.readAsDataURL(event.dataTransfer.files[i]);
                    name_files.push('<span id="file' + i + '">' + event.dataTransfer.files[i].name + ' &nbsp; &nbsp; &nbsp;</span>');
                    reader.onload = function (e) {
                        --g;
                        $('#list_files').append(name_files[a]);
                        console.log(name_files[a])
                        var pic = new Image();
                        pic.src = e.target.result;
                        pic.nn = a++;
                        fb.push(pic);
                        if (g === 0) {
                            work();
                        }
                    };
                }
            }, false);

он работает, не совсем так как написан (итог работы правильный)
суть не правильной рвботы в этом

$('#list_files').append(name_files[a]);
console.log(name_files[a]);

по логике первая строка должна в div выводить имя файла после срабатывания события onload.
по строке console.log(name_files[a]); видно , что в консоль выводится правильно.
в див , видимо, тоже выводится, но индицируется то, чем заполнился див, только после окончания загрузки всех файлов.
т.е. нет прогресса загрузки.

как исправить?

PS
если после

$('#list_files').append(name_files[a]);

поставить
alert();
то вывод будет обеспечен.

вот сделано
https://github.com/JonHappy/JonHappy.github.io
и полное демо
https://jonhappy.github.io/modal_menu/