[Dúvida] Como fazer upload de imagem por input

Olá, Samuel!

Para fazer o upload de imagens do próprio computador via input em um projeto React, você precisará de um componente que permita ao usuário selecionar um arquivo e, em seguida, exibir esse arquivo no card de colaborador que você está desenvolvendo.

Primeiro, você precisará de um input do tipo file no seu componente. O código abaixo, precisa de ajuste mas é norte para ti:

import React, { useState } from 'react';

const Colaborador = () => {
  const [imagem, setImagem] = useState('');

  const handleImageChange = (e) => {
    const file = e.target.files[0];
    const reader = new FileReader();
    reader.onloadend = () => {
      setImagem(reader.result);
    };
    reader.readAsDataURL(file);
  };

  return (
    <div className='colaborador'>
      <div className='cabecalho'>
        <input type="file" onChange={handleImageChange} />
        <img src={imagem} alt='Foto do Colaborador' />
      </div>
      <div className='rodape'>
        <h4>Nome do Colaborador</h4>
        <h5>Cargo do Colaborador</h5>
      </div>
    </div>
  );
};

export default Colaborador;

Neste exemplo, criamos um estado imagem para armazenar a imagem carregada. O handleImageChange é um manipulador de eventos que é chamado quando um arquivo é selecionado. Ele lê o arquivo como uma URL de dados usando FileReader, e uma vez que o arquivo é carregado, ele atualiza o estado imagem com o resultado, que é usado como o src para a tag <img>.

Reforço que em casos de dúvidas, conte sempre com o fórum da comunidade Alura! Bons estudos!

Sucesso ✨

Um grande abraço e até mais!