Реализовать загрузку и отображение картинок

[gibsn]

MVP

В одном сообщении не более 5 картинок (N)

Front

1. На экране создания сообщения поддержать кнопку добавления картинки
2. На экране создания сообщения поддержать загрузку картинки при нажатии на кнопку
   1. После выбора картинки добавляется превьюшка
   2. Картинка не загружается сразу
   3. По нажатию на крестик превьюшка удаляется с фронта и из очереди на загрузку
   4. Показывать юзеру максимально возможное количество картинок в одном сообщении
   5. Если добавлено уже N картинок, то блокируем кнопку добавления новой
3. При нажатии Generate
   1. Все добавленные картинки
      1. Пережимаются в JPEG и уменьшается разрешение до не более чем 1179 × 2556
      2. Шифруются на фронте одним и тем же ключом
      3. TTL берется из общей формы
      4. Улетают в бэкенд последовательно, на каждую картинку отдельный запрос, бэк возвращает на каждую картинку ее айдишник
   2. Делается запрос на message/add с указанием заэнкоженного текста и айдишников картинок
   3. Превьюшки переносятся в секцию "Your message" под текст
   4. Кнопка загрузки картинки разблокируется если была заблокирована
4. При просмотре сообщения
   1. Получаем тело сообщения запросом на message/view
   2. Текст декодируем и выводим
   3. Берем айдишники сообщений и на каждое идем отдельным AJAX запросом
   4. Каждую картинку нужно расшифровать и показать в оригинальном разрешении

Backend

1. message/add
   1. Добавить прием айдишников картинок
   2. Ограничить количество картинок N
2. message/view
   1. Добавить возврат айдишников картинок
3. image/add
   1. Принимает зашифрованную картинку в виде multipart/form-data
   2. Принимает ttl гет-параметром
   3. Сохраняет в редис с ттл
   4. Возвращает айдишник
4. image/view
   1. Принимает айдишник картинки
   2. Удаляет картинку из редиса
   3. Возвращает картинку в виде multipart/form-data

Будущие улучшения

Front

1. На экране создания сообщения
   1. Начинать асинхронно загружать картинки как только юзер их добавил, 1 картинка грузится в каждый момент времени
   2. Если юзер нажал удалить, и картинка грузится, то отменить загрузку, если картинка загрузилась, то удалить картинку с бэка
   3. Все картинки загружаются с ттл 1ч (если юзер не нажмет генерэйт удалятся сами через час), при нажатии на generate бэк всем картинкам ставит TTL из запроса
2. На экране показа сообщения
   1. Вместо каждой картинки показывать loader пока она грузится
   2. Поддержать lazy load для оптимизации времени загрузки

Backend

1. В message/add для всех картинок идти и явно проставлять переданный ттл (для поддержки асинхронной загрузки картинок с фронта)
2. Реализовать апишку удаления картинки для реализации удаления асинхронно загруженных картинок

[gibsn]

добавил в add/view поддержку imgs:

curl --insecure -F 'text=test' -F 'ttl=86400' -F 'imgs=1559497c-a8fc-4f0c-874c-0ca19305269a,b2c492a3-c305-4678-8094-24c550988f48' 'https://127.0.0.1/api/v1/message/add'
{"code":200,"body":{"link":"https://127.0.0.1/html/messageview.html?id=2ce922be-10ef-4320-9890-7a9258973460"}}

curl --insecure 'https://127.0.0.1/api/v1/message/view?id=2ce922be-10ef-4320-9890-7a9258973460'
{"code":200,"body":{"text":"test","imgs":["1559497c-a8fc-4f0c-874c-0ca19305269a","b2c492a3-c305-4678-8094-24c550988f48"]}}

[gibsn]

реализовал image/add:

curl --insecure -F"ttl=86400" -F"image=@$HOME/Downloads/IMG_6351.jpg" "https://127.0.0.1/api/v1/image/add"
{"code":200,"body":{"id":"620b5c70-22fe-424e-823d-04b2de26e4c7"}}

[gibsn]

реализовал image/view:

curl -v --insecure --output pic.png --data '{"id":"5732bdc8-b414-4c91-8ae1-d48a37f242ae"}' "https://127.0.0.1/api/v1/image/view"

< HTTP/1.1 200 OK
< Server: nginx/1.23.2
< Date: Tue, 29 Nov 2022 08:33:00 GMT
< Content-Type: application/octet-stream
< Transfer-Encoding: chunked
< Connection: keep-alive
<
{ [16214 bytes data]