How can I read and Write Files in Flutter Web?

Question

I am working on flutter-web, I would like to do file operations(read and write) in flutter-web. For Android and IOS, I was using path_provider dependency. But in Flutter-web, it is not supported.

Can anyone help me with this?

I wonder if HTML5 Local Storage (https://html.spec.whatwg.org/multipage/webstorage.html#dom-localstorage) could be used to host small files. How small? 2MB it seems based on https://www.sitepoint.com/html5-local-storage-revisited/ — David Chandler, Nov 27 '19 at 15:20

score 43 · Answer 1 · answered Sep 11 '20 at 07:53

The accepted answer is not completely right. Yes, dart:io is not available on the web, but it is still possible to read files. You can select a file through the system's file picker and read it afterward. An easy option to "write" a file is to send the user an auto-download.

Read:
Use this library to select a file: pub.dev/packages/file_picker (Web migration guide)

import 'dart:html' as webFile;
import 'package:file_picker_web/file_picker_web.dart' as webPicker;

if (kIsWeb) {
   final webFile.File file = await webPicker.FilePicker.getFile(
      allowedExtensions: ['pd'],
      type: FileType.custom,
   );
  
   final reader = webFile.FileReader();
   reader.readAsText(file);

   await reader.onLoad.first;

   String data = reader.result;
}

Write (a.k.a download):

import 'dart:html' as webFile;

if (kIsWeb) {
   var blob = webFile.Blob(["data"], 'text/plain', 'native');

   var anchorElement = webFile.AnchorElement(
      href: webFile.Url.createObjectUrlFromBlob(blob).toString(),
   )..setAttribute("download", "data.txt")..click();
}

This is the best answer, but it'll crash on phone even with `kIsWeb` so avoid this you should go something like this https://stackoverflow.com/a/60089273/9937309 — Shahzad Akram, Apr 09 '21 at 17:03

score 11 · Accepted Answer · answered Jul 24 '19 at 12:17

11

in the dart docs it has been explained ... dart:io is not available to web build ... it means that you can not directly access to system files in flutter web . the build will fail .. you need to remove the code in order to run it

this is a security thing .. js doesn't allow it too .. imagine a website that can read all your system files if you visit it .. that's why things like path reading or file reading is not allowed .. it goes same for flutter

hope you have your answer

answered Jul 24 '19 at 12:17

adib

347
3
5

Thank you adib. Do you know if the same safety precaution applies to Flutter Windows? – Brandon Pillay Sep 24 '21 at 08:53
It doesn't. Flutter windows has access to dart:io. – Luca Venturini Dec 29 '21 at 22:25
However PWA's can have limited FS access https://developer.chrome.com/articles/file-system-access/. Is there a way for flutter to use PWA features like this for the web build? – Snickdx Jan 08 '23 at 12:52

score 3 · Answer 3 · answered Jan 06 '20 at 20:07

3

I created a package specifically for this before Flutter web was a thing. https://pub.dev/packages/async_resource

It looks at things as either a network resource (usually over HTTP), or a local resource such as a file, local storage, service worker cache, or shared preferences.

It isn't the easiest thing in the world but it works.

answered Jan 06 '20 at 20:07

Jacob Phillips

8,841
3
51
66

1

looks promising, but your dependancies are a bit out of date. – Aaron Halvorsen Jan 10 '20 at 22:14

score 3 · Answer 4 · answered Jan 12 '23 at 21:53

3

When it comes specifically to reading a file from disk on web, the easiest way is to use a PickedFile like so:

PickedFile localFile = PickedFile(filePath);
Uint8List bytes = await localFile.readAsBytes();

answered Jan 12 '23 at 21:53

Dennis

779
9
14

1

It works, doesn't require the user to pick the file and is the best answer IMHO. – JonP Apr 27 '23 at 13:48

score 0 · Answer 5 · answered May 06 '20 at 12:39

0

What about "dart:indexed_db library", You can store structured data, such as images, arrays, and maps using IndexedDB. "Window.localStorage" can only store strings.

dart:indexed_db

Window.localStorage

answered May 06 '20 at 12:39

Kexi He

71
1
6

How can I read and Write Files in Flutter Web?

5 Answers5

Linked