Flutter: Upload Image to Server from Mobile

I’m here to explain how to upload the image to our own server from the mobile App.

For the Server, I’ll be using Flask and For mobile application development, I will be using Flutter.

So Let’s Get Started…

Basically, the server has to be set up first for implementing this. So let's create a server using flask

Create a python file and add this line of code.

So, basically, we are creating a route of /upload in our flask and when the post request comes it gets the image using request.files[‘image’] and saves the image in the local directory of our Laptop/Computer.

Run

python app.py

and I’m using localtunnel npm package to use the localhost in my mobile application.

Now lets build our mobile App in Flutter

Create a new Flutter Project add http and image_picker package in pubspec.yaml

Adding Package in pubspec.yaml

For Uploading to the server add this line of code in your button Pressed event and don’t forget to add your API Url.

So here Using Multipart we are sending the image to the server and in the header, it is necessary to add multipart/form-data.

Overall main.dart code

Outputs of the mobile Application

After Selecting the Image

After Uploading an image to Server

Saved Image in my server i.e in my Computer

Here are the outputs which print on your console in your Server-side code.

You can check out the source code in my GitHub repository.

AgnelSelvan/UploadImageToServer

Join FAUN: Website 💻|Podcast 🎙️|Twitter 🐦|Facebook 👥|Instagram 📷|Facebook Group 🗣️|Linkedin Group 💬| Slack 📱|Cloud Native News 📰|More.

If this post was helpful, please click the clap 👏 button below a few times to show your support for the author 👇