Loading repository data…
eldes / repository
Exemplo de front-end simples que abre um arquivo local e exibe suas informações, implementado em React/Next com TypeScript
A transparent discovery signal based on current public GitHub metadata.
This score does not audit code, security, maintainers, documentation quality, or suitability. Verify the repository and its current documentation before adoption.
Exemplo de front-end simples que abre um arquivo e exibe suas informações:
Esse exemplo foi criado usando React/Next com TypeScript, a partir do template do create-next-app.
$ npx creat-next-app
A tela dessa aplicação tem um botão "Abrir".
Ao ser clicado, uma caixa de seleção de arquivos se abre para então o usuário escolher um arquivo local do seu computador.
Ao ser selecionado um arquivo, as informações sobre ele são exibidas na tela.
Ao ser clicado o botão "Abrir", um elemento <input> do tipo file é criado dinamicamente pelo código JavaScript e adicionado no final do <body>.
const acceptList = [
'image/png',
'image/jpeg',
'application/zip',
'application/x-zip-compressed',
];
const fileInput = document.createElement('input');
fileInput.type = 'file';
fileInput.accept = acceptList.join(',');
fileInput.multiple = false;
fileInput.style.display = 'none';
document.body.append(fileInput);
Esse <input> pode ser acionado por meio da execução do seu método click() (que simula um clique no <input>).
fileInput.click();
Quando esse <input> for ativado e um arquivo for selecionado, um evento change é então lançado por esse componente.
Como resposta a esse evento, o arquivo selecionado será processado e logo depois o <input> é removido do <body>.
fileInput.addEventListener('change', function () {
// processa o arquivo
fileInput.remove();
}, false);
As informações desse arquivo selecionado, em forma de objeto da classe File, é adicionado à lista de arquivos do <input>: a propriedade files.
Como, nesse exemplo, estamos interessados apenas em um único arquivo, vamos acessar o primeiro elemento dessa lista (files[0]) e definir como valor de um state file.
const [file, setFile] = useState<File>();
//...
fileInput.addEventListener('change', function () {
//...
setFile(fileInput.files[0])
//...
fileInput.remove();
}, false);
A partir desse ponto, temos acesso às informações do arquivo selecionado:
file.namefile.typefile.sizePara conseguir o conteúdo do arquivo em formato Base64, pode ser usado um objeto da classe FileReader.
Para isso é chamado o método readAsDataURL(), passando o objeto File como parâmetro.
Ao ser carregado, o conteúdo poderá ser acessado pela propriedade result do objeto FileReader.
Nesse exemplo, esse result será gravado num state chamado base64.
const [base64, setBase64] = useState<string | ArrayBuffer | null>();
//...
const reader = new FileReader();
reader.addEventListener('load', function () {
setBase64(reader.result);
fileInput.remove();
}, false);
reader.readAsDataURL(this.files[0]);
Obrigado pela leitura e fique a vontade para entrar em contato para quaisquer dúvidas.
Criado em 19 de outubro de 2023. Última edição em 19 de outubro de 2023. Eldes (www.eldes.com)
Selected from shared topics, language and repository description—not editorial ratings.
adrianojcgit /
Exemplo simples de um sistema crud com front-end construído usando o React v19.1 com TypeScript e back-and com serviços API em NodeJS.
36/100 healthucaxa /
front end desenvolvido em angular de um sistema exemplo com um crud de categorias e produtos
31/100 healthflpzht /
Este repositório foi criado para estudos de Front-End. Aqui você encontrará exemplos básicos de HTML, CSS, JavaScript, React e TypeScript, além de dicas e materiais extras.
paulhenrique /
Exemplo de Projeto para iniciar desenvolvimento de aplicações utilizando o Storybook. Foi utilizado em um treinamento apresentado ao time do Chapter de front-end do CPQD em Janeiro de 2025.
30/100 health