To upload files from a local system to the dedicated server is called file uploading and retrieval files from the dedicated server to a local system is called file retrieving. It works exactly the same as the definition when we select a file from the Android device and click the submit button, the Android device takes the file from the local storage and sends it to the server with the help of an Http request and the server does its job to save the file to the defined location. In this article, we are demonstrating how image files are stored and retrieved into the MongoDB Atlas cluster database along with compressing the size of images form Megabytes(MBs) to Kilobytes(KB) with the help of the flutter_image_compress plugin.
Prerequisite: For getting started with this an individual needs to be familiar with the following
- Mongo Dart
Here, We are creating an Android application to demonstrate the use of MongoDB in the Flutter application. To get started we need to install certain Flutter packages & plugins and Android Studio must be installed in the local system.
- Open Android Studio and create a new flutter application project with a name called ‘geeksforgeeks’.
- Once the project is created and sync successfully, connect your Android device to Android Studio, and make sure Developer options and USB debugging are On.
- Run the project by clicking on the first green icon at the center top to cross-check the project is built and running successfully(first time Android Studio takes a little more time as usual).
- Now, It’s time to install the necessary packages & plugins, open the ‘pubspec.yaml’ file from geeksforgeeks -> pubspec.yaml project structure and copy-paste three dependencies that are image_picker, flutter_image_compress, and mongo_dart as follows.
dependencies: image_picker: ^0.6.7+7 flutter_image_compress: ^0.7.0 mongo_dart: git: url: https://github.com/mongo-dart/mongo_dart.git
- Once, you have done the above steps then click on ‘Packages get’ flutter command appearing at the center top to get install all necessary packages and plugins.
To upload and retrieve an image on MongoDB using Dart in flutter lets begin, follow each and every step below one by one.
Since this entire application is built on the top of the Android smartphone hence it won’t be possible to connect with the local MongoDB database that’s why here, we will be using the MongoDB cluster database, and to connect with cluster database all we need replicas’ URIs.
- Signup or Login to MongoDB account and create a database with any custom name.
- To get these replicas from Atlas, got to ‘Connect’ -> ‘Connect with Shell’ -> ‘I have the Mongo Shell installed’ -> set your version to 3.4 or earlier.
- If you have 3 replicas, you will have 3 URLs split up with commas like below.
To begins with the database connection, Since Atlas now only allows SSL connections, we will need the source from TLS/SSL to open a secure connection. To the Db.pool() instruction we will have to pass in each of these URLs prefaced with mongodb://, followed by /test?authSource=[auth db (probably ‘admin’)] we can see an example of replicas’ URIs in the above step.
Once we have established a connection to the MongoDB cluster database, we can now begin defining our back-end logic. Since uploading and retrieving long size image is very time-consuming and sometimes it leads with a bunch of problems like for example acquire more space, more costly, access time more, and more data overload therefore In this, the step we are compressing the size of an image from MB’s to KB’s with maintaining aspect ratio.
Now, this is the fourth and final step here, we will be building queries to upload and retrieve images to MongoDB, therefore, cluster database. Since MongoDB supports JSON like(i.e key-value pair) data format therefore we will have to create a Hashmap with two key-value pairs that are ‘_id’ and ‘data’ to store image unique id and image pixel data respectively.
Now, It is time to show the full approach, open ‘main.dart’ file from geeksforgeeks -> lib -> main.dart project directory structure and copy-paste following the entire code.
Finally, Run the project by clicking on the first green icon at the center top to see the output, and your job gets done.
- Upload and Retrieve Image on MongoDB using Mongoose
- Retrieve Data From TextFields in Flutter
- How to Add images in Flutter App?
- Using await async in Dart
- Dart - Super and This keyword
- Dart - Classes And Objects
- Dart - Loop Control Statements (Break and Continue)
- Instance and class methods in Dart
- Getter and Setter Methods in Dart
- Dart - Finding Minimum and Maximum Value in a List
- Dart - Const And Final Keyword
- HTML Document Object Model and Dart Programming
- Variables and Keywords in Dart
- What is Lexical scope and lexical closures in Dart
- Dart - Getters and Setters
- Difference Between DART and C++
- Dart - Dates and Times
- Difference Between Golang and Dart
- How to Combine Lists in Dart?
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.