Deleting Files

delete files from a react native app introduction in this guide, you will learn the best way to delete files from back4app cloud in react native apps for managing application files in back4app, we use the parse file parse file utility class you can perform storing, retrieving, and deleting operations using this class in the previous section, https //www back4app com/docs/js framework/react native files , we covered storing and retrieving files by creating a demo gallery app at this point, you should be aware that after creating and saving a parse file parse file , the best practice is to always associate it with another data object it will prevent the creation of orphan files in your project and make it possible for you to find and delete them on back4app cloud parse file parse file provides a way of deleting files, but it is a security sensitive operation that you should not perform on client side in this tutorial, you will learn the best practice for removing your application files goal add delete image action to a react native gallery demo app prerequisites to complete this tutorial, you will need complete the https //app archbee com/docs/ roxiyumxobue9i7uv49e/nijiqgqoc93tzrlydmcbi tutorial parse >= 4 2 0 1 application setup in the previous section, https //www back4app com/docs/js framework/react native files , we built a demo gallery app to upload and display user pictures for this tutorial, you will increment this app by adding a delete button to each image item in the gallery js gallery js component and performing our delete operation if you already finished coding the demo gallery app then you can jump to the next step alternatively, you can clone the code base for the app to follow this tutorial along to clone the project run git clone https //github com/templates back4app/react native demo gallery app git clone https //github com/templates back4app/react native demo gallery app then, install project dependencies 1 cd react native demo gallery app 2 3 # using yarn 4 yarn install 5 6 # using npm 7 npm install before running, remember to setup your back4app credentials, app id app id and javascriptkey javascriptkey , on the initialize initialize method for information on app credentials setup see https //www back4app com/docs/js framework/react native cli finally, run the react native application 1 # for android 2 npx react native run android 3 4 # for ios 5 npx react native run ios 2 creating a delete button on the gallery app, the gallery js gallery js component renders the list of images from your back4app cloud project next, you will create and add a button to every image item in the current list open the gallery js gallery js file add the following content 1 import react, {usestate, useeffect} from 'react'; 2 import {text, view, image, flatlist, stylesheet, button, alert} from 'react native'; 3 import parse from 'parse/react native js'; 4&#x9; 5 const gallery = () => { 6 const \[images, setimages] = usestate(\[]); 7&#x9; 8 useeffect(() => { 9 const fetchimages = async () => { 10 let query = new parse query('gallery'); 11 const results = await query find(); 12 setimages(results); 13 }; 14&#x9; 15 fetchimages(); 16 }, \[]); 17&#x9; 18 async function ondeleteimage(image id) { 19 // todo implement this function 20 } 21&#x9; 22 return ( 23 \<flatlist 24 style={styles container} 25 contentcontainerstyle={styles listcontent} 26 data={images} 27 horizontal={false} 28 numcolumns={3} 29 listemptycomponent={() => \<text>no images uploaded \</text>} 30 renderitem={({item}) => ( 31 \<view> 32 \<image 33 source={ {uri item get('picture') url()} } 34 style={styles imageitem} 35 /> 36 \<button 37 title="delete" 38 color="red" 39 onpress={() => ondeleteimage(item id)} 40 /> 41 \</view> 42 )} 43 keyextractor={(item) => item id} 44 />); 45&#x9; 46 }; 47&#x9; 48 const styles = stylesheet create({ 49 container { 50 flex 1, 51 backgroundcolor '#f5f5f5', 52 }, 53 listcontent { 54 justifycontent 'center', 55 alignitems 'center', 56 }, 57 imageitem { 58 width 100, 59 height 100, 60 resizemode 'cover', 61 marginhorizontal 5, 62 marginvertical 5, 63 }, 64 }); 65 export default gallery; we have refactored the renderitem function, including a delete button to all rendered images however, the button click event still has no functionality implemented you will do it on the next step 3 creating a delete picture cloud function you’ve learned that a file should always be associated with a data object on the https //www back4app com/docs/js framework/react native files not associating files to data objects will result in orphan files those files are unreachable inside your app once you can’t find them, you also can’t delete them from your app you can only erase them using the purge files option on back4app dashboard the deleting process consists of finding and then deleting it in parse, the destroy destroy method is used to delete referenced files however, using it on client side is not safe as it requires the masterkey masterkey when you build a react native app, all your keys are bundled together, therefore, anyone could reverse engineer, decompile your app or proxy your network traffic from their device to find your masterkey masterkey using the master key allows you to bypass all of your app’s security mechanisms, such as https //docs parseplatform org/js/guide/#class level permissions and https //docs parseplatform org/js/guide/#object level access control you can find more details about parse security best practices https //blog back4app com/parse server security/ the best way to delete files is to do it on the server side using a https //www back4app com/docs/get started/cloud functions in our gallery app, we will create a cloud code function for that let’s create a main js main js file with the following cloud function 1 parse cloud define('deletegallerypicture', async (request) => { 2 const {image id} = request params; 3 const gallery = parse object extend('gallery'); 4 const query = new parse query(gallery); 5 try { 6 const image = await query get(image id); 7 const picture = image get('picture'); 8&#x9; 9 await picture destroy({usemasterkey true}); 10 await image destroy(); 11 return 'image removed '; 12 } catch (error) { 13 console log(error); 14 throw new error('error deleting image'); 15 } 16 }); for simplicity, we will use the dashboard to upload cloud functions directly open your app dashboard dashboard at https //www back4app com/ and click on core core , then cloud code functions cloud code functions upload main js main js file on the root of the cloud/ cloud/ folder deploy the function to back4app server after a few seconds your cloud code function will be available to be called via rest or parse sdk 4 calling delete cloud function from your app once you have successfully deployed your back4app cloud code function, go ahead and implement the action for when the users presses delete button in our gallery app 1 // triggers on hitting delete 2 async function ondeleteimage(image id) { 3 try { 4 const params = {image id}; 5 const result = await parse cloud run('deletegallerypicture', params); 6 alert alert(result); 7 } catch (error) { 8 console log('delete error ', error); 9 } 10 } 11 now when you click on delete, your app will trigger deletegallerypicture deletegallerypicture cloud function that will successfully delete an image 5 purging files in some situations, when you lost track of your application files you need to delete files from your dashboard this usually occurs when you create the orphan files mentioned in this article for information on how to clean up your application files try https //help back4app com/hc/en us/articles/360002327652 how to delete files completely or see https //www back4app com/docs/parse dashboard/app settings done! at this point, you have succefully deployed a cloud code function and learned how to delete an image in a react native application