‫Palestrante: Vamos agora permitir que os
‫usuários façam upload de suas fotos direto em nosso site.
‫E é isso que queremos.
‫Quando clicamos aqui, basicamente queremos abrir
‫uma nova janela para a qual
‫podemos selecionar uma nova imagem para fazer upload e, em seguida,
‫quando clicamos neste botão e
‫enviar um formulário, é claro, queremos fazer upload
‫dessa imagem em nosso back-end e atualizar o usuário , direito.
‫E assim, o primeiro passo para
‫fazer isso será adicionar um novo elemento de entrada ao nosso html.
‫Então, basicamente, para o nosso modelo de
‫pacote, que permitirá que o seletor de arquivo
‫seja aberto quando clicarmos aqui.
‫Então, vamos para nossas visualizações e
‫para a conta e, portanto, é neste formulário que agora
‫temos que adicionar essa entrada.
‫Então agora temos aquele link aqui que diz nova foto.
‫Mas é claro, não é um link que vamos usar.
‫Portanto, este foi realmente apenas um espaço reservado.
‫E então vamos nos livrar disso.
‫Então, o que precisamos é de uma entrada.
‫Desligue para digitar o arquivo.
‫Tudo bem, então antes, para o nome tivemos
‫uma entrada com o tipo de texto.
‫Também temos a entrada com o tipo
‫de e-mail e também há um especial para senha.
‫Portanto, insira a senha e os
‫arquivos, é claro que há uma para os arquivos.
‫Podemos então especificar que tipo de arquivo realmente aceitamos.
‫E podemos fazer algo assim.
‫Imagem e depois todos eles.
‫Então, basicamente, todos os formatos obtêm suas imagens, então
‫os que têm um tipo de mente começando
‫com imagem são aceitos aqui.
‫Agora, vamos também dar a isso aqui
‫um nome de classe para que apareça bem formatado em nossa página.
‫E esse é o nome da classe que tenho em meu css.
‫E agora também dando a ele um ID para que possamos
‫selecioná-lo em java script.
‫Adicione isso como foto e, finalmente, como os outros
‫campos, também damos um nome a ele.
‫Então, o nome da foto também.
‫E é claro que é foto porque esse é o
‫nome que temos em nosso documento do usuário
‫e também é o nome do campo que o multer está esperando.
‫Então, aqui está o upload e também especificamos um rótulo
‫para ele.
‫E definimos como quatro e, em
‫seguida, o ID do elemento de entrada, tudo bem.
‫Não tenho certeza se você
‫está familiarizado com a forma como isso funciona em
‫html, mas também não é muito importante.
‫Então, o que acontece é que, quando
‫clicamos neste rótulo aqui, ele realmente ativa o elemento
‫de entrada que tem o ID que
‫especificamos aqui no formulário.
‫E então, nesse caso, essa é a foto, tudo bem.
‫E na verdade é
‫esse rótulo aqui que fará com que o texto escolha a nova foto.
‫E então, quando clicarmos no rótulo,
‫ele ativará essa entrada
‫que, por sua vez, abrirá a janela
‫na qual podemos selecionar um arquivo.
‫E isso é tudo que precisamos fazer para as contribuições aqui.
‫Agora, como antes, existem duas maneiras possíveis de
‫enviar esses dados para o servidor.
‫Então, primeiro, sem a API, como fizemos em
‫uma aula anterior.
‫Já encontramos a ação que queremos realizar
‫e também o método.
‫E com isso os
‫dados são enviados diretamente para o servidor.
‫Agora, se quisermos enviar um
‫arquivo usando este método, precisaremos especificar
‫outra opção aqui.
‫E esse é o tipo enc.
‫Portanto, o tipo enc teria que ser dados de formulário com várias partes.
‫Então, dados de formulário de barra com várias partes, tudo bem.
‫E aqui novamente, temos esse nome com várias partes.
‫E assim como dissemos antes,
‫multi-part é sempre para enviar arquivos para o servidor.
‫E, novamente, precisamos do middleware multer para
‫lidar com esses dados de formulário com várias partes.
‫E, na verdade, o nome multer vem de várias partes.
‫Então mult, multer, ok.
‫De qualquer forma, se quiséssemos enviar os dados sem
‫uma API, sempre teríamos que especificar
‫este tipo de enc.
‫Caso contrário, o formulário simplesmente ignoraria o arquivo
‫e não o enviaria, certo.
‫Mas, como já sabemos, na
‫verdade estamos usando com a API, certo.
‫E então não precisamos especificar este
‫tipo de enc, mas teremos que fazer isso programaticamente.
‫E então vamos realmente fazer isso.
‫Então, vamos agora enviar nossos dados, incluindo,
‫é claro, a foto, fazendo uma
‫chamada de API, como fizemos na última seção.
‫E então precisamos abrir agora em nossa pasta pública e de
‫seus js, abrimos o índice. js.
‫E então é aqui para onde
‫enviamos os dados para serem atualizados no servidor.
‫Bem, não os estamos enviando
‫aqui, mas os estamos selecionando no formulário e
‫depois os passando para as configurações de atualização.
‫Tudo bem, mas agora lembra como eu
‫disse que precisávamos recriar programaticamente
‫os dados de um formulário com várias partes?
‫E então precisamos fazer assim.
‫Vamos chamá-lo de formulário e, em seguida, novos dados de formulário.
‫Tudo bem, e agora nesse
‫formulário, precisamos continuar acrescentando novos dados.
‫E basicamente um anexo para cada um dos
‫dados que queremos enviar.
‫Então, forma. acrescente e o primeiro é o nome.
‫Portanto, especificamos o nome aqui e, em seguida, o valor do nome.
‫E então é claro que é esse aqui.
‫Então, vamos pegá-lo, colá-lo aqui e duplicá-lo.
‫E o próximo é o e-mail, ok.
‫Então, vamos nos livrar dessa entrada nas configurações de atualização.
‫Em seguida, passamos o formulário, ok.
‫E ou uma chamada de texto usando
‫axios irá então realmente
‫reconhecer esta forma aqui como um
‫objeto e funcionará da mesma forma que antes, ok.
‫Portanto, aqui nas configurações de atualização,
‫onde passamos os dados,
‫que são passados aqui para a solicitação
‫do axios, não precisamos alterar nada.
‫Tudo bem, isso é equivalente ao que tínhamos
‫antes com nome e e-mail, mas agora é
‫claro, vamos adicionar também a foto, que é
‫a razão pela qual agora temos
‫que fazer assim.
‫Então, forma. acrescente novamente o nome que
‫queremos dar, claro, foto e
‫documento. getelementbyid
‫que também é foto, mas agora não é. valor, mas em vez
‫disso. arquivos, tudo bem.
‫E esses arquivos
‫estão realmente na matriz e, como
‫há apenas um, precisamos selecionar o
‫primeiro elemento na matriz e isso é zero.
‫Tudo bem, e vamos
‫realmente registrar este formulário no console apenas até darmos uma olhada rápida no
‫que este formulário realmente é.
‫Mas, em poucas palavras, como eu disse antes, basicamente
‫recriamos esses dados de formulário com várias partes.
‫E é por isso que é chamado de dados de formulário porque,
‫bem, esses dados de formulário também estão
‫aqui neste tipo de enc de várias partes, certo.
‫Então, eu acho que é o suficiente para
‫nós agora tentarmos fazer isso.
‫Então como falei, nas configurações de atualização,
‫não há nada que a gente precise
‫mudar e também o endpoint
‫update me onde estamos enviando essa ferramenta
‫de solicitação então essa também já está funcionando e pronta
‫para aceitar imagens e até mesmo redimensioná-las, certo.
‫E então vamos prosseguir e tentar isso.
‫E então vamos recarregar isso mais uma vez.
‫E então vamos ver, e de
‫fato agora obtemos nosso seletor de arquivos basicamente.
‫Esta janela onde agora podemos selecionar
‫o arquivo e o que
‫farei é basicamente colocar
‫de volta a imagem original que tínhamos desse usuário.
‫Então isso está no desktop,
‫natours, público, usuários de imagem, e era o usuário 11, então este.
‫E agora está carregado.
‫Abra, salve nas configurações e a atualização dos dados será bem-sucedida.
‫Agora isso não se reflete aqui imediatamente.
‫Nem aqui nem aqui,
‫mas deveria assim que carregarmos esta página.
‫E também poderíamos fazer isso
‫com java script, mas na verdade é muito trabalhoso.
‫Eu tentei fazer e
‫consegui, mas depois pensei que era
‫muito trabalhoso e não valia a pena implementá-lo aqui.
‫De qualquer forma, apenas para testar se realmente
‫funcionou, precisamos recarregar a página agora.
‫E assim foi.
‫Aqui está a nova imagem que acabamos de enviar.
‫Tão bom.
‫Vamos dar uma olhada na própria pasta.
‫Se está realmente lá, também, e
‫se foi transformado corretamente.
‫Então essa é uma imagem.
‫Vamos recarregar aqui.
‫E agora não tenho certeza de qual é.
‫Ah, exatamente.
‫Então, 500 vezes 500
‫e agora está completamente desfocado porque a imagem original era muito menor.
‫Mas deixa pra lá, isso não importa de jeito nenhum.
‫O que importa é que
‫agora podemos fazer upload de fotos direto deste formulário.
‫Eu quero que isso seja tudo
‫para dar uma olhada em nosso console aqui
‫nos dados do formulário que eu pensei que tínhamos registrado e não apareceu aqui
‫porque já recarregamos a página.
‫Mas de qualquer maneira, eu queria colocar a outra imagem de volta aqui.
‫Então, aquele que realmente carregamos antes, que é
‫dev-data, imagem e aarav.
‫Tudo bem, dados atualizados com sucesso.
‫Vamos rapidamente dar uma olhada em nossos dados de telefone aqui.
‫Ah, mas acho que não podemos realmente ver o que temos aqui.
‫Vamos ver.
‫Nah, não podemos realmente ver o que temos.
‫Ok, então eu nunca dei uma olhada nisso.
‫E pensei que talvez pudéssemos ver as informações, mas
‫deixa pra lá.
‫O que importa é que realmente funcionou.
‫Portanto, se recarregarmos agora, é claro que essa imagem
‫antiga está de volta.
‫Incrível, então, mais uma vez, este aplicativo está realmente começando
‫a parecer um trabalho cada vez mais real.