Uploading large files with Flutter Web

[hauketoenjes]

When picking large files with Flutter Web, the whole file is being cached what eventually breaks the browser tab and crashes the application.

Setting the withData parameter to false seems to do nothing about it. Is there a way of somehow streaming a big file to the browser with this package?

For example if you want to pick a 2GB video and post it via http to a webserver where it is stored?

[miguelpruivo]

@hauketoenjes on web if you don't use withData property you shouldn't be able to pick the files. I don't know any other way as I don't work much with Flutter Web actually.

Let me know if you come up with a solution and I'd be happy to merge!

[hauketoenjes]

Ok, i will look around and try to find a solution. I'll let you know if i find something. Would be a nice feature to have in this package actually 👍 .

[miguelpruivo]

@hauketoenjes I completely agree, although I’m not sure if it’ll be possible or not.

[hauketoenjes]

I think there is a way by using the FileUploadInputElement. It has the property files, which returns a list of HTML Files. These files can be split with the File.split(..) function and the be read with the FileReader.readAsDataUrl function. This then returns an event, when the part is read.

This would be potentially the way (actually the same way as you would do it in js) of doing this in Flutter Web at the moment. I'll try to implement an interface for this which returns a stream (?) of int's which can then be piped into external libraries like Dio's Multipartfile.

I'll do more testing on this and will let you know when i come up with something usable.

[miguelpruivo]

@hauketoenjes one thing to have in mind is that we can’t have dart:io mixed with dart:html Or else we’d have to be stubbing some classes and that has been done before in some earlier versions that included web, without a clean solution.

Working with raw data makes it easier and more versatile however I agree that it might cause some memory issues for huge files.

Let me know if you come up with something.

Thank you!

[hauketoenjes]

Seems like this is problem which cannot be solved by this or any file picker library. The current solution seems to be to not read the file but instead pass it over to the next instance which uploads it.

I'll leave a description of how to directly upload a large file if someone google's it and find's this issue.

The file must be read as a dart:html File. After that it can be uploaded with the HttpRequest.request(...) method, which splits the File into parts and starts a multipart upload. The disadvantage with this approach is, that the function has a callback onProgress which never get's fired. But it does not write the file into the application's memory, which is wanted with large files.

@miguelpruivo Would be useful to have an option to receive a HTML file from this filepicker, which only works in Flutter Web, but is needed there for large files. I'm thinking of a .pickHTMLFile() option or something which only works on Web.