Gerenciar Arquivos no React Native com Parse para Back4app

13 min

salvar arquivos de um aplicativo react native introdução neste guia, você aprenderá como armazenar e recuperar arquivos em sua aplicação react native usando o parse javascript sdk para gerenciar o armazenamento em nuvem do back4app no mundo do parse, usamos o tipo \parse file\ para gerenciar arquivos após criar o \parse file\ , você o armazenará na nuvem do back4app usando o \save()\ método você deve sempre associar o arquivo a outro objeto de dados para que possa recuperar esse caminho de arquivo ao consultar o objeto se você não associar, o arquivo será armazenado, mas você não conseguirá encontrá lo na nuvem outra dica importante é dar um nome ao arquivo que tenha uma extensão de arquivo essa extensão permite que o parse identifique o tipo de arquivo e o manipule adequadamente também devemos mencionar que cada upload recebe um identificador único, então não há problema em fazer upload de vários arquivos usando o mesmo nome o caso de uso mais comum do aplicativo react native é armazenar imagens neste guia, você construirá um aplicativo de galeria de demonstração para armazenar e exibir fotos o código completo do exemplo do aplicativo criado neste tutorial está aqui https //github com/templates back4app/react native demo gallery app sinta se à vontade para acompanhar passo a passo ou pular direto para o código exibindo imagens se você não associar seu arquivo a um objeto de dados, o arquivo se tornará um arquivo órfão e você não conseguirá encontrá lo na nuvem do back4app objetivo criar um aplicativo de galeria react native que faz upload e exibe imagens usando parse javascript e back4app pré requisitos para completar este tutorial, você precisará completar o tutorial de instalação do parse sdk https //www back4app com/docs/parse sdk/react native sdk 1 instalando dependências trabalhar com arquivos (ou seja, fazer upload de fotos) em aplicativos react native é uma das funcionalidades mais comuns neste tutorial, você irá construir um aplicativo de galeria simples que faz upload e exibe imagens uma vez que você tenha um projeto react native conectado com sucesso ao back4app https //www back4app com/docs/parse sdk/react native sdk , vá para o diretório raiz e instale a seguinte dependência cd startwithback4app \# para selecionar imagens em dispositivos yarn add react native image picker para ios, instale os pods cd ios && npx pod install observe que o auto linking está disponível para react native \v0 60+\ , mas para informações sobre a instalação de \react native image picker\ versões mais antigas, verifique a documentação oficial aqui https //github com/react native image picker/react native image picker após a instalação, você precisará adicionar a chave \nsphotolibraryusagedescription\ ao seu \info plist\ para permitir que o usuário selecione imagem/vídeo das fotos no ios \<dict> //outras chaves \<key>nsphotolibraryusagedescription\</key> \<string>app name here gostaria de acessar suas fotos\</string> \</dict> no android, nenhuma permissão é necessária para selecionar fotos para a galeria 2 selecionando uma imagem da galeria em seguida, você irá construir um componente que envolve a interface do usuário e a lógica para selecionar uma imagem da galeria e enviá la no seu diretório raiz, crie um \uploadingimage js\ arquivo com o seguinte conteúdo 1 import react, {usestate} from 'react'; 2 import {view, button, image, stylesheet} from 'react native'; 3	 4 import {launchimagelibrary} from 'react native image picker'; 5 import parse from 'parse/react native js'; 6	 7 const uploadimage = () => { 8 const \[image, setimage] = usestate(null); 9	 10 async function upload() { 11 // todo implement this method 12 } 13 // this will open phone image library 14 function pickimage() { 15 launchimagelibrary( 16 { 17 mediatype 'photo', 18 includebase64 true, 19 maxheight 200, 20 maxwidth 200, 21 }, 22 (response) => { 23 // add selected image to the state 24 setimage(response); 25 }, 26 ); 27 } 28	 29 return ( 30 \<view> 31 \<button 32 onpress={pickimage} 33 title="pick an image from gallery" 34 color="#841584" /> 35 {image && \<image source={ {uri image uri} } style={styles currentimage}/>} 36	 37 {image && \<button title="upload" color="green" onpress={upload} />} 38 \</view> 39 ); 40	 41 }; 42	 43 const styles = stylesheet create({ 44 container { 45 height 400, 46 justifycontent 'center', 47 alignitems 'center', 48 }, 49 currentimage { 50 width 250, 51 height 250, 52 resizemode 'cover', 53 alignself 'center', 54 }, 55 }); 56	 57 export default uploadimage; o componente acima renderiza um botão que abre a biblioteca de imagens quando um usuário clica a imagem selecionada junto com um botão de upload como você pode ver, o \upload\ método não faz nada em seguida, você implementará seu comportamento e verá como realmente fazer o upload de imagens para a nuvem back4app 3 fazendo o upload de uma imagem o armazenamento do back4app é construído sobre \parse file\ , e permite que você armazene qualquer arquivo, como documentos, imagens, vídeos, músicas e qualquer outro dado binário \parse file\ é uma classe utilitária que o sdk javascript do parse fornece para abstrair o processo de armazenamento de arquivos e facilitar para você portanto, para fazer o upload de uma imagem, você só precisará criar uma \parse file\ instância e, em seguida, chamar o método save ao fazer isso, o parse fará automaticamente o resto para você você pode ler a documentação completa sobre parse files aqui https //docs parseplatform org/js/guide/#files vamos fazer isso em nossa \upload\ função 1 async function upload() { 2 // 1 create a file 3 const {base64, filename} = image; 4 const parsefile = new parse file(filename, {base64}); 5	 6 // 2 save the file 7 try { 8 const responsefile = await parsefile save(); 9 const gallery = parse object extend('gallery'); 10 const gallery = new gallery(); 11 gallery set('picture', responsefile); 12	 13 await gallery save(); 14 alert alert('the file has been saved to back4app '); 15 } catch (error) { 16 console log( 17 'the file either could not be read, or could not be saved to back4app ', 18 ); 19 } 20 } em resumo, o trecho acima cria e salva a imagem selecionada, e após a conclusão do salvamento, associamos a ela um \parse object\ chamado \gallery\ agora você precisa importar e usar o \uploadimage\ componente no seu \app js\ 1 import react from 'react'; 2 import {safeareaview, stylesheet} from 'react native'; 3 // in a react native application 4 import parse from 'parse/react native js'; 5 import asyncstorage from '@react native community/async storage'; 6 import keys from ' /constants/keys'; 7 //before using the sdk 8 parse setasyncstorage(asyncstorage); 9 parse initialize(keys applicationid, keys javascriptkey); 10 parse serverurl = keys serverurl; 11	 12 import uploadimage from ' /uploadimage'; 13	 14 const app = () => { 15 return ( 16 \<safeareaview style={styles container}> 17 \<uploadimage/> 18 \</safeareaview> 19 ) 20 }; 21	 22 const styles = stylesheet create({ 23 container { 24 backgroundcolor '#f5f5f5', 25 flex 1, 26 }, 27 title { 28 fontsize 18, 29 textalign 'center', 30 fontweight 'bold', 31 }, 32 }); 33	 34 export default app; uma vez que você faça isso, você deve ser capaz de escolher imagens da galeria e faça o upload de imagens com sucesso clicando no botão de upload 4 exibindo imagens precisamos obter a url da imagem para recuperar o conteúdo da imagem e exibi la para nossos usuários em seguida, você irá construir um componente para consultar imagens do nosso \galeria\ e exibi las em um flatlist no seu diretório raiz, crie um \gallery js\ com o seguinte conteúdo 1 import react, {usestate, useeffect} from 'react'; 2 import {text, image, flatlist, stylesheet} from 'react native'; 3	 4 import parse from 'parse/react native js'; 5	 6 const gallery = () => { 7 const \[images, setimages] = usestate(\[]); 8	 9 useeffect(() => { 10 const fetchimages = async () => { 11 let query = new parse query('gallery'); 12 const results = await query find(); 13 setimages(results); 14 }; 15 16 fetchimages(); 17 }, \[]); 18	 19 return ( 20 \<flatlist 21 style={styles container} 22 contentcontainerstyle={styles listcontent} 23 data={images} 24 horizontal={false} 25 numcolumns={3} 26 listemptycomponent={() => \<text>no images uploaded \</text>} 27 renderitem={({item}) => 28 \<image source={ {uri item get('picture') url()} } style={styles imageitem}/> 29 )} 30 keyextractor={(item) => item id} 31 />); 32 }; 33	 34 const styles = stylesheet create({ 35 container { 36 flex 1, 37 backgroundcolor '#f5f5f5', 38 }, 39 listcontent { 40 justifycontent 'center', 41 alignitems 'center', 42 }, 43 imageitem { 44 width 100, 45 height 100, 46 resizemode 'cover', 47 marginhorizontal 5, 48 marginvertical 5, 49 }, 50 }); 51	 52 export default gallery; o componente acima usa o \useeffect\ hook para consultar as imagens carregadas no \galeria\ object assim que terminar de renderizar em seguida, você precisará adicionar o componente ao seu \app js\ 1 // other imports 2 import uploadimage from ' /uploadimage'; 3 import gallery from ' /gallery'; 4	 5 const app = () => { 6 return ( 7 \<safeareaview style={styles container}> 8 \<uploadimage/> 9 \<gallery/> 10 \</safeareaview> 11 ); 12 } quando você executar seu app, deverá ser capaz de ver a lista de imagens carregadas assim 5 está pronto! neste ponto, você carregou sua primeira imagem no back4app e a exibiu em um aplicativo react native