Uploading files in Flutter Web

[rjcalifornia]

Cannot upload a file to server using a Multipart form

Steps to Reproduce

1. Create a form in Flutter Web both using the HTTP package
2. Sending a file using MultipartFile.fromPath
3. Edit the form and use the DIO package to send the form
4. Run the application again
5. Sending a file using MultipartFile.fromFile

Target Platform:
Web
Target OS version/browser:
Windows 10
Chrome Version 78.0.3904.108 (Official Build) (64-bit)
Devices:
Chrome Version 78.0.3904.108 (Official Build) (64-bit)

Logs

Uncaught (in promise) Error: Unsupported operation: MultipartFile is only supported where dart:io is available.
    at Object.throw_ [as throw] (errors.dart:196)
    at Object.multipartFileFromPath (multipart_file_stub.dart:13)
    at Function.fromPath (multipart_file.dart:93)
    at personal._PersonalFormState.new.makeRequest (personal.dart:349)
    at makeRequest.next (<anonymous>)
    at runBody (async_patch.dart:86)
    at Object._async [as async] (async_patch.dart:125)
    at personal._PersonalFormState.new.makeRequest (personal.dart:313)
    at _submitDetails (personal.dart:606)
    at ink_well.InkWell.new.<anonymous> (personal.dart:647)
    at _InkResponseState.new.[_handleTap] (ink_well.dart:706)
    at ink_well.dart:789
    at tap.TapGestureRecognizer.new.invokeCallback (recognizer.dart:182)
    at tap.TapGestureRecognizer.new.handleTapUp (tap.dart:486)
    at tap.TapGestureRecognizer.new.[_checkUp] (tap.dart:264)
    at tap.TapGestureRecognizer.new.acceptGesture (tap.dart:236)
    at arena.GestureArenaManager.new.sweep (arena.dart:156)
    at binding$5.WidgetsFlutterBinding.new.handleEvent (binding.dart:222)
    at binding$5.WidgetsFlutterBinding.new.dispatchEvent (binding.dart:198)
    at binding$5.WidgetsFlutterBinding.new.[_handlePointerEvent] (binding.dart:156)
    at binding$5.WidgetsFlutterBinding.new.[_flushPointerEventQueue] (binding.dart:102)
    at binding$5.WidgetsFlutterBinding.new.[_handlePointerDataPacket] (binding.dart:86)
    at _engine.PointerBinding.new.[_onPointerData] (pointer_binding.dart:89)
    at pointer_binding.dart:261
    at HTMLElement.<anonymous> (pointer_binding.dart:173)

Flutter Doctor

[√] Flutter (Channel master, v1.12.5-pre.21, on Microsoft Windows [Version 10.0.17134.1006], locale en-US)
    • Flutter version 1.12.5-pre.21 at C:\Users\Rodolfo Hernandez\Documents\projects\flutter
    • Framework revision 399aebc4b7 (9 days ago), 2019-11-19 12:12:56 +0100
    • Engine revision ecb32952ff
    • Dart version 2.7.0


[!] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
    • Android SDK at C:\Users\Rodolfo Hernandez\AppData\Local\Android\sdk
    • Android NDK location not configured (optional; useful for native profiling support)
    • Platform android-29, build-tools 29.0.2
    • Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 1.8.0_202-release-1483-b03)
    ! Some Android licenses not accepted.  To resolve this, run: flutter doctor --android-licenses

[√] Chrome - develop for the web
    • Chrome at C:\Program Files (x86)\Google\Chrome\Application\chrome.exe

[√] Android Studio (version 3.5)
    • Android Studio at C:\Program Files\Android\Android Studio
    • Flutter plugin version 39.0.3
    • Dart plugin version 191.8423
    • Java version OpenJDK Runtime Environment (build 1.8.0_202-release-1483-b03)

[√] VS Code (version 1.40.2)
    • VS Code at C:\Users\Rodolfo Hernandez\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.6.0

[√] Connected device (2 available)
    • Chrome     • chrome     • web-javascript • Google Chrome 78.0.3904.108
    • Web Server • web-server • web-javascript • Flutter Tools

! Doctor found issues in 1 category.

[iapicca]

Hi @rjcalifornia

The issue you are describing involves MultipartFile which is part of the http library ,
but you are also mentioning dio which is a 3rd party plugin;
could you please provide a minimal code sample to reproduce the problem?

Thank you

[rjcalifornia]

This is the code I was trying in Flutter Web:

FormData.fromMap({ "name": "wendux", "age": 25, "file": await MultipartFile.fromFile("./text.txt",filename: "upload.txt"), "files": [ await MultipartFile.fromFile("./text1.txt", filename: "text1.txt"), await MultipartFile.fromFile("./text2.txt", filename: "text2.txt"), ] }); response = await dio.post("/info", data: formData);

And this is the error I get in the Debug Console of Flutter Web:

Uncaught (in promise) Error: Unsupported operation: MultipartFile is only supported where dart:io is available.

[rjcalifornia]

The code posted about works. I just changed
MultipartFile.fromFile

to

request.files.add(await http.MultipartFile.fromBytes

Uploading files to server from Flutter Web works! You can close this now.

[DaniEid]

I'm using the new flutter release 2.2 and I'm getting the same exception when trying to upload images from chrome
MultipartFile is only supported where dart:io is available
I'm using http library http: ^0.13.3

[iapicca]

@DaniEid
it's possible, if not likely, that yours could be an issue with http rather than flutter,
if you think so please open an issue in the dedicated github

If you believe instead yours being an issue with flutter
I recommend to open a new issue providing a minimal reproducible code sample (w/o 3rd party plugins)
together with you flutter doctor -v

[github-actions]

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.