2. The next point is you will not get the path for web, so we are going to use bytes to upload and display our file. If you will try to access the path then you will get the following error:

Hello flutter developers!!. In this article, we will see how to upload an image or any type of file from our system to a server in flutter web. We will use the file_picker package for picking the files and dio for uploading them to the server.

Let’s Get Started

Implementation:

Step 1: Add the dependencies

Add dependencies to pubspec.yaml file.

dependencies:
  flutter:
    sdk: flutter
  file_picker: ^4.6.1
  dio: ^4.0.6

Step 2: Create UI for our app

I have created a simple UI that helps to understand the feature and is most likely to be used in all types of applications. So, here is profile_screen.dart that has the implementation. As we are using bytes instead of the path of an image while picking, so to display it in application we have to use Image.memory() or MemoryImage().

profile_screen

Here is the Code:

Now, here comes the main part picking files from your system inside the application for further process. So, below is the method that will be called on click of the camera icon to pick a file. You can also specify the allowed extensions of the file that can be allowed to be uploaded to the server.

pick_file

And the last part is to upload the selected file to the server using API. In this project, I have used dio for API calling and uploading the file. Here I want to mention that for some APIs you have to mention the filename and contentType of your file and if you failed then you will encounter the following error:

DioError [DioErrorType.RESPONSE]: Http status error [400] Exception

api_call