Input file para upload de imagens com preview (HTML, CSS e JavaScript)

[@xenxem]

Otávio Miranda um dos grandes devs. Semprre trazendo assuntos que têm utilidades no dia a dia de um desenvolvedor.

[@marianasilva7689]

excelente salvou meu dia, procurei vários conteúdos mais nada tãoclaro quanto, maravilhoso.

[@jaelmaciel3899]

Muito boa a sua explicação, obrigado pela sua ajuda!!

[@alan1872]

Muito bom! Justamente o que eu preciso, ajudou bastante, conteúdo muito relevante.

[@gustavoprevelate4389]

Muito obrigado pela ajuda! estou responsável por fazer um projeto que vai utilizar Banco de dados, BackEnd e FrontEnd, estou na parte de FrontEnd e preciso criar uma aba para receber upload de fotos, depois criar uma outra aba que vai pegar aquelas fotos enviadas no site e mostrar em um carousel.

[@rafablum]

Gostei da aula e a forma de explicar a aula!! Bora lá 👊👊

😉🤟

[@wandersonricardo7116]

Nossa, fantástico, obrigado professor!

[@edilson4082]

Parabens...Muito bom o tutorial

[@estanislaupucuta931]

parabéns... muito bom o recurso

[@felipecastro2993]

Parabéns professor Otávio, mais uma excelente explicação, estou gostando muito do curso básico de js e typescript

Fico feliz em saber

[@indicatuweb8000]

Didática excelente. Parabéns!

[@pedrodossantosmacieljr8979]

excelente aula

Obrigado 🙏

[@javiervieira8274]

Incrível professor, obrigado.

Eu que agradeço =)

[@pchavesfilho]

Muito bom o recurso demonstrado. Gostaria de gravar as imagens numa tabela utilizando o campo Blob. Seria possível fazer um exemplo ??? Tenho um pouco de dúvidas ainda. Abraços. Parabéns pelo tutorial.

[@rafaelsoutodasilva2162]

Muito bom meu nobre!

[@carolinapinsdorf6372]

Excelente video!!!!

[@ronicarvalho3386]

bom de mais mesmo. tem aula sobre armazenar imagem numa pagina? tipo, voce fez pra aparecer, e armazenar elas numa pagina e permanecer e apagar? isso vale pra videos?

[@diegofagundes-es2mb]

Como faço pra mandar essa imagem que dei upload para um e-mail quando eu clicar no input de submit?

[@alisonsilva8390]

Adorei o video mano, tu é foda ! qual é o nome dessa font? onde baixo ela ?

[@MsCristinateixeira]

eu fiz um botão pra remover o que está no input type = file, alguém sabe o código pra remover o que está dentro do input?

[@brunomonteiro8889]

Otávio Miranda , que conteúdo top procurei varaios e não achava. o seu video salvou hehe , mano poderia fazer um video como adicionar uma embaixo da outra e poder fazer upload, tentei de todos jeitos aqui mais não vai

[@brunomonteiro8889]

até adiciona a embaixo, mais quando clina para adicionar a foto, ele nao tem nenhuma ação só a primeira

[@eliguto1]

Show de bola

[@oficinaphp4437]

Eu preciso enviar uma imagem que o usuário não vai selecionar, que ele vai copiar pelo ctrl c ou print sc, tenho que enviar essa imagem que esta em uma pasta temporaria do sistema operacional e enviar para o servidor. Tipo, o cara usa um outro sistema que ele clica e copia uma imagem e depois ele vai no input e aperta ctrl v para poder envia-la, igual ao whatsapp web. Você pode me dar um norte para eu fazer isso?

[@proandref]

Muito massa. E no caso de serem varias imagens como seria a manipulação ?

Mudaria um pouco o código, mas no input seria apenas adicionar o atributo multiple

[@marcelosennasenna]

e se eu quiser colocar um arquivo em pdf posso fazer dessa maneira tbm. ?

[@hugorodrigues8166]

Como que faço pra no lugar do codigo do JS eu colocar no TypeScript??

[@PedroReginatto-d4y]

Muito obrigado!!

[@gamebarbaruiva]

Boa tarde! Assisti um video aula sua, que por sinal foi é excelente que foi este Convertendo vídeos com Python + FFMPEG - Aula 34, quando faço o teste com o print ele executa da mesma forma que voce ensina, quando altero e dou o comando os.system(comando) aparece esteja mensagem 'A sintaxe do nome do ficheiro, do nome do diret�rio ou da etiqueta do volume � incorreta', ja estou uma semana tentando achar onde errei se poder me ajudar. valeu um abraço.

[@CLASSIUS100]

professor poderia gravar um video para carregar e ler arquivos .txt em javascript.

[@raphafratel]

tambem da pra fazer assim, usando o metedo URL.createObjectURL que cria uma url temporaria let imageInput = document.getElementById("image-inputt") let imageShow = document.getElementById("image-show") imageInput.addEventListener('change', ()=>{ if (imageInput.files.length > 0) { imageShow.src = URL.createObjectURL(imageInput.files[0]) } })

[@luan_ferreira_]

Uma vez fiz um joguinho de memória e usei a tag pra virar as cartas e tau, só que n dava pra usar o :focus nas div ent vi num site que tinha que por um tabindex aí funcionou normalmente, na sua opinião esse é o mlr jeito? ou deveria usar outra elemento no lugar das div pra evitar o uso do tabindex e continuar usando :focus

[@fellipelorram4341]

Que cara bom!!

[@pichinel]

Show!

[@NOMOUSE]

Pensando numa aplicação prática como seria no caso de armazenar em SQLite3 uma descrição da imagem e fazer uma apresentação como um slide ...

[@jcseutoca]

Estudar rapaz kkkkkk

[@terrornaweb9739]

Muito bom!!!

[@FoxtronGamer]

tentei fazer mas nao funcionou

[@LucasCosta-uk3wz]

Cara, sei que faz uns 5 meses já, mas você deve ter digitado algo errado. Aqui deu certo.

[@FoxtronGamer]

@@LucasCosta-uk3wz já deu certo, fiz de outro modo 😌

[@junnior8003]

Fala professo tudo bem? desistiu do backend ?

Nunca!!! Na verdade a parte do front-end vem justamente por conta do back-end.

[@junnior8003]

@ show de bola professor! muito grato! seus curso de js/ts na udemy me ajudaram muito a dar upgrade na minha carreira de dev backend

[@Gust17]

brigado pela aula, mais podia ser mais objetivo, colocou muita coisa no meio da explicação, ai fica meio dificil de entender

Opa, obrigado amigo. Vou melhorar =)

[@arthurcruvinel4230]

confuso pra porra em. Dava pra fazer em 5min com explicação melhor e mais simples

[@lucianoanisiogarcia9455]

Péssimo vídeo sem uma sequencia adequada para fazer as coisas