Необходимо переработать интерфейс уже существующего загрузчика файлов.

На проекте для загрузки файлов используется jquery плагин jQuery File Upload Plugin 5.42.3

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

Ниже на скриншотах приведены примеры обновленного графического интерфейса для загрузки файлов.

Поведение:

Интерфейс загрузчик файлов имеет два состояния.

1 .Состояние прямой загрузки
2. Состояние результатов

Состояние загрузки:
screenshot - https://prnt.sc/pedpEu4-qLrE

В данном режиме пользователь может выбрать один, либо несколько файлов для загрузки их на сервер.

Выбор файла осуществляется либо кликом на зоне ADD NEW, либо переносом одного файла или группы файлов в эту зону.

При загрузке файлов, подписываемся на событие “прогресса загрузки“ для каждого файла отдельно и отображаем прогресс в интерфейсе для каждого файла отдельно.

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

Вкладка REMOTE URL UPLOAD позволяет указать ссылку, по которой будет выгружен файл со стороннего веб-ресурса.

При нажатии кнопки Cancel происходит остановка активных загрузок и закрытие формы загрузчика.

При нажатии кнопки Hide прячется окно не останавливая процесс загрузки

Внести поправки в загрузчик и результаты загрузки как на двух скриншотах ниже.

Состояние результатов:

screenshot - https://prnt.sc/t9FXi3o0vvPi

Результаты загрузки всех файлов.

В данном состоянии мы видим список только что загруженных файлов, с их деталями и свойствами.

В данном состоянии у файл есть 4 вкладки

1. Download link
2. Link for forum (Переименовать в Forum Code)
3. HTML code
4. Embed Code

Все эти пункты отображают disabled textarea с теми же данными, что содержаться в соответствующих параметрах на странице со свойствами/деталями файла:

screenshot - https://prnt.sc/FYKsmBs80DB6

Варианты на скриншотах уже сверстанные нужно внести правки.

От разработчика требуется ответственность и всегда быть на связи

Tg : @goodstream_online