16. React + Node.js - Скачивание файлов с сервера - Облачное хранилище

Исходный код урока -

Ссылка на макет в figma -

Ссылки на плейлисты

[alexey_horbunov]

Дошел до этого урока и хотел бы для будущих зрителей сделать пару примечаний:

1. blob из axios получить довольно легко, нужно просто добавить responseType: blob

const fileBlob = instanceAxios.get(`/files/download/?id=${fileId}`, {
responseType: 'blob'
})
.then(data => data.data)

2. А еще я заметил, что мы постоянно прикрепляем авторизацию к каждому запросу, а также прописываем полный url. Это можно исправить с помощью создания инстанса axios через использования axios.create:

export const instanceAxios = axios.create({
headers: {Authorization: `Bearer
})

И потом использовать именно instanceAxios в запросах (это тот же аксиос, просто с вашими параметрами), стараюсь убирать дублирующийся код.


Еще раз автору курса спасибо, всем хорошего дня

[КачурЕвгений]

лучший курс на русском в ютубе. намного интересней примитивных интернет магазинов, как у других авторов. спасибо за проделанную работу!)

[DogSayWaf]

А я такую штуку через Buffer реализовывал, но твое решение мне нравится на много больше

[blgarOk]

Твоё стоп пропагенейшн каждый раз меня улыбает)

[moi-nick-zanyat]

очень крутой курс, уже второй день сижу)) как всегда пропустил что-то и сидишь пол часа не можешь понять, что случилось) пропустил await и не загружается файл))

[АнтонГалай]

Привет, огромное спасибо за урок, круто просто, оказывается это так легко сделать download)) по поводу ошибки в ключах в FileList, я раньше написал через нижнее подчеркивание, еще когда мы создавали только компоненты и их рендер, поэтому ошибки не было, а я там просто логику рендера описал, тупанул, надо было подумать про ключ лучше ) Если не помнишь, я в предыдущем уроке спрашивал )
Кстати, ты тут не дописал return в FileController в функции downloadFile, в блоке catch)

[gravedigger]

Если размер файла >= 100мб, мы будем ждать полную загрузку файла локально в браузер, а после он же предложит нам его сохранить?)

[Юра-]

К вопросу о Authorization - доцельно ли добавлять его в headers в axios.create({headers: {Authorization }}) ?
Ведь не в каждом запросе нам нужно отправлять токен. Да и пока не залогинет - то токена и нету

Спасибо за уроки!!

[АлександрСосо-щб]

почему-то скачиваются только файлы с расширением txt и xls. а вот mp3 не скачивается...

[СтепанЦуканов-ты]

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

[Max-krie]

Все получилось. Но file._id на клиенте это вро де как не ок. Сам то я настроил model, и периодически ловлю ошибки когда у меня ._id проскакивает с вашего кода. Спасибо.

[blgarOk]

Возможно кому-то пригодится.
Как я делал загрузку файла с помощью RTK Query.

Сам эндпоинт:

downloadFile: build.query({
query: ({ _id }) => ({
url: '/download',
method: 'GET',
params: {
_id,
},
responseHandler: async (response) => {
return response.blob())
},
cache: 'no-cache',
}),
})

Логика в компоненте:

const [downloadFile, {}] =

const downloadHandler = async (e) => {
e.stopPropagation()
const response = await downloadFile({ _id })
const downloadURL = response.data
const link = document.createElement('a')
link.href = downloadURL
link.download = name

link.click()
link.remove()
}

[LapmXU]

У меня не работает.... 400 Bad request
P.S. Скачал код автора, подставил свои конфиги, и то же самое...

[AlexanderTM]

ребята что мне делать если я ничего не понимаю я просто все копирую помогите с этим