Subir y mostrar archivos en Flutter con Parse y Back4App

13min
Guardar archivos de una aplicación Flutter
Introducción
A veces las aplicaciones necesitan almacenar datos que a menudo son demasiado grandes para ser almacenados dentro de un ParseObject. El caso de uso más común es almacenar imágenes, pero también puedes usarlo para documentos, videos, música y otros datos binarios.
Para almacenar un archivo en Parse, siempre debes asociar el archivo con otro objeto de datos para que puedas recuperar esta ruta de archivo al consultar el objeto. Si no asocias, el archivo se almacenará, pero no podrás encontrarlo en la nube.
Otro consejo importante es darle un nombre al archivo que tenga una extensión de archivo. Esta extensión permite a Parse determinar el tipo de archivo y manejarlo en consecuencia. También debemos mencionar que cada carga recibe un identificador único, por lo que no hay problema en cargar múltiples archivos usando el mismo nombre.
En Flutter, ParseFile y ParseWebFile te permiten almacenar y recuperar archivos de aplicación en la nube. Esta guía explica cómo almacenar y recuperar archivos en tu aplicación Flutter para gestionar el almacenamiento en la nube de Back4app.
Si no asocias tu archivo a un objeto de datos, el archivo se convertirá en un archivo huérfano y no podrás encontrarlo en Back4App Cloud.
﻿
Requisitos previos
Una aplicación creada en Back4App:
Nota: Sigue el Tutorial de Nueva Aplicación Parse para aprender a crear una Aplicación Parse en Back4App.
Una aplicación Flutter conectada a Back4app.
Nota: Sigue el Instalar Parse SDK en el proyecto Flutter para crear un Proyecto Flutter conectado a Back4App.
Un dispositivo (o dispositivo virtual) que ejecute Android o iOS.
Para ejecutar este ejemplo de guía, debes configurar el plugin image_picker correctamente. No olvides agregar permisos para iOS para acceder a las imágenes almacenadas en el dispositivo. {: .btn target=”_blank” rel=”nofollow”}. Lee cuidadosamente las instrucciones para configurar el proyecto de Android e iOS.
Objetivo
Crea una Aplicación de Galería Flutter que suba y muestre imágenes desde Back4app.
- Entendiendo la clase ParseFile y ParseWebFile
Hay tres clases de archivos diferentes en este SDK de Parse para Flutter
﻿ParseFileBase es una clase abstracta, la base de cada clase de archivo que este SDK puede manejar.
﻿ParseFile extiende ParseFileBase y se utiliza por defecto como la clase de archivo en cada plataforma (no válido para web). Esta clase utiliza un File de dart:io para almacenar el archivo en bruto.
﻿ParseWebFile es el equivalente a ParseFile utilizado en Flutter Web. Esta clase utiliza un Uint8List para almacenar el archivo en bruto.
Los métodos disponibles en ParseFileBase para manipular archivos:
﻿save() o upload() para guardar el archivo en la nube
﻿download() para recuperar el archivo y almacenarlo en el almacenamiento local
Hay propiedades para obtener información del archivo guardado:
﻿url: Obtiene la URL del archivo. Solo está disponible después de guardar el archivo o después de obtener el archivo de un Parse.Object.
﻿name: Obtiene el nombre del archivo. Este es el nombre de archivo dado por el usuario antes de llamar al save() método. Después de llamar al método, la propiedad recibe un identificador único.
- Subiendo una Imagen
Para subir una imagen, solo necesitarás crear una ParseFileBase instancia y luego llamar al save método.
Hagamos eso en nuestra upload función:
JS
       ParseFileBase? parseFile;
2
       if (kIsWeb) {
         //Flutter Web
         parseFile = ParseWebFile(
             await pickedFile!.readAsBytes(),
             name: 'image.jpg'); //Name for file is required
       } else {
         //Flutter Mobile/Desktop
        parseFile = ParseFile(File(pickedFile!.path));
      }
      await parseFile.save();
       ParseFileBase? parseFile;
2
       if (kIsWeb) {
         //Flutter Web
         parseFile = ParseWebFile(
             await pickedFile!.readAsBytes(),
             name: 'image.jpg'); //Name for file is required
       } else {
         //Flutter Mobile/Desktop
        parseFile = ParseFile(File(pickedFile!.path));
      }
      await parseFile.save();
﻿
El fragmento anterior crea y guarda la imagen, y después de que se complete el guardado, la asociamos con un ParseObject llamado Gallery.
JS
    final gallery = ParseObject('Gallery')
      ..set('file', parseFile);
    await gallery.save();
    final gallery = ParseObject('Gallery')
      ..set('file', parseFile);
    await gallery.save();
﻿
- Mostrando Imágenes
Para mostrar imágenes, necesitas obtener la URL de la imagen.
Para subir una imagen, solo necesitarás crear una ParseFileBase instancia y luego llamar al save método.
JS
     ParseFileBase? varFile = parseObject.get<ParseFileBase>('file');
2
     return Image.network(
       varFile!.url!,
       width: 200,
       height: 200,
       fit: BoxFit.fitHeight,
     );
     ParseFileBase? varFile = parseObject.get<ParseFileBase>('file');
2
     return Image.network(
       varFile!.url!,
       width: 200,
       height: 200,
       fit: BoxFit.fitHeight,
     );
﻿
- Subir y Recuperar desde la Aplicación Flutter
Ahora usemos nuestro ejemplo para subir y mostrar imágenes en la Aplicación Flutter, con una interfaz simple.
Abre tu proyecto de Flutter, ve al main.dart archivo, limpia todo el código y reemplázalo con:
Dart
 import 'dart:io';
2
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:image_picker/image_picker.dart';
 import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
8
 void main() async {
  WidgetsFlutterBinding.ensureInitialized();
11
  final keyApplicationId = 'YOUR_APP_ID_HERE';
  final keyClientKey = 'YOUR_CLIENT_KEY_HERE';
14
  final keyParseServerUrl = 'https://parseapi.back4app.com';
16
  await Parse().initialize(keyApplicationId, keyParseServerUrl,
      clientKey: keyClientKey, debug: true);
19
  runApp(MaterialApp(
    title: 'Flutter - Storage File',
    debugShowCheckedModeBanner: false,
    home: HomePage(),
  ));
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  PickedFile? pickedFile;

  List<ParseObject> results = <ParseObject>[];
  double selectedDistance = 3000;
37
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Padding(
      padding: const EdgeInsets.all(16.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          Container(
            height: 200,
            child: Image.network(
                'https://blog.back4app.com/wp-content/uploads/2017/11/logo-b4a-1-768x175-1.png'),
          ),
          SizedBox(
            height: 16,
          ),
          Center(
            child: const Text('Flutter on Back4app - Save File',
                style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
          ),
          SizedBox(
            height: 16,
          ),
          Container(
            height: 50,
            child: ElevatedButton(
              child: Text('Upload File'),
              style: ElevatedButton.styleFrom(primary: Colors.blue),
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => SavePage()),
                );
              },
            ),
          ),
          SizedBox(
            height: 8,
          ),
          Container(
              height: 50,
              child: ElevatedButton(
                child: Text('Display File'),
                style: ElevatedButton.styleFrom(primary: Colors.blue),
                onPressed: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) => DisplayPage()),
                  );
                },
              ))
        ],
      ),
    ));
  }
}

class SavePage extends StatefulWidget {
  @override
  _SavePageState createState() => _SavePageState();
}
99
class _SavePageState extends State<SavePage> {
 PickedFile? pickedFile;
 bool isLoading = false;

 @override
 Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(
       title: Text('Upload Fie'),
     ),
     body: Padding(
       padding: const EdgeInsets.all(12.0),
       child: Column(
         crossAxisAlignment: CrossAxisAlignment.stretch,
         children: [
           SizedBox(height: 16),
           GestureDetector(
             child: pickedFile != null
                 ? Container(
                     width: 250,
                     height: 250,
                     decoration:
                         BoxDecoration(border: Border.all(color: Colors.blue)),
                     child: kIsWeb
                         ? Image.network(pickedFile!.path)
                         : Image.file(File(pickedFile!.path)))
                 : Container(
                     width: 250,
                     height: 250,
                     decoration:
                         BoxDecoration(border: Border.all(color: Colors.blue)),
                     child: Center(
                       child: Text('Click here to pick image from Gallery'),
                     ),
                   ),
             onTap: () async {
               PickedFile? image =
                   await ImagePicker().getImage(source: ImageSource.gallery);

               if (image != null) {
                 setState(() {
                   pickedFile = image;
                 });
               }
             },
           ),
           SizedBox(height: 16),
           Container(
               height: 50,
               child: ElevatedButton(
                 child: Text('Upload file'),
                 style: ElevatedButton.styleFrom(primary: Colors.blue),
                 onPressed: isLoading || pickedFile == null
                     ? null
                     : () async {
                         setState(() {
                           isLoading = true;
                         });
                         ParseFileBase? parseFile;

                         if (kIsWeb) {
                           //Flutter Web
                           parseFile = ParseWebFile(
                               await pickedFile!.readAsBytes(),
                               name: 'image.jpg'); //Name for file is required
                         } else {
                           //Flutter Mobile/Desktop
                           parseFile = ParseFile(File(pickedFile!.path));
                         }
                         await parseFile.save();

                         final gallery = ParseObject('Gallery')
                           ..set('file', parseFile);
                         await gallery.save();
174
                         setState(() {
                           isLoading = false;
                           pickedFile = null;
                         });

                         ScaffoldMessenger.of(context)
                           ..removeCurrentSnackBar()
                           ..showSnackBar(SnackBar(
                             content: Text(
                               'Save file with success on Back4app',
                               style: TextStyle(
                                 color: Colors.white,
                               ),
                             ),
                             duration: Duration(seconds: 3),
                             backgroundColor: Colors.blue,
                           ));
                       },
               ))
         ],
       ),
     ),
   );
 }
}
200
class DisplayPage extends StatefulWidget {
 @override
 _DisplayPageState createState() => _DisplayPageState();
}
205
class _DisplayPageState extends State<DisplayPage> {
 @override
 Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(
       title: Text("Display Gallery"),
     ),
     body: FutureBuilder<List<ParseObject>>(
         future: getGalleryList(),
         builder: (context, snapshot) {
           switch (snapshot.connectionState) {
             case ConnectionState.none:
             case ConnectionState.waiting:
               return Center(
                 child: Container(
                     width: 100,
                     height: 100,
                     child: CircularProgressIndicator()),
               );
             default:
               if (snapshot.hasError) {
                 return Center(
                   child: Text("Error..."),
                 );
               } else {
                 return ListView.builder(
                     padding: const EdgeInsets.only(top: 8),
                     itemCount: snapshot.data!.length,
                     itemBuilder: (context, index) {
                       //Web/Mobile/Desktop
                      ParseFileBase? varFile =
                           snapshot.data![index].get<ParseFileBase>('file');

                       //Only iOS/Android/Desktop
                       /*
                       ParseFile? varFile =
                           snapshot.data![index].get<ParseFile>('file');
                       */
                       return Image.network(
                         varFile!.url!,
                         width: 200,
                         height: 200,
                         fit: BoxFit.fitHeight,
                       );
                     });
               }
           }
         }),
   );
 }

 Future<List<ParseObject>> getGalleryList() async {
   QueryBuilder<ParseObject> queryPublisher =
       QueryBuilder<ParseObject>(ParseObject('Gallery'))
         ..orderByAscending('createdAt');
   final ParseResponse apiResponse = await queryPublisher.query();

   if (apiResponse.success && apiResponse.results != null) {
     return apiResponse.results as List<ParseObject>;
   } else {
     return [];
   }
 }
}
 import 'dart:io';
2
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:image_picker/image_picker.dart';
 import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
8
 void main() async {
  WidgetsFlutterBinding.ensureInitialized();
11
  final keyApplicationId = 'YOUR_APP_ID_HERE';
  final keyClientKey = 'YOUR_CLIENT_KEY_HERE';
14
  final keyParseServerUrl = 'https://parseapi.back4app.com';
16
  await Parse().initialize(keyApplicationId, keyParseServerUrl,
      clientKey: keyClientKey, debug: true);
19
  runApp(MaterialApp(
    title: 'Flutter - Storage File',
    debugShowCheckedModeBanner: false,
    home: HomePage(),
  ));
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  PickedFile? pickedFile;

  List<ParseObject> results = <ParseObject>[];
  double selectedDistance = 3000;
37
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Padding(
      padding: const EdgeInsets.all(16.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          Container(
            height: 200,
            child: Image.network(
                'https://blog.back4app.com/wp-content/uploads/2017/11/logo-b4a-1-768x175-1.png'),
          ),
          SizedBox(
            height: 16,
          ),
          Center(
            child: const Text('Flutter on Back4app - Save File',
                style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
          ),
          SizedBox(
            height: 16,
          ),
          Container(
            height: 50,
            child: ElevatedButton(
              child: Text('Upload File'),
              style: ElevatedButton.styleFrom(primary: Colors.blue),
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => SavePage()),
                );
              },
            ),
          ),
          SizedBox(
            height: 8,
          ),
          Container(
              height: 50,
              child: ElevatedButton(
                child: Text('Display File'),
                style: ElevatedButton.styleFrom(primary: Colors.blue),
                onPressed: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) => DisplayPage()),
                  );
                },
              ))
        ],
      ),
    ));
  }
}

class SavePage extends StatefulWidget {
  @override
  _SavePageState createState() => _SavePageState();
}
99
class _SavePageState extends State<SavePage> {
 PickedFile? pickedFile;
 bool isLoading = false;

 @override
 Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(
       title: Text('Upload Fie'),
     ),
     body: Padding(
       padding: const EdgeInsets.all(12.0),
       child: Column(
         crossAxisAlignment: CrossAxisAlignment.stretch,
         children: [
           SizedBox(height: 16),
           GestureDetector(
             child: pickedFile != null
                 ? Container(
                     width: 250,
                     height: 250,
                     decoration:
                         BoxDecoration(border: Border.all(color: Colors.blue)),
                     child: kIsWeb
                         ? Image.network(pickedFile!.path)
                         : Image.file(File(pickedFile!.path)))
                 : Container(
                     width: 250,
                     height: 250,
                     decoration:
                         BoxDecoration(border: Border.all(color: Colors.blue)),
                     child: Center(
                       child: Text('Click here to pick image from Gallery'),
                     ),
                   ),
             onTap: () async {
               PickedFile? image =
                   await ImagePicker().getImage(source: ImageSource.gallery);

               if (image != null) {
                 setState(() {
                   pickedFile = image;
                 });
               }
             },
           ),
           SizedBox(height: 16),
           Container(
               height: 50,
               child: ElevatedButton(
                 child: Text('Upload file'),
                 style: ElevatedButton.styleFrom(primary: Colors.blue),
                 onPressed: isLoading || pickedFile == null
                     ? null
                     : () async {
                         setState(() {
                           isLoading = true;
                         });
                         ParseFileBase? parseFile;

                         if (kIsWeb) {
                           //Flutter Web
                           parseFile = ParseWebFile(
                               await pickedFile!.readAsBytes(),
                               name: 'image.jpg'); //Name for file is required
                         } else {
                           //Flutter Mobile/Desktop
                           parseFile = ParseFile(File(pickedFile!.path));
                         }
                         await parseFile.save();

                         final gallery = ParseObject('Gallery')
                           ..set('file', parseFile);
                         await gallery.save();
174
                         setState(() {
                           isLoading = false;
                           pickedFile = null;
                         });

                         ScaffoldMessenger.of(context)
                           ..removeCurrentSnackBar()
                           ..showSnackBar(SnackBar(
                             content: Text(
                               'Save file with success on Back4app',
                               style: TextStyle(
                                 color: Colors.white,
                               ),
                             ),
                             duration: Duration(seconds: 3),
                             backgroundColor: Colors.blue,
                           ));
                       },
               ))
         ],
       ),
     ),
   );
 }
}
200
class DisplayPage extends StatefulWidget {
 @override
 _DisplayPageState createState() => _DisplayPageState();
}
205
class _DisplayPageState extends State<DisplayPage> {
 @override
 Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(
       title: Text("Display Gallery"),
     ),
     body: FutureBuilder<List<ParseObject>>(
         future: getGalleryList(),
         builder: (context, snapshot) {
           switch (snapshot.connectionState) {
             case ConnectionState.none:
             case ConnectionState.waiting:
               return Center(
                 child: Container(
                     width: 100,
                     height: 100,
                     child: CircularProgressIndicator()),
               );
             default:
               if (snapshot.hasError) {
                 return Center(
                   child: Text("Error..."),
                 );
               } else {
                 return ListView.builder(
                     padding: const EdgeInsets.only(top: 8),
                     itemCount: snapshot.data!.length,
                     itemBuilder: (context, index) {
                       //Web/Mobile/Desktop
                      ParseFileBase? varFile =
                           snapshot.data![index].get<ParseFileBase>('file');

                       //Only iOS/Android/Desktop
                       /*
                       ParseFile? varFile =
                           snapshot.data![index].get<ParseFile>('file');
                       */
                       return Image.network(
                         varFile!.url!,
                         width: 200,
                         height: 200,
                         fit: BoxFit.fitHeight,
                       );
                     });
               }
           }
         }),
   );
 }

 Future<List<ParseObject>> getGalleryList() async {
   QueryBuilder<ParseObject> queryPublisher =
       QueryBuilder<ParseObject>(ParseObject('Gallery'))
         ..orderByAscending('createdAt');
   final ParseResponse apiResponse = await queryPublisher.query();

   if (apiResponse.success && apiResponse.results != null) {
     return apiResponse.results as List<ParseObject>;
   } else {
     return [];
   }
 }
}
﻿
Encuentra tu ApplicationId y Client Key credenciales navegando a tu app Dashboard->Settings->Security and Keys en Back4App Website.
Actualiza tu código en main.dart con AMBOS valores de tu proyecto ApplicationId y ClientKey en Back4app.
keyApplicationId = AppId﻿
keyClientKey = Client Key﻿
Ejecuta el proyecto, y la aplicación se cargará como se muestra en la imagen.
﻿
﻿
﻿
﻿
Conclusión
En este punto, has subido una imagen en Back4App y la has mostrado en una aplicación Flutter.
Integración de inicio de sesión Facebook en Parse con Flutter
Integración de Cloud Functions en Flutter con Parse SDK
Subir y mostrar archivos en Flutter con Parse y Back4App

Guardar archivos de una aplicación Flutter

Introducción

Requisitos previos

Objetivo

1 - Entendiendo la clase ParseFile y ParseWebFile

2 - Subiendo una Imagen

3 - Mostrando Imágenes

4 - Subir y Recuperar desde la Aplicación Flutter

Conclusión
