MultipartFile is only supported where dart:io is available

[esDotDev]

New Issue Checklist

• [x ] I have searched for a similar issue in the project and found none

Web Build
Flutter 1.27.0-8.0.pre • channel dev • https://github.com/flutter/flutter.git
Framework • revision b7d4806243 (13 days ago) • 2021-02-19 09:22:45 -0800
Engine • revision 6993cb229b
Tools • Dart 2.13.0 (build 2.13.0-30.0.dev)

Issue Description and Steps

I am using the cloudinary package on web, which is in-turn using Dio to call toMultipartFile

 FormData formData = FormData.fromMap({
      'file': file.toMultipartFile() ?? file.url,
      'upload_preset': uploadPreset ?? _uploadPreset,
    });

This is causing an exception at runtime:

Error: Unsupported operation: MultipartFile is only supported where dart:io is available.
    at Object.throw_ [as throw] (http://localhost:52896/dart_sdk.js:5342:11)

There is some discussion here with some proposed fix:
https://stackoverflow.com/questions/63314063/upload-image-file-to-strapi-flutter-web

[DaniEid]

I'm using flutter v2.2 and getting the same issue the exception is occurring when trying to get MultipartFile from bytes and this is the chunk of the code that is throwing the exception

final bytes = await attachmentFile.readAsBytes();
        final dioLibrary.MultipartFile file =
            dioLibrary.MultipartFile.fromBytes(
          bytes,
          filename: "picture",
        );

        print("adding map entry");

        formData.files.add(MapEntry(
          "file",
          file,
        ));

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. If this is still an issue, please make sure it is up to date and if so, add a comment that this is still an issue to keep it open. Thank you for your contributions.

[eliasayele]

still, I don't get a real fix for this problem, anyone can help me?

[DavidIjsud]

Still, i dont get a real fix for this problem :(.

[TheSagarPatil]

Has anyone got fix on this one?

[s2yed]

Has anyone got fix on this one?

[smileycracker91]

I was having same issue, but I had solved them but not using dio. Since most of you here want to upload file, I think I better share something. So for anyone that want to upload file using flutter 2.2 web, I suggest you to follow my step,
In the first file:
`
import 'dart:convert';
import 'dart:html' as html;
import 'dart:typed_data';
import 'package:flutter/material.dart';

late String base64file;
late Uint8List fileBytes;
late String fileName;

final fileInput = html.document.createElement('input') as html.InputElement
..type = 'file'
..accept = 'image/,video/';
fileInput.click();

fileInput.onChange.listen((event) {
if(fileInput.files!=null){
final files = fileInput.files;
if (files!.length == 1) {
final file = files[0];
fileName= event.target!.files[0].name;
getBase64(file, (_base64file){
base64file = _base64file;
});
getArrayBuffer(file, (_fileBytes){
fileBytes = _fileBytes;
});
}
}
});

getArrayBuffer(_file, done){
html.FileReader reader = html.FileReader();
reader.onLoadEnd.listen((_event) {
done(reader.result);
});
reader.readAsArrayBuffer(_file);
}

getBase64(_file, done){
html.FileReader reader = html.FileReader();
reader.onLoadEnd.listen((_event) {
done(reader.result);
});
reader.readAsDataUrl(_file);
}

MaterialButton(child: Text("Submit"), onPressed: ()=>postFileToStrapi(base64file, fileBytes, fileName)),
`

In the second file:

`

import 'dart:convert';
import 'dart:typed_data';
import 'package:image_picker/image_picker.dart';
import 'package:http/http.dart' as http;
import 'package:http_parser/http_parser.dart';
import 'package:path/path.dart';
import 'package:async/async.dart';

void postFileToStrapi(base64file, fileBytes, fileName){
String url = "https://yourstrapihostorothers.com/uploads";

PickedFile imageFile = PickedFile(base64file);
var stream = http.ByteStream(DelegatingStream.typed(imageFile.openRead()));

var uri = Uri.parse(url);
int length = fileBytes.length;
var request = http.MultipartRequest("POST", uri);
var multipartFile = http.MultipartFile('files', stream, length,
filename: fileName,
);

request.files.add(multipartFile);
var response = await request.send();
print(response.statusCode);
if(response.statusCode == 200){
response.stream.transform(utf8.decoder).listen((value) {
print(value);
});
}else{
print("error " + response.statusCode);
}
`

[MarioKangaroo]

I continue with the same issue "MultipartFile is only supported where dart:io is available". Flutter 2.10.0 and Dart 2.16.0

[zand98]

It should be work:

FormData formData = FormData.fromMap({
      "img": MultipartFile.fromBytes(
        await pickedFile.readAsBytes(),
        filename: pickedFile.path.split('/').last,
      )
    });

[makhloughi]

It should be work:

FormData formData = FormData.fromMap({
      "img": MultipartFile.fromBytes(
        await pickedFile.readAsBytes(),
        filename: pickedFile.path.split('/').last,
      )
    });

Nope!

[makhloughi]

this will do the job:
Upload Multipart Form Data from flutter Dio on the web platform.
any other ways leads to unsupported namespace or any other platform errors

XFile file = XFile(yourHavingFile.path);
Uint8List content = await file.readAsBytes();

FormData formData = FormData.fromMap({
  "file": MultipartFile.fromBytes(content, filename: "whatever.itis")
});

Response response = await Dio().post(
  Endpoints.uploadUrl,
  data: formData,
  options: Options(
    headers: {
      "Content-Type": "multipart/form-data"
    }
  )
);

thanks to isuru for: https://stackoverflow.com/a/75825712/6466343