Files

13min
Save Files from a Flutter App
Introduction
Sometimes applications need to store data that is often too large to be stored inside a ParseObject. The most common use case is storing images, but you can also use it for documents, videos, music, and other binary data.
To store a file on Parse, 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 uploading multiple files using the same name.
In Flutter, ParseFile and ParseWebFile let you store and retrieve application files in the Cloud that would. This guide explains how to store and retrieve files in your Flutter App to manage Back4app cloud storage.
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.
﻿
Prerequisites
An app created on Back4App:
Note: Follow the New Parse App Tutorial to learn how to create a Parse App on Back4App.
An Flutter app connected to Back4app.
Note: Follow the Install Parse SDK on Flutter project to create an Flutter Project connected to Back4App.
A device (or virtual device) running Android or iOS.
In order to run this guide example you should set up the plugin image_picker properly. Do not forget to add permissions for iOS in order to access images stored in device. {: .btn target=”_blank” rel=”nofollow”}. Carefully read the instructions for setting up the Android and iOS project.
Goal
Create an Flutter Gallery App that uploads and displays images from Back4app.
- Understanding ParseFile and ParseWebFile class
There are three different file classes in this Parse SDK for Flutter
﻿ParseFileBaseis an abstract class, the foundation of every file class that this SDK can handle.
﻿ParseFileextends ParseFileBase and is by default used as the file class on every platform (not valid for web). This class uses a File from dart:io for storing the raw file.
﻿ParseWebFileis the equivalent to ParseFile used at Flutter Web. This class uses an Uint8List for storing the raw file.
The methods available on ParseFileBase to manipulate files:
﻿save()or upload() for save file on Cloud
﻿download()for retrive file and store in local storage
There are properties to get information from the saved file:
﻿url: Gets the file url. It is only available after you save the file or after you get the file from a Parse.Object.
﻿name: Gets the file name. This is the filename given by the user before calling the save() method. After callint the method, the property receives a unique identifier.
- Uploading an Image
To upload an image, you will only need to create a ParseFileBase instance and then call the save method.
Let’s do that in our upload function:
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();
﻿
The above snippet creates and saves the image, and after the save completes, we associate it with a ParseObject called Gallery.
JS
    final gallery = ParseObject('Gallery')
      ..set('file', parseFile);
    await gallery.save();
    final gallery = ParseObject('Gallery')
      ..set('file', parseFile);
    await gallery.save();
﻿
- Displaying Images
To display images, you need to get the image’s URL.
To upload an image, you will only need to create a ParseFileBase instance and then call the save method.
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,
     );
﻿
- Upload and Retrieve from Flutter App
Let’s now use our example for uploading and displaying images in Flutter App, with a simple interface.
Open your Flutter project, go to the main.dart file, clean up all the code, and replace it with:
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 [];
   }
 }
}
﻿
Find your ApplicationId and Client Key credentials navigating to your app Dashboard->Settings->Security and Keys at Back4App Website.
Update your code in main.dart with BOTH values of your project’s ApplicationId and ClientKey in Back4app.
keyApplicationId = AppId﻿
keyClientKey = Client Key﻿
Run the project, and the app will load as shown in the image.
﻿
﻿
﻿
﻿
Conclusion
At this point, you have uploaded image on Back4App and displayed it in a Flutter application.