Upload Image/File to Strapi (Flutter Web)

Question

I'm trying to upload an image to Strapi through Flutter Web. I'm aware (from this link) that I need to use FormData to do so. I've researched on many ways to do this and I stumble across Dio and of course Http.

Both solutions gave me errors: Unsupported operation: MultipartFile is only supported where dart:io is available.

I've tried this code:

var request = new http.MultipartRequest("POST", Uri.parse(url));
    request.files.add(
      await http.MultipartFile.fromPath(
        "files",
        imageFilePath,
      ),
    );
    request.send().then((response) {
      if (response.statusCode == 200) print("Uploaded!");
      print(response.statusCode);
    }).catchError((e) => print(e));

As suggested here.

And many other getting errors or Empty Data (400), when I use MultipartFile.fromBytes(...).

I'm just trying to upload a file, therefore I assume my body should only contain the FormData with as files as it's mentioned on Strapi's Documentation.

Solution 1

So, I searched on the Flutter Discord for some help and I found out that my problem happens because Flutter Web can't use 'dart:io' , and using 'dart:html' takes away the use of all of Flutter's platforms.

I ended up using this imports:

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';

and this is the function I created and worked:

 Future<bool> uploadImage(
    String imageFilePath,
    Uint8List imageBytes,
  ) async {
    String url = SERVERURL + "/uploadRoute";
    PickedFile imageFile = PickedFile(imageFilePath);
    var stream =
        new http.ByteStream(DelegatingStream.typed(imageFile.openRead()));

    var uri = Uri.parse(url);
    int length = imageBytes.length;
    var request = new http.MultipartRequest("POST", uri);
    var multipartFile = new http.MultipartFile('files', stream, length,
        filename: basename(imageFile.path),
        contentType: MediaType('image', 'png'));

    request.files.add(multipartFile);
    var response = await request.send();
    print(response.statusCode);
    response.stream.transform(utf8.decoder).listen((value) {
      print(value); 
    });

I had this issue using Strapi and this solution worked like a charm.

Solution 2

Upload file during entry creation with Flutter

dio: ^3.0.10, mime: ^1.0.0 and http_parser.

The main part is the key name of the file if it's foo, so you have to change files.image with files.foo for file upload

final mimeType = mime.lookupMimeType(imageFile.path, headerBytes: [0xFF, 0xD8])?.split('/');

FormData formData = new FormData.fromMap(
  {
    "files.image": await MultipartFile.fromFile(
      imageFile.path,
      filename: imageFile.path.split('/').last,
      contentType: MediaType(mimeType?[0], mimeType?[1]),
    ),
    "data": jsonEncode({
      "title": title,
      "summary": summary,
      "content": content,
    }),
  },
);

Response response = await _dio.post(
  "/blogs",
  data: formData,
  options: Options(),
);

Comments

[Mohammad Hadi]

what is DelegatingStream ?

[Mehran Ullah]

Error: Unsupported operation: MultipartFile is only supported where dart:io is available.

[Muhammad Shafique]

Error: Unsupported operation: MultipartFile is only supported where dart:io is available.

[Keff]

The important bit for me was to add the content-type contentType: MediaType('image', 'png')