Upload de imagens no Front End com ReactJS e Context API

Sempre queremos entregar a melhor experiência para nossa audiênciaa.

Para continuar com a leitura, certifique-se de cumprir os seguintes requisitos:

• Ter lido sobre upload de imagens no S3 da AWS com Node.js e estar com o Back End do projeto rodando em sua máquina;
• Conhecimento Básico em JavaScript e TypeScript;
• Conhecimento Básico de ReactJS – estado, props e Context API;
• Ter o Node.js e os gerenciadores de pacotes yarn ou npm instalados.

Essas são as etapas que vamos praticar hoje. Se você quiser, navegue pelo conteúdo. Olha só o que vai rolar nesse tutorial:

• Introdução
• Passo 1 - Criando o projeto e estruturando as pastas
• Passo 2 - Instalando as dependências do projeto
• Passo 3 - Estilizando a aplicação
• Passo 4 - Estilizando o componente pai — App.tsx
• Passo 5 - Criando o componente App.tsx — a raiz da aplicação React
• Passo 6 - Criando o serviço de requisições HTTP com Axios
• Passo 7 - Criando o componente de Upload
• Passo 8 - Criando a lógica do Upload
• Passo 9 - Criando o componente FileList
• Passo 10 - Criando a lógica do FileList
• Passo 11 - Criando o contexto que armazena o estado dos arquivos enviados
• Passo 12 - Executando o projeto
• Conclusão
• Desafio

Vamos implementar o sistema de upload de imagens no Front End com ReactJS utilizando o gerenciamento de estados com Context API.

Vamos refatorar o código que o Diego Fernandes fez nesse vídeo:

• Você pode conferir aqui o código completo do projeto feito no vídeo.

Na época foi utilizado React com Classes, passando funções e estados via props.

Desde então, nesses dois anos que passaram o o React evoluiu muito:

• React Hooks;
• Context API muito melhor e mais interessante de se trabalhar;
• Suporte ao TypeScript para tipagem e segurança no código;

Vamos refatorar usando essas funcionalidades mais modernas e amplamente utilizadas no mercado.

👨‍💻 Bora Codar

Vou adicionar os códigos e explicar passo a passo:

Passo 1 - Criando o projeto e estruturando as pastas

Crie o projeto com React usando create-react-app com TypeScript:

npx create-react-app upload-frontend-react-hooks --template typescript

Organize a estrutura de pastas, crie uma pasta src e dentro dela as pastas components, context, services e styles:

Estrutura de pastas do projeto

Passo 2 - Instalando as dependências do projeto

Seu arquivo package.json deve ter essas dependências, portanto, copie e cole as que estiverem faltando  no seu projeto e execute yarn install para instalar.

{ "name": "upload-frontend-react-hooks", "version": "0.1.0", "private": true, "dependencies": { "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^9.3.2", "@testing-library/user-event": "^7.1.2", "@types/jest": "^24.0.0", "@types/lodash": "^4.14.161", "@types/node": "^12.0.0", "@types/react": "^16.9.0", "@types/react-dom": "^16.9.0", "@types/react-dropzone": "^5.1.0", "@types/styled-components": "^5.1.3", "@types/uuid": "^8.3.0", "axios": "^0.20.0", "filesize": "^6.1.0", "react": "^16.13.1", "react-circular-progressbar": "^2.0.3", "react-dom": "^16.13.1", "react-dropzone": "^11.1.0", "react-icons": "^3.11.0", "react-scripts": "3.4.3", "styled-components": "^5.2.0", "typescript": "~3.7.2", "uuid": "^8.3.0" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": "react-app" }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] } }

package.json

Dependências:

As dependências que tem o prefixo: @types/ são as tipagens de cada biblioteca.

• axios = para fazer requisições HTTP ao servidor;
• filesize = mostrar de forma amigável o tamanho da imagem (2 MB, 4 GB, etc);
• react-circular-progressbar = faz animação do progresso de envio da imagem;
• react-dropzone = fica ouvindo o envio de imagens no front end;
• react-icons = ícones da aplicação;
• styled-components = auxilia na criação e estilização de componentes;
• uuid = gerador de IDs no formato UUID.

Essas são as bibliotecas externas necessárias para criar essa aplicação.

Para executar o projeto, na raiz do projeto: