Gestion des fichiers React Native avec Parse et Back4App

13 min

enregistrer des fichiers depuis une application react native introduction dans ce guide, vous apprendrez comment stocker et récupérer des fichiers dans votre application react native en utilisant le sdk javascript de parse pour gérer le stockage cloud de back4app dans le monde de parse, nous utilisons le type \parse file\ pour gérer les fichiers après avoir créé le \parse file\ , vous le stockerez sur le cloud back4app en utilisant la méthode \save()\ vous devez toujours associer le fichier à un autre objet de données afin de pouvoir récupérer ce chemin de fichier lors de la requête de l'objet si vous ne faites pas d'association, le fichier sera stocké, mais vous ne pourrez pas le retrouver sur le cloud un autre conseil important est de donner un nom au fichier qui a une extension de fichier cette extension permet à parse de déterminer le type de fichier et de le gérer en conséquence nous devrions également mentionner que chaque téléchargement obtient un identifiant unique, donc il n'y a pas de problème à télécharger plusieurs fichiers en utilisant le même nom le cas d'utilisation le plus courant d'une application react native est le stockage d'images dans ce guide, vous allez créer une application de galerie de démonstration pour stocker et afficher des images le code source complet de l'application créée dans ce tutoriel est ici https //github com/templates back4app/react native demo gallery app n'hésitez pas à suivre étape par étape ou à passer directement au code jouer des images si vous n'associez pas votre fichier à un objet de données, le fichier deviendra un fichier orphelin et vous ne pourrez pas le retrouver sur le cloud back4app objectif créer une application de galerie react native qui télécharge et affiche des images en utilisant parse javascript et back4app prérequis pour compléter ce tutoriel, vous aurez besoin de complétez le tutoriel d'installation du sdk parse https //www back4app com/docs/parse sdk/react native sdk 1 installer les dépendances travailler avec des fichiers (c'est à dire, télécharger des photos) sur des applications react native est l'une des fonctionnalités les plus courantes dans ce tutoriel, vous allez créer une simple application galerie qui télécharge et affiche des images une fois que vous avez un projet react native connecté avec succès à back4app https //www back4app com/docs/parse sdk/react native sdk , allez dans son répertoire racine et installez la dépendance suivante cd startwithback4app \# pour sélectionner des images sur les appareils yarn add react native image picker pour ios, installez les pods cd ios && npx pod install notez que le lien automatique est disponible pour react native \v0 60+\ , mais pour des informations sur l'installation des versions \plus anciennes de react native image picker\ , consultez la documentation officielle ici https //github com/react native image picker/react native image picker après l'installation, vous devrez ajouter la clé \nsphotolibraryusagedescription\ à votre \info plist\ pour permettre à l'utilisateur de sélectionner des images/vidéos à partir des photos sur ios \<dict> //other keys \<key>nsphotolibraryusagedescription\</key> \<string>app name here aimerait accéder à votre photo\</string> \</dict> sur android, aucune autorisation n'est requise pour sélectionner des photos pour la galerie 2 sélectionner une image dans la galerie ensuite, vous allez créer un composant qui enveloppe l'interface utilisateur et la logique pour sélectionner une image dans la galerie et la télécharger dans votre répertoire racine, créez un \uploadingimage js\ fichier avec le contenu suivant 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; le composant ci dessus rend un bouton qui ouvre la bibliothèque d'images lorsqu'un utilisateur clique l'image sélectionnée avec un bouton de téléchargement comme vous pouvez le voir, le \téléchargement\ ne fait rien ensuite, vous allez implémenter son comportement et voir comment télécharger réellement des images sur le cloud back4app 3 télécharger une image le stockage back4app est construit sur \parse file\ et vous permet de stocker n'importe quel fichier tel que des documents, des images, des vidéos, de la musique et toute autre donnée binaire \parse file\ est une classe utilitaire que le sdk javascript de parse fournit pour abstraire le processus de stockage de fichiers et le rendre facile pour vous par conséquent, pour télécharger une image, vous n'aurez besoin que de créer une \parse file\ instance et ensuite d'appeler la méthode save en faisant cela, parse fera automatiquement le reste pour vous vous pouvez lire la documentation complète sur les fichiers parse ici https //docs parseplatform org/js/guide/#files faisons cela dans notre \téléchargement\ fonction 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 } en bref, le snippet ci dessus crée et enregistre l'image sélectionnée, et après que l'enregistrement soit terminé, nous l'associons à un \parse object\ appelé \gallery\ maintenant, vous devez importer et utiliser le \uploadimage\ composant dans votre \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; une fois que vous avez fait cela, vous devriez pouvoir choisir des images dans la galerie et téléchargez avec succès des images en appuyant sur le bouton de téléchargement 4 affichage des images nous devons obtenir l'url de l'image pour récupérer le contenu de l'image et l'afficher à nos utilisateurs ensuite, vous allez créer un composant pour interroger les images de notre \galerie\ objet et les afficher sur un flatlist dans votre répertoire racine, créez un \gallery js\ fichier avec le contenu suivant 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; le composant ci dessus utilise le \useeffect\ hook pour interroger les images téléchargées dans le \galerie\ objet une fois qu'il a fini de rendre ensuite, vous devrez ajouter le composant à votre \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 } lorsque vous exécutez votre application, vous devriez être en mesure de voir la liste des images téléchargées comme ceci 5 c'est fait ! à ce stade, vous avez téléchargé votre première image sur back4app et l'avez affichée dans une application react native