File Storage

save files from a react native app introduction in this guide, you will learn how to store and retrieve files in your react native application using parse javascript sdk to manage back4app cloud storage in the parse world, we use the type parse file parse file to manage files after creating the parse file parse file , you will store it on the back4app cloud using the save() save() method you should always associate the file with another data object so you can retrieve this file path when querying the object if you do not associate, the file will be stored, but you will not find them on the cloud another important tip is to give a name to the file that has a file extension this extension lets parse figure out the file type and handle it accordingly we should also mention that each upload gets a unique identifier, so there’s no problem with uploading multiple files using the same name react native app’s most common use case is storing images in this guide, you will build a demo gallery app to store and display pictures the full sample code for the created app in this tutorial is here https //github com/templates back4app/react native demo gallery app feel free to follow along step by step or jump straight to the code playing images if you do not associate your file to a data object the file will become an orphan file and you wont be able to find it on back4app cloud goal to create a react native gallery app that uploads and displays images using parse javascript and back4app prerequisites to complete this tutorial, you will need complete the install parse sdk tutorial 1 installing dependencies working with files (i e , uploading photos) on react native apps is one of the most common features in this tutorial, you will build a simple gallery app that uploads and displays images once you have a react native project successfully connected with back4app https //www back4app com/docs/parse sdk/react native sdk , go to its root directory and install the following dependency cd startwithback4app \# to select images on devices yarn add react native image picker for ios, install pods cd ios && npx pod install note that auto linking is available for react native v0 60+ v0 60+ , but for information on installing react native image picker react native image picker older versions, check the official documentation here https //github com/react native image picker/react native image picker after installing, you will need to add the nsphotolibraryusagedescription nsphotolibraryusagedescription key to your info plist info plist for allowing the user to select image/video from photos on ios \<dict> //other keys \<key>nsphotolibraryusagedescription\</key> \<string>app name here would like access to your photo\</string> \</dict> on android no permissions are required to select photos for gallery 2 selecting an image from gallery next, you will build a component that wraps the ui and logic for selecting an image from the gallery and uploading it in your root directory, create a uploadingimage js uploadingimage js file with the following content 1 import react, {usestate} from 'react'; 2 import {view, button, image, stylesheet} from 'react native'; 3&#x9; 4 import {launchimagelibrary} from 'react native image picker'; 5 import parse from 'parse/react native js'; 6&#x9; 7 const uploadimage = () => { 8 const \[image, setimage] = usestate(null); 9&#x9; 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&#x9; 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&#x9; 37 {image && \<button title="upload" color="green" onpress={upload} />} 38 \</view> 39 ); 40&#x9; 41 }; 42&#x9; 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&#x9; 57 export default uploadimage; the above component renders a button which opens the image library when a user clicks the selected image along with an upload button as you can see, the upload upload method does not do anything next, you will implement its behavior and see how to actually upload images to back4app cloud 3 uploading an image back4app storage is built upon parse file parse file and lets you store any files such as documents, images, videos, music, and any other binary data parse file parse file is a utility class that parse javascript sdk provides to abstract the file storage process and make it easy for you therefore, to upload an image, you will only need to create a parse file parse file instance and then call the save method by doing this, parse will automatically do the rest for you you can read the full documentation about parse files here https //docs parseplatform org/js/guide/#files let’s do that in our upload upload function 1 async function upload() { 2 // 1 create a file 3 const {base64, filename} = image; 4 const parsefile = new parse file(filename, {base64}); 5&#x9; 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&#x9; 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 } in short, the above snippet creates and saves the selected image, and after the save completes, we associate it with a parse object parse object called gallery gallery now you need to import and use the uploadimage uploadimage component in your app js 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&#x9; 12 import uploadimage from ' /uploadimage'; 13&#x9; 14 const app = () => { 15 return ( 16 \<safeareaview style={styles container}> 17 \<uploadimage/> 18 \</safeareaview> 19 ) 20 }; 21&#x9; 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&#x9; 34 export default app; once you do that, you should be able to pick images from the gallery and successfully upload images hitting the upload button 4 displaying images we need to get the image’s url to retrieve the image’s contents and display it to our users next, you will build a component for querying images from our gallery gallery object and displaying them on a flatlist in your root directory, create a gallery js gallery js file with the following content 1 import react, {usestate, useeffect} from 'react'; 2 import {text, image, flatlist, stylesheet} from 'react native'; 3&#x9; 4 import parse from 'parse/react native js'; 5&#x9; 6 const gallery = () => { 7 const \[images, setimages] = usestate(\[]); 8&#x9; 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&#x9; 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&#x9; 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&#x9; 52 export default gallery; the above component uses the useeffect useeffect hook to query images uploaded to the gallery gallery object once it finishes rendering next, you will need to add the component to your app js app js 1 // other imports 2 import uploadimage from ' /uploadimage'; 3 import gallery from ' /gallery'; 4&#x9; 5 const app = () => { 6 return ( 7 \<safeareaview style={styles container}> 8 \<uploadimage/> 9 \<gallery/> 10 \</safeareaview> 11 ); 12 } when you run your app, you should be able to see the list of uploaded images like this 5 it’s done! at this point, you have uploaded your first image on back4app and displayed it in a react native application