96 - ReactJS загрузка изображения, shouldComponentUpdate fix
ฝัง
- เผยแพร่เมื่อ 28 ส.ค. 2024
- it-incubator.i... - человекоориентированное, честное и профессиональное обучение front-end и back-end разработке гарантированно до трудоустройства за фиксированную стоимость.
Поддержать меня можно на patreon / itkamasutra или оформив спонсорство на данном канале.
Помогайте друг другу вот здесь: t.me/reactjs_s...
API: social-network...
Часто нужно на сайт загрузить фотку, mp3-файл, архив и так далее. Сегодня мы с вами будем загружать аватарку профиля.
Несложно, принцип один:
1. добавляем тег input с type="file"
2. вешаем обработчик на событие onChange
3. берём файл, выбранный в input, и отправляем его в бизнес (диспатчим санку)
Летим, самураи!!!
Уроки по React JS: • Курс "React JS - путь ...
* Сайты:
it-kamasutra.com
it-incubator.eu
samuraijs.com
* Мы в соц. сетях:
itkamas...
/ itkamasutra
telegram.me/it...
* Мои личные VK и Insta:
d.kuzyu...
/ it.kamasutra.dimych
#shouldComponentUpdate #file #reactjs #практика #пример #уроки #курс
ура! поставила фотку! с середины курса я все ждала этого момента, думаю: "почему люди фотки не ставят?" а дело в том, что это будет в 96 уроке. все юзеры с фотками - настоящие самураи! спасибо за урок! #загрузкаизображения #shouldComponentUpdate
Привет. Будь добра дай ссылку на свой git. Я поймал ошибку и затупил, не могу понять в чем дело.
@@MikhailKuklenkov привет, я оставляла ссылку, но комментарий удален
По количеству аккаунтов с фотками в "Users" можно точно определить количество дошедших до этого урока самураев))
у меня 3 акаунта, так что -2))
@@anonuser1366 зачем?
я заморочился и вытащил всех юзеров из апишки, потом фором посчитал у скольких фотки не нулл. в итоге: есть фотки у 637 юзеров из 3426 (18,6%).
Грубо говоря около 15% процентов реально хотят чему-то научится и не сдаются
@@Kalebra013 многие недавно начали
@@militant6709 Думаю можно + 20-30%
Ржунимагу про поцелуй в конце)
Очередной бомбезный выпуск по React и Redux !!! Мы все огромные молодцы кто дошел до этого выпуска с самого начала, особенно тяжело было Димычу поэтому кто как может должен его обязательно отблагодарить если ещё не отблагодарил !!!))
Спасибо, мужик!
@@ITKAMASUTRA я не знаю что вы планируете в дальнейшем делать с ресурсом social-network но на данный момент оплатить там подписку для не проживающих на территории снг не возможно, ну или почти, если тебе не наплевать на то что едиственный сервис который подключен для оплаты требует пройти через процесс идентификации с предоставлением паспортных данных, я простите не открываю счет в банке или регистрируюсь на каком то сверх сложном сервисе, а просто хочу оформить копеечную подписку и не собираюсь предоставлять свои персональные данные в таком объеме как фотки пасспорта и тд. в принципе это мне не мешает пользоваться апи, уж не знаю то ли вы решили в конце концов сделать это бесплатно, толи какой то глюк, но тем не менее из Новегии у меня прекрасно все работает и без подписки, я подписалась на патреоне - доступ к секретному контенту мне пока не нужен, просто пока оформила минимальную подписку чтобы пользоваться апи с чистой совестью, но думаю не плохо было бы подключить какую нибудь другую дополнительную платежную систему к social-network, так как таких как я не мало на этом канале(ну я так думаю)
Вот вспоминания как все данные прокидываются в процессе повторения очень хорош помогают этот процесс запомнить, жирный лайк, а то когда так поглощаешь информацию, некоторые моменты забываются.
Это хорошо людям, которые ждали новый выпуск, они тренировались в период ожидания, но люди, которые будут смотреть готовые 100 выпусков, они с нетерпением будут смотреть урок за уроком, а это минус в практике)
Очень радуют слова в конце каждого видео! Дмитрий- человек с очень доброй душой, большим умом и огромным желанием сделать мир лучше! Побольше бы таких людей! Отличные уроки по React - Redux! Очень хорошо объяснена загрузка изображения!
спасибо за выпуск! крутой курс! девчата летят дальше)
боже, неужели я добралась до того видео, с которого видно 101 урок в плейлисте) настоящая финишная прямая) спасибо Димычу за огромный труд!
Работаешь фронтендером?
@@AmeSagiriAlbion неа(
@@smolhs1586 У меня тоже проблемы с поиском вакансий) Их тупо нету либо нужен опыт работы большой :/
Офигенный урок про загрузку изображений. Наконец-то пофиксили баг с профилем с помощью shouldComponentUpdate (теперь понятно, что пофиксить это было не очень сложно, но самостоятельно до этого додуматься лично у меня не получилось). Однозначно лучший курс по React JS и JavaScript. Дима - просто дикий парень, невероятно заряжает силами! Не забываем периодически благодарить его за это не только лайками и комментариями))
объект c заголовком header: Content-Type: form/multipart можно не отправлять в API. Конструктор FormData() формирует его сам автоматически
Спасибо!
Радик такх коментов я и чтаю их!) спасибо мужик!
Кстати да, а то был опыт до этого загружал файл на сервак и там я ничего такого не указывал. Спасибо за обьяснение
Цитаты лучших преподавателей: "Блин, микрофон падает, ёбушки-воробушки" 😹
"Что я сделал, буську дал, ПРОСТИТЕ, МУЖИКИ" 😹
всё ещё лучший курс по React JS )
Бро, как можно быстрее ответ, пожалуйста. Ты уверен, что этот курс стоит того, чтобы просмотреть? Я просто перемотал на 99 урок и там ничего такого нет, как-будто одно и тоже. Как-будто он не показал даже как печатать смс друг-другу и сама по себе соцсеть не сделалась, а этот курс объясняет только очень малую информацию
И выглядит также как-будто всё, как и на 24 уроке, на котором я сейчас.
@@avarskiyaslahan8213 стоит. Он хорошо поясняет базу, которая нужна перед углубленным изучением
@@smolhs1586 Стоп, а он показал как переписываться там например?
@@avarskiyaslahan8213 нет
Лайк за урок! Кстати про красоту оформления. Было бы вообще огненно если бы ты сделал видео как прикрутить к проекту какой-нибудь css фреймворк (бутстрап, материалайз ...) Это было бы просто мега круть. Можно это сделать как продолжение этого курса или как отдельный выпуск. Огромная благодарность тебе Димыч от меня и от всех кто учится по твоим урокам!
Ну про девчат прям приятно, что уж тут. Спасибо Димыч за твои видосы!! Я уже в интернатуре на React разработчика))
устроился на работу - спустя 2 месяца после просмотра 100 выпусков, зп 500$, в стартап
Спасибо большое за урок!!! Было очень полезно. React, redux, image uploading, componentDidUpdate, put-запросы, form data, input type file
Привет. Будь добр дай ссылку на свой git, я поймал ошибку и затупил. Не могу понять в чем дело.
Спасибо за выпуск! Очень интересно было загрузить свой файл. Сначала посмотрел видео, потом на листе бумаги написал план-алгоритм и начал кодить. Немного намудрил с отправкой и получением файла, пришлось возвращаться к видео и конспекту. Зато так лучше понял. Выпуск просто огонь.
Наконец то аватарка)) Как мне ее хотелось зафигачить)
Дима, спасибо за твой бесценный труд!)
Ты делаешь мир лучше!!!
Приятненько, когда получаешь от Димыча супер-мега-респект :D
Летим дальше по курсу ReactJS!
Буську?)
Спасибо за отличный курс по React/Redux !!! Уже почти на 2.0 !!!
Хех, хейтеры не доходят до донца))) Спасибо за курс, Димыч!) Лечу дальше!)
доходят, чтобы выудить максимум информации)
Класний курс, відчуваю себе розробником, апішку купив з самого початку і не жалію.
Смотрю уже как сериал и скорее хочу начать смотреть новый сезон 💥 спасиииибо! Песня тоже уже в голове играет в течение дня, хожу и напеваю
Очень нужен хороший урок по стилизации нашей соц сети!в пределах 100 уроков
Сейчас становится забавно, когда в первых уроках Димыч говорил, можете сделать(поиграться) компоненту юзеров и там фоточки добавить.
Я начал делать массив в сторе, в контейнерной компоненте через мап хотел создать объекты и вызывать их в презентационной компоненте. Но стало страшно от наследований и присвоений, и я оставил эту затею =D
А еще меня терзало, что у меня аватарки нет, я все искал может в API'шки сайта есть вкладка такая, загрузки фото =D
++++++++++++++++
Спасибо большое!
React & Redux бомбим дальше))
Спасибо большое за выпуски! Димыч ваще красавчег! Они реально помогают!
После месячного перерыва выхожу на финишную прямую и допиливаю соцсеть до 100го выпуска!
ReactJS, shouldComponentUpdate, image uploading.
ух я на 60 ролике пока, кайфую очень здорово, вижу новые видео и так настроение поднимается) спасибо, это лучший курс что я видел
React
Redux
Спасибо! 2022! Отметился в статусе, что дошел до 92 урока!!! Еще 4 шага.
держи свою крышу на месте, она нам всем ещё нужна!)) ты и твой мозг даёте нам возможность стать круче, спасибо еще раз!!!
Устроилась на работу?
Спасибо, Димыч, за курс! Это лучшее , что есть на ютубе по реакту)))
Ребят, кто дошел до этого урока, проверьте пожалуйста загрузку фото на сервак. Я уже 2 дня не могу дать ума почему приходит код "1" с сообщением "Choose Image file". В первый раз делал сам, после неудачных попыток отправки фото сделал под диктовку Димыча, но так же песня
Привет, можешь скинуть сыллку нас вой git с этим проектом буду очень благодарен
Я не заметил до этого, что на этом курсе мы загрузим фотку, и так расстроился. Настолько расстроился, что сам взялся за проект и воткнул вкладку "profile settings" в настройках с выбором фотки и её превью. Классный опыт был. Спасибо за видосы Димыч!
как ни странно, вся эта математика с paginator-ом у меня зашло на ура, интересно же)))
Шик, только посмотрел 95 выпуск и запустил приложение на github, а тут новый видосик подоспел! Есть, чем заняться завтра! Еще раз спасибо за такой крутой курс по React!!
Наконец-то, и у меня есть фото в профиле. Спасибо большое за проделанную работу!
Спасибо! Крутяк! Очень интересно! Сначала сам долго голову ломал, как решить проблему, а потом оказалось, что дело в api. Я put запрос сделал по аналогии со статусом поначалу через json... :)) Когда додебажил до api'шки, понял, что проблема там и начал смотреть ролик дальше :)
Все ближе к тому, к чему к тому?
Да к составлению резюме по React + Redux. )))
Лучший курс по этой теме!
Невероятный воин, спасибо)!
Все выпуски суперМегаМега крутые! Спасибо! ReactJS загрузка изображения, shouldComponentUpdate fix
Первый фикс componentDidMount в сто раз проще сделать Хуками, имхо.
Подскажите, а как вы переписали на хуки компоненту профиля? Не могу докумекать
Спасибо что накинул идею с формулой левой и правой границы. Я конечно всё равно по своему сделал и формулу другую написал и пагинацию сделал чтобы при клике на страничку автоматом скролились страницы а текущая оставалась по центру. От души)))
Спасибо огромное за твой труд! Смотрю дальше!
Круто круто круто круто , бомбим дальше
Хахаха!!! І тобі, Дімич, цьомчик! :))) Я в апішних запитах одразу роблю перетворення return instance.бла-бла.then(response => response.data), щоб в подальшому трохи скоротити звернення до потрібних мені даних
За красиво много не платят)) за логику и продумывание платят хорошо) Спасибо тебе) Отдохни и наберись сил тем более уже все 100 выпусков по React отснял) Как же приятно когда есть люди которые держат слово!) И да хоть ты и женат но девочки всегда приятнее пальчиков))
финал скрасил день учёбы! спасибо Димыч
летим
Спасибо за урок! Летим дальше! :)
React JS от Димыча - супер курс!
Опечатался в слове target, искал ошибку 3 часа 🤯 Димыч, респект!
Написал "response.data.date.photos" и сломал голову 🤯
spasibo za urok - 96 - ReactJS загрузка изображения, shouldComponentUpdate fix
Ура, теперь я знаю, как загружать изображение на сервер из ReactJS =))
А насчет того, что профиль не обновлялся из-за отсутствия метода жизненного цикла componentDidUpdate (не shouldComponentUpdate, как указано в названии видео), так я его самостоятельно сразу же пофиксил, не смог жить с этой багой.
Димыч, красавчик. Спасибо тебе.
Финишная прямая, она для как ни странно самая нетерпеливая
2022. Ееееееееее, исправили баг с профилем! Очень рад!
Загрузка фотографий тоже очень порадовала.
Спасибо большое!
Привет. Будь добр дай ссылку на свой git. Я поймал ошибку и затупил, не могу понять в чем дело.
@@MikhailKuklenkov Привет!
К сожалению, я этот проект не загружал на гит :(
Но если будет интересно глянуть другие проекты - мой ник pashabezk
Круто, все работает! Я Аватар еще раньше поменял, но получалось , что запрос шёл из компонента, теперь всё чисто 👍🏼 🚀🥷🏼
Если сервак не принимает ваш аватар (09.01.2023), уберите из апишки хедерсы {headers: {'Content-type': 'multipart/form-data'}}
В конечном итоге будет выглядеть так:
savePhoto(file) {
const formData = new FormData();
formData.append("image", file)
return instance
.put(`profile/photo/`, formData);
}
Привет. Будь добр дай ссылку на свой git. Я поймал ошибку и затупил, не могу понять в чем дело.
Я использовал useEffect для ProfileContainer. Вроде за всем следит самостоятельно )
Все супер! Летим!)))
Оооо, неужели наконец-то наткнулись на эту багу к 96му уроку))) Я уже потерял надежду и думал: "ну ок, че ... ладно хотя бы я у себя ее поправил"!! Интересно посмотреть как такие моменты треба прописывать (хотя, я уже толком не помню как я сам это фиксил ... уж очень давно это было)))
так. вот. нашел:
useEffect(() => {
if (current_ID === null) setProfile(requested_ID) // read profile from DB
else if (current_ID !== requested_ID) unsetProfile() // URL changed
-> drop profile to null
}, [current_ID, requested_ID]) // eslint-disable-line react-hooks/exhaustive-deps
Кстати, очень долго разбирался с тем, почему у меня консолька ругается на useEffect, если в нем используются коллбэки, пришедшие в пропсах и при этом я не передаю их, как зависимости. Пробовал и через useCallBack и всяко. В итоге нашел способ как реализовать правильно, чтобы все работало и варнингов не было, но по коду получается раза в 1.5-2 больше, чем через классовую компоненту. Так что, в случае когда вы точно понимаете как у вас работает каждый useEffect, можно использовать "// eslint-disable-line react-hooks/exhaustive-deps" - чтобы заткруть варнинги.
Дима, спасибо) ReactJS загрузка изображения, shouldComponentUpdate fix
спасибо за урок о загрузке изображений в ReactJS!)
Летим !
Привет. Будь добр дай ссылку на свой git. Я поймал ошибку и затупил, не могу понять в чем дело.
react input file, курс отличный, спасибо! Супер мега респект тебе Дима!
Топ курс! Топ видос! Загрузка изображения React Redux!
библиотека classnames
двойное отриццание isOwner = (!!userId)
{ var file = e.target.files[0]; }} /> - реализация openFileDialog
для отправки фотки на сервер использовали обьект FormData, headers: { 'Content-Type' : 'multipart/form-data' }
Круто Спасибо!
React Redux
Урок 96. Пишу свой белорусский социально-экологический проект. Комент как благодарность (:
Просто кайф)) спасибо. Невероятный курс
Толи, что я refreshProfile сделал сначала стрелочной функцией, но после этого страничка как давай туда сюда от моего профайла на чужой прыгать по раза 4), кажется сайд эффект создался, зашел в статистику в личном кабинете, этим сайд эффектом по 400 запросов делалось(таким образом до 2к запросов за сутки вышло). Уже напугался, что система забанит, но после убрал стрелочную функцию и все нормально стало, но напугало то как))
И огромное спасибо за курс!
Лайк! Отличная информация, для тех кто хочет стилизовать кнопку загрузки ищите по запросу "Custom File Input Styling".
Привет, можешь скинуть сыллку нас вой git с этим проектом буду очень благодарен
я так давно ждал этот урок, когда можно будет обновить фотку)
время 23 12 завтра выпускной в 9 утра, бомбим до 100 выпуска!
Спасибо за респект для девчат)))) Каждое видео хоть раз рассмеюсь от твоих высказываний!!!
здорово.Спасибо огромное.Учить кого то это талант..я как начинаю кому то что то обьяснять убить готов через 5 минут...2 дня мучился этим вопросом пока фотку прикрутил...теперь увижу как правильно..))) Димыч было бы еще неплохо на серваке завести бота друга с которым парой писем можно было бы обменяться а то пытаюсь диалоги прикрутить не ок догадываться по пустым запросам и респонсам работает нормально или нет..))
В процессе! Мои студенты между собой договариваются, и то проблемно ! Спасибо за пинок!
Ух, переписал ProfileContainer в функциональную компоненту и заменил componentDidMount и didUpdate на хук useEffect 🥳
Можно Ваш код?
@@user-gm9fm7rz8b привет! Скорей всего он тебе мало что скажет. Я уже сам переписал большинство компонент, используя хуки
const Profile = (props) => {
const profile = useSelector(state => state.profilePage.profile)
const status = useSelector(state => state.profilePage.status)
const dispatch = useDispatch()
const getUserProfileF = (user) => {dispatch(getUserProfile(user))}
const getStatusF = (user) => {dispatch(getStatus(user))}
const updateStatusF = (status) => {dispatch(updateStatus(status))}
const savePhotoF = (file) => {dispatch(savePhoto(file))}
// Check is any user id in URL. If not, push my profile
let { userId } = useParams()
useEffect(() => {
let user = !!userId
? userId
: 22856;
getUserProfileF(user);
getStatusF(user);
}, [userId]);
return (
);
};
export default Profile;
ReactJS загрузка изображения, shouldComponentUpdate fix
Когда ещё начинал учить JS в каких-то видеоуроках говорилось, что оставлять комментарии в коде это признак хорошего тона у программистов. В принципе, так оно и есть, потому что иногда даже хорошо написанный чужой код бывает читать и понимать очень сложно
В конце от души посмеялся))
То чувство когда нашел и исправил ошибку раньше Димыча)) но всё равно это заслуга Димыча потому что он привил этот скилл. Спасибо!)
Решил проверить сколько же человек дошли до 96 ролика, спарсил всех пользователей, их количество на 10.11.2022 составляет 21664 зарегистрированных, из них сделал фильтрацию сколько из них имеют фотку photos: {small, large}, в итоге получилось 5390, ну грубо говоря 25% от общего количества, можно еще сравнить с просмотрами, но думаю это будет не корректно так как многие пересматривали одно и тоже видео по несколько раз, так что как то так)
Скоро и я +1
Привет. Будь добр дай ссылку на свой git. Я поймал ошибку и затупил, не могу понять в чем дело.
Когда в чатике пять раз в неделю пишешь людям response.data.data.items ;)
Но Димыч безусловно красава!
:)))) Спасибо, Игорь, что помогаешь другим ✊🤝
всё отлично, спасибо )) Всё получилось, но пришлось тоже искать много всяких пробелов и опечаток. Жду момента, когда соображалка сама начнёт работать, как у истинного прогера
Димыч Спасибо! за твои труды!!
input type file оборачивается label и label стилизуется, а input прячется =)
Эх скоро уже победа, сотый видеоурок по реакту. Всем Удачи и Деньжат в придачу!
React JS #multipart/form-data ありがとうございました。
Спасибо!!!
P.S. Список ключевых слов: React, Redux, лучшие супер курсы, бесплатно,
загрузка изображения на сервер
Димыч дает пуську, и ровно в этот момент наступает полночь:)
Эх осталось совсем немного и путь самурая 2.0 )) Там Музыка в начале вообще крутая кайфую ))
А я баг через Хук убрал. Делал ProfileContainer функциональной компонентой с хуком UseEffect вместо DidMount и в зависимости UseEffect занес userID. Все работает.
Увидел Димыча - поставил лайк!!
Cпасибо! загрузка изображения, componentComponentUpdate
Привет. Будь добр дай ссылку на свой git. Я поймал ошибку и затупил, не могу понять в чем дело.
Девчата херачят дальше и больше:))
Интересно, ты имела ввиду какие-то физиологические особенности?)))
Димыч, как всегда крутой урок - спасибо
Круто, ещё больше теперь знаем!)
В этом ролике много чего прояснилось. В том числе ещё больше дошло на сколько thunk удобен)
Оч крутой выпуск ! Большое спасибо !
Спасибо ! Если кто-то хочет от Димыча урок по алгоритмам ставте лайк!
ReactJS, shouldComponentUpdate, image uploading Cпа-си-бо!!
Димыч уже голый, лежа на диване видео пишет ))))))
ой, как я кайфую!!!
Моя лень немного подрасстроилась, из-за того что после этого курса у меня еще будет много работы по приведению соц сети в порядок. К примеру нужно будет добавить возможность добавления фото при логанизации для новых пользователей, заполнение информации о себе, возможность создавать свои посты, да и косметически нужно все сделать красиво, без сине-желто-зеленых квадратов.
Спасибо Димычь. Продолжаем бомбить! Добавили изображения. React Redux, shouldComponentUpdat
Крутой видеоурок! Лайк и респект от меня.)) Кнопкочку я сделаю.))
ахахха, а мне понравилась твоя пуська🤣🤣это была мужская, дружеская пуська, так шо допустимо🤗🤗бомбим!) 08 03 2022, всех девушек кто будет смотреть, с 8 марта!!)) чуть-чуть осталось, соберите раму свою и вперёд
Немного помучался с серверной частью. Ее я тоже пишу сам, чтобы набираться опыта. Выбесило, что я не нашел варианта как в PHP считать formData, посылаемую через PUT запрос -> у меня работает только с POST. В целом норм вроде (для новичков). Жаль, что не делали отслеживание статуса загрузки (бегущие % какие-нить) - я в своей версии просто крутилку повесил на момент обработки.
Так же, конечно же, если пользователь поставит грузиться новую аватарку и при этом сервер все проделает не мгновенно, а с задержкой, то уйдя на чужой аккаунт - по окончании загрузки своей аватарки - пользователь увидит, как на чужом аккаунте сменится аватарка на ту, которую он загружал для себя ... что может его очень запутать )))
Спасибо, не знаю увидите мой коммент или нет, но респектую