Eliminar archivos en React Native con Parse y Cloud Code

eliminar archivos de una aplicación react native introducción en esta guía, aprenderás la mejor manera de eliminar archivos de la nube back4app en aplicaciones react native para gestionar archivos de aplicación en back4app, utilizamos la parse file parse file clase de utilidad puedes realizar operaciones de almacenamiento, recuperación y eliminación utilizando esta clase en la sección anterior, https //www back4app com/docs/js framework/react native files , cubrimos el almacenamiento y la recuperación de archivos creando una aplicación de galería de demostración en este punto, deberías estar consciente de que después de crear y guardar un parse file parse file , la mejor práctica es siempre asociarlo con otro objeto de datos esto evitará la creación de archivos huérfanos en tu proyecto y te permitirá encontrarlos y eliminarlos en la nube de back4app parse file parse file proporciona una forma de eliminar archivos, pero es una operación sensible a la seguridad que no deberías realizar del lado del cliente en este tutorial, aprenderás la mejor práctica para eliminar los archivos de tu aplicación objetivo agregar acción de eliminar imagen a una aplicación de galería de demostración de react native requisitos previos para completar este tutorial, necesitarás completar el https //app archbee com/docs/ roxiyumxobue9i7uv49e/nijiqgqoc93tzrlydmcbi tutorial parse >= 4 2 0 1 configuración de la aplicación en la sección anterior, https //www back4app com/docs/js framework/react native files , construimos una aplicación de galería de demostración para subir y mostrar fotos de usuarios para este tutorial, incrementarás esta aplicación agregando un botón de eliminar a cada elemento de imagen en el gallery js gallery js componente y realizando nuestra operación de eliminación si ya terminaste de codificar la aplicación de galería de demostración, puedes saltar al siguiente paso alternativamente, puedes clonar la base de código de la aplicación para seguir este tutorial para clonar el proyecto ejecuta git clone https //github com/templates back4app/react native demo gallery app git clone https //github com/templates back4app/react native demo gallery app luego, instala las dependencias del proyecto 1 cd react native demo gallery app 2 3 # usando yarn 4 yarn install 5 6 # usando npm 7 npm install antes de ejecutar, recuerda configurar tus credenciales de back4app, id de la app id de la app y javascriptkey javascriptkey , en el método de inicialización método de inicialización para información sobre la configuración de credenciales de la app, consulta https //www back4app com/docs/js framework/react native cli finalmente, ejecuta la aplicación de react native 1 # para android 2 npx react native run android 3 4 # para ios 5 npx react native run ios 2 creando un botón de eliminar en la aplicación de galería, el gallery js gallery js componente renderiza la lista de imágenes de tu proyecto en la nube de back4app a continuación, crearás y agregarás un botón a cada elemento de imagen en la lista actual abre el gallery js gallery js archivo y agrega el siguiente contenido 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; hemos refactorizado la función renderitem, incluyendo un botón de eliminar para todas las imágenes renderizadas sin embargo, el evento de clic del botón aún no tiene funcionalidad implementada lo harás en el siguiente paso 3 creando una función en la nube para eliminar imágenes has aprendido que un archivo siempre debe estar asociado con un objeto de datos en el https //www back4app com/docs/js framework/react native files no asociar archivos a objetos de datos resultará en archivos huérfanos esos archivos son inaccesibles dentro de tu aplicación una vez que no puedes encontrarlos, tampoco puedes eliminarlos de tu aplicación solo puedes borrarlos utilizando la opción de purge files en el panel de control de back4app el proceso de eliminación consiste en encontrar y luego eliminarlo en parse, el destroy destroy se utiliza para eliminar archivos referenciados sin embargo, usarlo en el lado del cliente no es seguro ya que requiere el masterkey masterkey cuando construyes una aplicación de react native, todas tus claves están empaquetadas juntas, por lo tanto, cualquiera podría hacer ingeniería inversa, descompilar tu aplicación o proxy tu tráfico de red desde su dispositivo para encontrar tu masterkey masterkey usar la clave maestra te permite eludir todos los mecanismos de seguridad de tu aplicación, como https //docs parseplatform org/js/guide/#class level permissions y https //docs parseplatform org/js/guide/#object level access control puedes encontrar más detalles sobre las mejores prácticas de seguridad de parse https //blog back4app com/parse server security/ la mejor manera de eliminar archivos es hacerlo en el lado del servidor utilizando una https //www back4app com/docs/get started/cloud functions en nuestra aplicación de galería, crearemos una función de código en la nube para eso creemos un main js main js archivo con la siguiente función en la nube 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 }); para simplificar, utilizaremos el panel de control para cargar funciones en la nube directamente abre tu app panel de control panel de control en https //www back4app com/ y haz clic en core core , luego funciones de código en la nube funciones de código en la nube sube el main js main js archivo en la raíz de la carpeta cloud/ carpeta cloud/ despliega la función en el servidor de back4app después de unos segundos, tu función de código en la nube estará disponible para ser llamada a través de rest o parse sdk 4 llamando a la función de eliminación en la nube desde tu aplicación una vez que hayas implementado con éxito tu función de código en la nube de back4app, procede a implementar la acción para cuando los usuarios presionen el botón de eliminar en nuestra aplicación de galería 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 ahora, cuando hagas clic en eliminar, tu aplicación activará deletegallerypicture deletegallerypicture la función en la nube que eliminará con éxito una imagen 5 purga de archivos en algunas situaciones, cuando has perdido el rastro de los archivos de tu aplicación, necesitas eliminar archivos desde tu panel de control esto suele ocurrir cuando creas los archivos huérfanos mencionados en este artículo para obtener información sobre cómo limpiar los archivos de tu aplicación intenta https //help back4app com/hc/en us/articles/360002327652 how to delete files completely o consulta https //www back4app com/docs/parse dashboard/app settings ¡hecho! en este punto, has implementado con éxito una función de código en la nube y has aprendido cómo eliminar una imagen en una aplicación de react native