Загрузка файлов с фронтенда

แชร์
ฝัง
  • เผยแพร่เมื่อ 23 ธ.ค. 2024

ความคิดเห็น • 87

  • @ta_ivanova
    @ta_ivanova ปีที่แล้ว +6

    Не ожидала столько полезностей в одном видео! Спасибо от совсем начинающего фронтендера и, вероятно, от наставника, которого Вы избавили от некоторого количества дурацких вопросов!

  • @HeaDannn
    @HeaDannn 2 ปีที่แล้ว +8

    Редко коменты пишу, но ваш контент достоин высшей оценки. Без воды, в спокойном темпе и с объяснением кажого шага в нужной мере. Великолепно преподаете!

    • @-LKRN
      @-LKRN 6 หลายเดือนก่อน

      Без воды?)

  • @Олег130-н6п
    @Олег130-н6п ปีที่แล้ว +4

    Очень интересно, и полезно. Отдельное спасибо за позитив)

  • @ОксанаКовш-ъ8т
    @ОксанаКовш-ъ8т ปีที่แล้ว +1

    все лучи добра уже на подлете к вам! 💋💋💋 уже в который раз самую исчерпывающую инфу нахожу на этом замечательном канале!

  • @nikitamusic7073
    @nikitamusic7073 2 ปีที่แล้ว +3

    Михаил, вы не представляете, как часто когда у меня возникает вопрос, я обращаюсь к вашим роликом. Спасибо вам!) (Я Junior developer 11 мес. стаж)

  • @front-cat
    @front-cat ปีที่แล้ว

    Каждый раз натыкаюсь на твои ролики по разным темам, и они прям бальзам на стертые об клавиатуру пальцы

  • @VictorKorovin-s9q
    @VictorKorovin-s9q ปีที่แล้ว

    Огромное спасибо за крайне полезную инфу. На проекте столкнулся с задачей по загрузке файлов (правда проект на Angular), и очень помогло данное видео.

  • @АлексейСтепанов-к9о
    @АлексейСтепанов-к9о 2 ปีที่แล้ว +1

    Михаил, спасибо Вам за еще одно полезное видео! Доходчиво, понятно - высший класс!!!

  • @Pagegift
    @Pagegift ปีที่แล้ว

    Отличное видео!
    Объяснил, как по полочкам разложил!
    Спасибо!

  • @АлександрКозлов-л9р
    @АлександрКозлов-л9р 2 ปีที่แล้ว +12

    Ещё через тег label можно элегантно скрыть и стилизовать input

  • @oberoberus3807
    @oberoberus3807 2 ปีที่แล้ว

    Как раз то, что нужно! Спасибо большое!

  • @Vladimir-gf7es
    @Vladimir-gf7es 2 ปีที่แล้ว +10

    Свойство accept не запрещает пользователю выбирать другие типы файлов, он все еще имеет возможность выбрать "все файлы" и загрузить pdf, вместо указанного нами image/*. Поэтому требуется дополнительная проверка для такого случая

  • @ruslangaziev5032
    @ruslangaziev5032 2 ปีที่แล้ว

    Михаил, спасибо большое за отличное видео!!! Очень полезно как и все ваши видео и курсы!

  • @АлександрАртюхов-у6я
    @АлександрАртюхов-у6я 2 ปีที่แล้ว

    Как всегда на высшем уровне. Спасибо!

  • @ЛусінеАтаджанян
    @ЛусінеАтаджанян 2 ปีที่แล้ว

    Огромное вам спасибо, Михаил! Видео, как всегда, на высочайшем уровне!

  • @olehy5000
    @olehy5000 2 ปีที่แล้ว

    О! Супер! Спасибо! Как всегда полезно!

  • @Г.Ка
    @Г.Ка 2 ปีที่แล้ว

    Отличный контент. Спасибо за труд, жду новых видео

  • @tuku_mann
    @tuku_mann 2 ปีที่แล้ว

    Отличный урок, спасибо!

  • @tema_skakun
    @tema_skakun ปีที่แล้ว

    спасибо за разбор, полезно)
    в интернетах пишут, что fetch немного устарел.
    я реализовал с помощью библиотеки axios.
    привет всем самураям)

  • @mars_family
    @mars_family 2 ปีที่แล้ว +5

    Круто! Спасибо большое
    пс: жду курс тайпскрипт с реактом

  • @MasterHobbitLoL
    @MasterHobbitLoL 2 ปีที่แล้ว +31

    Михаил, как всегда отличное видео, но, если не сложно, прикладывайте пожалуйста исходный код в описании.

    • @ivanselyt
      @ivanselyt ปีที่แล้ว

      ему плевать на это

  • @OliaYarukhina
    @OliaYarukhina ปีที่แล้ว

    Super cool! Thank you so much!

  • @ЕвгенийКутовой-й6ы
    @ЕвгенийКутовой-й6ы 2 ปีที่แล้ว

    Большое спасибо! понятно и просто

  • @giorgikiladze1151
    @giorgikiladze1151 ปีที่แล้ว

    круто как раз для проекта нужно было

  • @mikhail_shokun
    @mikhail_shokun 2 ปีที่แล้ว +2

    Красавчик Мишаня
    Первый.

  • @zzzzüp
    @zzzzüp 2 ปีที่แล้ว

    Круто, спасибо!

  • @me29_hi8
    @me29_hi8 ปีที่แล้ว

    Полезное видео

  • @chessclub92
    @chessclub92 ปีที่แล้ว

    спасибо большое Михаил у меня вопрос, а как после сохранения path-а в бд клиент с помощю этого path-а может на экране показать эту картинку ???

  • @vovergg
    @vovergg 2 ปีที่แล้ว

    Тема интересная.)

  • @CREEXEY
    @CREEXEY 2 ปีที่แล้ว +1

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

  • @stasbudin3178
    @stasbudin3178 2 ปีที่แล้ว +1

    Всем привет, пробую повторить код, но в req.files получаю undefined, долго не могу понять в чем причина

  • @weynemeynen
    @weynemeynen 2 ปีที่แล้ว +1

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

  • @baileysli6235
    @baileysli6235 2 ปีที่แล้ว

    8:45 Зачем `useRef`? Это поведение решается обычным `` намного проще

  • @Nikitosss91
    @Nikitosss91 2 ปีที่แล้ว

    Как всегда топич.

  • @sergeysharapov5945
    @sergeysharapov5945 2 ปีที่แล้ว +2

    Михаил подскажи пожалуйста, как сделать прогресс бар при загрузке файла ?

    • @mishanep
      @mishanep  2 ปีที่แล้ว +4

      Посмотрите в сторону библиотеки axios. У нее есть встроенные хэндлеры onUploadProgress и onDownloadProgress, которые помогут реализовать прогресс бар.

  • @etemax
    @etemax ปีที่แล้ว

    почему нельзя скрывать инпут тайп дата через display: none; ? все отлично работает)

  • @IT-Svyatoslav
    @IT-Svyatoslav 2 ปีที่แล้ว

    Благодарю Михаил!
    Как раз.на проектае необходимо это реализовать

  • @onetwoplay5226
    @onetwoplay5226 2 ปีที่แล้ว

    Михаил обЪясни пожалуйста почему две папки node modules, и какие зависимости в той, где public

  • @romantrutnev9467
    @romantrutnev9467 2 ปีที่แล้ว

    Почему-то не работает метод mv, есть ли какие-то альтернативы для него

  • @rasul3d
    @rasul3d 2 ปีที่แล้ว

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

    • @mishanep
      @mishanep  2 ปีที่แล้ว

      Для этих целей плагинов не ставил. Может это особенность темы. Использую codesandbox.

  • @romanmed9035
    @romanmed9035 2 ปีที่แล้ว

    very good about uploading file to server

  • @amanibraev9862
    @amanibraev9862 5 หลายเดือนก่อน

    У меня formData.append("image", selectImage) возвращает пустой объект, но файл был выбран

    • @mishanep
      @mishanep  5 หลายเดือนก่อน

      FormData - хитрый объект. Он просто так данные не показывает. У него есть метод entries, который можно вызвать в Object.fromEntries чтобы посмотреть содержимое.

  • @lionstar3189
    @lionstar3189 2 ปีที่แล้ว

    .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1x;
    margin: -1px;
    border: 0;
    padding: 0;
    clip-path: inset(100%);
    clip: rect(0 0 0 0);
    background: transparent;
    overflow: hidden;
    }
    Я лично такие стили юзаю, если что то надо скрыть. Пользуйтесь. 1px, это для того что бы скрин ридеры могли видеть.

  • @ilaymorozoff4113
    @ilaymorozoff4113 2 ปีที่แล้ว

    Топ контент!)

  • @grandorf5967
    @grandorf5967 2 ปีที่แล้ว

    Загрузка файлов на сервер - очень полезный скилл!
    Но как быть, если у нас input file с атрибутом multiple, и пользователь, скажем, выбрал три файла в инпут, потом одумался и захотел удалить один?

    • @mishanep
      @mishanep  2 ปีที่แล้ว

      Сходу не отвечу, но думаю и это решаемо.

  • @ХусейнНаимов-ь6х
    @ХусейнНаимов-ь6х ปีที่แล้ว

    Привет а как загрузить папку с файлами?

    • @mishanep
      @mishanep  ปีที่แล้ว +1

      Не помню, чтобы была возможность загружать папку как таковую. Обыкновенно загружается архив с содержимым папки. Разве что Google Drive предлагает папку загружать, но не интересовался как именно они это делают.

  • @user-hj6pj1bw9p
    @user-hj6pj1bw9p 2 ปีที่แล้ว +2

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

    • @mishanep
      @mishanep  2 ปีที่แล้ว +2

      Спасибо) Приквелов прежде делать не приходилось. А вот спиноффы бывали =)

  • @CJIu3eHb
    @CJIu3eHb 2 ปีที่แล้ว +2

    Проще было бы label использовать вместо рефа.

    • @mishanep
      @mishanep  2 ปีที่แล้ว

      Что вы имеете в виду? Есть пример?

    • @ilyamartynov2743
      @ilyamartynov2743 2 ปีที่แล้ว

      @@mishanep Имеется ввиду обернуть кнопку и input file в тег label

    • @mishanep
      @mishanep  2 ปีที่แล้ว +2

      ​@@ilyamartynov2743 ​ и как это поможет отказаться от ref? Я привел общий пример, где вместо кнопки может быть любой элемент для клика. Если это просто текст, то тогда да, лейбл подошел бы отлично. Но было бы странно пытаться стилизовать лейбл под кнопку или оборачивать лейблом изображение или какой-то другой элемент, не являющийся формой.

    • @CJIu3eHb
      @CJIu3eHb 2 ปีที่แล้ว

      @@mishanep А, ну если как кнопку - то да, с рефом более js-way. Прошу простить, это уж я как-то слишком категорично топик-посте высказался. Хотя кнопку, наверное, тоже можно под label засунуть, но каких-то очевидных преимуществ уже нет: либо лишний тег, либо лишний js.

  • @FoodMaks
    @FoodMaks ปีที่แล้ว

    Привет, а можно код скачать?

    • @mishanep
      @mishanep  ปีที่แล้ว

      Не получится. Компьютер, на котором писалось видео давно отошел в мир иной, исходники не сохранились.

  • @sdsd-ec8rw
    @sdsd-ec8rw ปีที่แล้ว

    плохо что нет исходного кода

  • @РусланШарипов-п9о
    @РусланШарипов-п9о ปีที่แล้ว +1

    Михаил отличное видео! Только хотя бы на секунду показали весь код на back. Понятно, что можно найти в инете это все, но хотелось бы от вас увидеть, как вы это реализовали. У вас все-таки репутация!!!! Профессионала, а на просторах глобальной сети, кто во что горазд лепит... нету доверия((((((((((

  • @-LKRN
    @-LKRN 6 หลายเดือนก่อน +1

    Неплохо, но смотреть только на 2х

  • @СтепанРазин-к2н
    @СтепанРазин-к2н 2 ปีที่แล้ว +1

    Все супер, подробно и доходчиво, но...а толку от этого кода, если у нас нет собственно кода с файла server.js? то есть не имея этого "простенького" бекенда, мы куда будем слать запросы? если это не тема этого видео, было бы неплохо хотя бы ссылку на бэк скинуть

    • @aleksprimetv
      @aleksprimetv 2 ปีที่แล้ว

      есть для этого специально общедоступные сервера, для тестирования любых запросов, где и ошибки и 200 код можно получать, так что гугл в помощь.

  • @paveldpv91
    @paveldpv91 2 ปีที่แล้ว

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

    • @mishanep
      @mishanep  2 ปีที่แล้ว +1

      Отличный вопрос. Для кириллицы и пробелов в ссылках обычно на фронте используется encodeURI, на сервере соответственно decodeURI. В принципе можно применить тот же подход и здесь.
      Есть еще вариант создать собственный функционал транслитерации, который бы еще до отправки преобразовывал бы кириллицу в латиницу.

    • @paveldpv91
      @paveldpv91 2 ปีที่แล้ว

      @@mishanep спасибо)))

  • @erzhan225
    @erzhan225 2 ปีที่แล้ว

    комментарий в продвижение

  • @chikenmacnugget
    @chikenmacnugget ปีที่แล้ว

    приятный спикер, однако

  • @МохираАбдукаримова-ш9ц
    @МохираАбдукаримова-ш9ц ปีที่แล้ว +3

    повторила данный код. Не сработал 👎

  • @olenakunina1
    @olenakunina1 ปีที่แล้ว +1

    у кого то получилось реализовать загрузку файлов по вот этому видосу?

    • @mishanep
      @mishanep  ปีที่แล้ว

      Как грубо, однако. Если бы я получил такой комментарий на платном курсе, то еще бы понял. А когда делаешь бесплатный контент, то как-то уж совсем не заслужено.
      Я согласен, что без бэкенда видео, может, и не слишком полезно. Но, во-первых, у меня канал по фронтенду, и рассказывать людям как писать бэкенд я даже не начинал. В названии видео чётко фигурирует слово фронтенд. Во-вторых, я предполагаю, что если перед кем-то встала такая рабочая задача, то бэкенд написали коллеги. И если до реальных проектов пока далеко и не терпится попрактиковаться, то корректнее было бы попросить выложить копию бэкенда в открытый доступ, нежели демотивировать автора.
      Касаемо fetch, я не вполне понимаю про какое множество лет идет речь, учитывая относительную свежесть данного браузерного api. По моему опыту fetch используется на очень большом количестве проектов. Причем как на фронтенде, так и на бэкенде (с утилитами добавляющие аналогичный функционал для NodeJS). Более того, если бы я использовал условный ky вместо fetch, то было бы больше вопросов из серии "почему нельзя было сделать на fetch". Я стараюсь вводить в видео меньше сторонних инструментов.

    • @olenakunina1
      @olenakunina1 ปีที่แล้ว

      @@mishanep простите, не хотела вас лично обидеть, видео "не зашло", уже несколько месяцев пытаюсь написать загрузку файлов в свободное от работы время, но ни рабочего примера, ни видео, ни документации - ничего нет на такую казалось бы тривиальную задачу, просмотрела и прочитала и прописала уже километры - все бесполезно, уже на грани нервного истощения. Да вы делаете бесплатный контент, и да он довольно таки качественный, приятный голос, хорошо разжеван фронтенд здесь, но опять же к нему масса вопросов и опять же какие товарищи должны писать те несколько строчек бека не понятно и как вообще можно писать запросы не зная что там на сервере. По поводу "корректнее было бы попросить выложить копию бэкенда в открытый доступ, нежели демотивировать автора" - вас просили несколько человек в комментариях в разное время - все эти комментарии проигнорированы, за то на мой вы неожиданно ответили.

    • @mishanep
      @mishanep  ปีที่แล้ว

      Если мы работаем с NodeJS, то как правило используется библиотека multer. А дальше возможны варианты, в зависимости от того, где и как мы планируем хранить сами файлы. Мне в основном попадались сценарии, когда это внешний сервис хранения файлов, и нужна была доп зависимость, типа webDav, чтобы выгрузить файл и получить на него корректную ссылку.
      Базовую работу с multer можно подсмотреть у Бреда Треверси
      th-cam.com/video/9Qzmri1WaaE/w-d-xo.html
      Но видео староватое, там могут быть изменения в новых версиях, как самой ноды, так и multer.

    • @alexvav2161
      @alexvav2161 ปีที่แล้ว

      @@olenakunina1 поиском пользоваться надо = Облачное хранилище :))) там все есть

    • @olenakunina1
      @olenakunina1 ปีที่แล้ว

      @@mishanep спасибо за ссылки, еще раз извините. Я очень сильно уперлась в стену и таки запихнула данное решение себе в аппу, и даже загрузились файлы, добавила пару строк в бек енд файл, который таки удалось слизать из видео и даже удалось достучаться до тех файлов на сервере из основного приложения ( в моем случае сервер работает по другому адресу и находится в отдельном проекте нежели вся аппа, как я ни старалась не удалось мне их помирить в одной папке), вашими ссылками пока не пользовалась, посмотрю обязательно. Пока при попытке перевести файл с полем загрузки на TS оно мне сломало все приложение 😅🤣, выгребаю ошибки. Еще раз спасибо что поддержали и ответили

  • @poiu7185
    @poiu7185 2 ปีที่แล้ว

    Давайте про скачку файлов с фронтенда

  • @iGotton
    @iGotton 2 ปีที่แล้ว

    +

  • @ВадимАлекс-щ6ъ
    @ВадимАлекс-щ6ъ 2 ปีที่แล้ว

    тханк ю, тичер

  • @sergeykoshman8367
    @sergeykoshman8367 ปีที่แล้ว

    Смысл показывать код, который не работает и нет ссылки даже на github? :)

  • @itsnerf1026
    @itsnerf1026 2 ปีที่แล้ว

    привет ты снимаешь классные видео продолжай и не сдавайся у тебя всё получится
    я TQжe CниmAю крутой кoнтент
    бyдy рaд Bидeть тeбя в нашeй семeйkе

  • @Алексей-т2х8й
    @Алексей-т2х8й ปีที่แล้ว

    +