Загрузка изображений с превью
 

Помогите пожалуйста реализовать загрузку изображений (multiple) на сервер (в карточку товара продукта) с превью. В превью возможны манипуляции: удаление, сортировка.
Пример можно посмотреть тут: Simpla
Логин: admin
Пароль: admin

Карточка товара

Но там все запутанно и шаблонизатор Smarty.:-?
Не могу в коде разобраться, не силен в JS.
Исходный код оттуда есть

Предполагается для PHP
Тесты

Скорее всего в раздел Работа.

Smarty работает на сервере, а предпросмотр на клиенте.
Из коллекции выбранных файлов полем со множественным выбором нельзя удалить какой либо выбранный файл. Можно пометить не загружать такой, и загрузку производить посредством Ajax.
Сортировка, это как сервером определено, либо указывается номер, либо сервер ее определяет сам порядком загруженных файлов.

Значит в песочницу браузера не вмешаться?

А вы что хотите иметь - веб страницу административного раздела или нечто большее?

Да, админку.
Хотелось бы понять как работать с <input type="file">
Я так понял, что с локального компа файлы попадают во временное хранилище браузера.
1. Как удалить какой-нибудь файл оттуда, как передать оставшиеся методом пост.
2. При повторном открытии сохраненной сущности, можно ли подгрузить уже с сервера, загруженные раннее файлы снова во временное хранилище?
Если нет - то как извернуться?
Мне не нужно готового решения, хочется все это усвоить, самая слабая область у меня.

1. Нет такого метода, и было сказано об этом. Если бы речь шла о поле с единственным выбором, то его можно было бы и очистить, и удалить.
2. Браузер, это не набор массивов, в котором пользователю позволительно делать все что ему вздумается. А работа с локальными документами и каталогами еще и ограничивается вопросами безопасности со стороны браузера.
И что означает "При повторном открытии сохраненной сущности" - обращение к добавленному в базу товару, получение его уже загруженных изображений, которые загрузить на клиента, скрестив их с вновь выбранными для загрузки?

Оно самое!

Если бы такое и было возможным, объединение выбранных для загрузки и ранее выбранных (хотя это можно сделать,только не непосредственно с коллекцией выбранных), то делать этого совсем не нужно потому, что это накладно, кроме расточительства ничего не дает, да и просто глупо.

Если у товара есть изображения, значит при редактировании товара их нужно выводить в списке согласно установленного им порядка. При этом элементы списка будут содержать и скрытые поля определяющие сортировку. Кроме этого можно в список поместить и флажок для выбора удаления изображения.

Вновь добавляемые изображения помещать предварительным просмотром в этот же список, также имеющим скрытые поля для порядка сортировки и удаления из коллекции выбранных.

При каждой смене порядка (либо drag-and-drop или иным способом) сортировки, выбора удаления, у коллекции скрытых полей изменяется значение согласно их индексации в наборе.

Скрытые поля и флажки для удаления уже имеющихся изображений и такие же поля у добавляемых имеют разные имена полей, например upd и add. При этом поля имеющихся изображений связаны с ними по идентификатору (или иным способом, это зависит от того как хранятся данные на сервер и как они связаны с товаром), а у добавляемых изображений по их индексу в коллекции.

Для того чтобы в списке различать имеющиеся и добавляемые изображения, элементы списка можно стилизовать, или даже сами загруженные изображения в списке выводить в градациях серого.

Выбор Удалить во вновь выбранном для загрузки означает не загружать его на сервер. Сама загрузка как и редактирование всех параметров товара производится посредством Ajax. Используя FormData можно загрузить из коллекции выбранных только те, что не выбраны для удаления.

Теперь понимание пришло ))
Спасибо, подробно объяснили!!! :victory: