Как сделать скачивание фотографии из firebase storage?

Question

[Windy2]

Здравствуйте, я делаю приложение на React и использую для бэкенда Firebase. Идея проста - сайт загрузчик фото, т.е. пользователь выбирает с компьютера фото или гифку, после нажимает "загрузить" и файл уходит в Firebase storage. У меня всё работает, но я так и не смог найти информацию как скачать эту картинку потом? Т.е. ссылку с Firebase storage на файл я получил, но просто перейти по ссылке - открывается новая вкладка с этим изображением. Ставил атрибут download к ссылке - не помогает.

Есть ли способ, чтобы изображение не просто открывалось по нажатию кнопки скачать, а именно сразу скачивалось на компьютер.

Answer 1

[ThunderCat]

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

Content-type: image/jpeg
Cache-Control: no-store, no-cache
Content-Disposition: attachment; filename="stored_image.jpg"

Comments

[Windy2]

Хорошо, спасибо. Но не совсем понял. Это нужно указать в правилах firebase storage или где поконкретнее?

[ThunderCat]

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

[ThunderCat]

Windy2, еще как вариант вы можете получить изображение как блоб в скрипт, и его уже отдавать как аттачмент.
https://stackoverflow.com/questions/45239154/savin...

[Windy2]

Спасибо, чувак, fileSaver действительно то, что подходит в моём случае. А внести заголовок в firebase storage нельзя, по крайней мере информации на этот счёт я не нашёл. Но, fileSaver сохраняет фото в формате .jfif, осталось разобраться с этим

[Windy2]

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

[Windy2]

И даже если закинуть этот файл в конвертатор из jfif в jpg, ничего не получится, выдаёт ошибку

[ThunderCat]

Windy2,

Но, fileSaver сохраняет фото в формате .jfif, осталось разобраться с этим

.jfif это обычный жпег, один из вариантов именования. Достаточно просто изменить расширение на jpg, ничего конвертировать не надо.

[Windy2]

Хорошо, но с помощью каких методов это можно сделать?

[ThunderCat]

Windy2, https://github.com/eligrey/FileSaver.js/#saving-urls saveAs вторым аргументом принимает новое имя.

[Windy2]

при вызове
saveAs(this.props.link, 'wall.jpg')
я просто получаю картинку в новой вкладке по адресу ссылки. Если переводить сначала её в blob, а потом сохранять таким способом, то да, действительно получается файл формата jpg, но он не открывается ни в одном фоторедакторе