Web and desktop support for file upload and download in Flutter

Suragch
10 min readJul 19, 2023

Managing conditional imports and CORS issues

Uploading and downloading your cat pics

Here’s what I want to do:

  • The user chooses a file and uploads it to a server.
  • The user downloads a file and chooses where to save it.
  • Both of these tasks should support web and desktop.

The problem is, on desktop (and mobile) these operations require dart:io, which doesn’t support web. And web requires dart:http, which doesn’t support desktop.

You might think you could just import both libraries and then choose the appropriate classes and functions using kIsWeb like so:

if (kIsWeb) {
// use dart:html stuff
} else {
// use dart:io stuff
}

Unfortunately that doesn’t work, though, because kIsWeb is a runtime constant, and so Flutter still tries to import both libraries when it compiles your app, which results in an error. Read more about that here.

The solution is to use conditional imports. This article will take you through the steps to set that up as well as jump through a few other hurdles along the way. You’ll create a simple demo app with two buttons, one for upload and one for download:

--

--