Upload image flutter web with dio formdata

Question

I am trying using file_picker and dio packages to upload files as form data.

This is for flutter web and it seems MultipartFile.fromFile is not accepted.

What I tried is the following:

if (result != null) {    
  for (var file in result.files) {
    final formData = FormData.fromMap({
      ...someOtherData,
      'file': File(file.name), // <------ I guess this is where the issue is, I also tried file instead of File(file.name)
    });
    
    dio.post(
      url,
      data: formData,
    );
  }
}

HKTareen · Accepted Answer · 2022-04-23 14:08:39Z

5

If anyone is still wondering how to get it working on both mobile and web (This is using the image_picker's PickedFile as the image variable type) :

 FormData body;
 final bytes = await image.readAsBytes();
 final MultipartFile file = MultipartFile.fromBytes(bytes, filename: "picture");
 MapEntry<String, MultipartFile> imageEntry = MapEntry("image", file);
 body.files.add(imageEntry);

** The catch is that the filename is required on web and is automatically assigned on mobile.**

answered Apr 23, 2022 at 14:08

HKTareen

2313 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

VipiN Negi Over a year ago

I get this error: Unsupported operation: _Namespace.

Daniel Valencia Jan 22 at 1:10

The docs should say that filename is required on web I didn't know why I was getting an exception. Thanks bro!

user3808307 · Accepted Answer · 2021-05-29 21:07:10Z

3

Ok, I found it, leaving here for someone having the same problem

if (result != null) {    
  for (var file in result.files) {
    final formData = FormData.fromMap({
      ...someOtherData,
      'file': MultipartFile.fromBytes(file.bytes as List<int>)
    });
    
    dio.post(
      url,
      data: formData,
    );
  }
}

answered May 29, 2021 at 21:07

user3808307

1,06712 gold badges67 silver badges119 bronze badges

2 Comments

VipiN Negi Over a year ago

I get this error: Unsupported operation: _Namespace.

HKTareen Over a year ago

Can you share your Code here, this works for web and mobile both.

Collectives™ on Stack Overflow

Upload image flutter web with dio formdata

2 Answers 2

2 Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Related