Image uploading doesn't work on Web [Web]

[EshanNimesha01]

Image uploading doesn't work on Web

Error: MissingPluginException(No implementation found for method getApplicationDocumentsDirectory on channel plugins.flutter.io/path_provider)
at Object.throw_ [as throw] (http://localhost:65041/dart_sdk.js:5032:11)
at platform_channel.MethodChannel.new._invokeMethod (http://localhost:65041/packages/flutter/src/services/system_channels.dart.lib.js:953:21)
at _invokeMethod.next ()
at http://localhost:65041/dart_sdk.js:37210:33
at _RootZone.runUnary (http://localhost:65041/dart_sdk.js:37081:59)
at _FutureListener.thenAwait.handleValue (http://localhost:65041/dart_sdk.js:32337:29)
at handleValueCallback (http://localhost:65041/dart_sdk.js:32864:49)
at Function._propagateToListeners (http://localhost:65041/dart_sdk.js:32902:17)
at _Future.new.[_completeWithValue] (http://localhost:65041/dart_sdk.js:32750:23)
at async._AsyncCallbackEntry.new.callback (http://localhost:65041/dart_sdk.js:32771:35)
at Object._microtaskLoop (http://localhost:65041/dart_sdk.js:37333:13)
at _startMicrotaskLoop (http://localhost:65041/dart_sdk.js:37339:13)
at http://localhost:65041/dart_sdk.js:33110:9

[souzaavi]

This is not the issue with the library.
Due to Security reasons u don't have access to the file system in the web (you may except this in future). and also the getApplicationDocumentsDirectory() method belongs to path_provider library. In web this will not work due to the above mentioned reason. But now as a solution what you can do is

In File class you have a method called readAsBytes() and readAsBytesSync() it returns Future and Unit8List respectively. so using tis method u can retrieve image bytes. so using this you upload the file using a multipart request to any of your server. Then return that uploaded Image's url from _onImagePickCallback function

Example:

// Renders the image picked by imagePicker from local file storage
// You can also upload the picked image to any server (eg : AWS s3 or Firebase) and then return the uploaded image URL
final base_url = "YOUR_SERVER_BASE_URL";
// import 'package:http/http.dart' as http;
Future _onImagePickCallback(File file) async {
final imageBytes = file.readAsBytesSync();

final req = http.MultipartRequest(
  'POST',
  Uri.parse(
    '$base_url/api/v1/<API_WHICH_IS_USED_TO_UPLOAD_AND_STORE_IN_SERVER>',
  ),
);

req.headers.putIfAbsent('Content-Type', () => 'multipart/form-data');

req.files.add(
  http.MultipartFile.fromBytes(
    'image',
    imageBytes,
  ),
);

final streamedResponse = await req.send();
final response = await http.Response.fromStream(streamedResponse);
final decodedJSON = json.decode(response.body);
/* Sample JSON FROM YOUR API RESPONSE
* {
*   'data': {
*     'url': "https://URL_FOR_YOUR_UPLOADED_FILE",
*     'field_1': "Field_data",
*     ..
*     ..
*     ..
*   }
* }
* */
return decodedJSON['data']['url'];

}

You can refer this article to upload image to amazon s3

You can refer this article to upload image to Firebase Storage

[rsegecin]

I understand that it is impractical to have an actual image or any other document added into Quill data format but also having every image uploaded might be unnecessary in an editing phase of the Rich Text Document and it would be better to upload just the final files when the Rich Text is submitted. I think Quill could be improved by letting us to add something like "Path Place Holders" and we could just tell what file and type of the file it would be on the generated paths. Can this thread become a feature request?

[rsegecin]

Hi again, for anyone looking for Quill to work on web, here goes what I've done:

class ImageEmbedBuilderWeb implements EmbedBuilder {
  @override
  String get key => BlockEmbed.imageType;

  @override
  Widget build(
    BuildContext context,
    QuillController controller,
    Embed node,
    bool readOnly,
  ) {
    final imageUrl = node.value.data;
    final isBase64Image = isImageBase64(imageUrl);
    var elementName = '';

    if (isBase64Image) {
      elementName = md5.convert(utf8.encode(imageUrl)).toString();
      UniversalUI().platformViewRegistry.registerViewFactory(
          elementName,
          (viewId) =>
              html.ImageElement()..src = 'data:image/png;base64,' + imageUrl);
    } else {
      UniversalUI().platformViewRegistry.registerViewFactory(
          imageUrl, (viewId) => html.ImageElement()..src = imageUrl);
    }
    final size = MediaQuery.of(context).size;
    return Center(
      child: SizedBox(
        height: 300,
        width: 400,
        child: HtmlElementView(
          viewType: isBase64Image ? elementName : imageUrl,
        ),
      ),
    );
  }
}

PlatformFile? _platFormFile;

// Renders the image picked by imagePicker from local file storage
// You can also upload the picked image to any server (eg : AWS s3
// or Firebase) and then return the uploaded image URL.
Future<String> _onImagePickCallback(File file) async {
  // Copies the picked file from temporary cache to applications directory

  if (kIsWeb) {
    if (_platFormFile != null) {
      return base64Encode(_platFormFile!.bytes!);
    } else {
      return '';
    }
  } else {
    final appDocDir = await getApplicationDocumentsDirectory();
    final copiedFile =
        await file.copy('${appDocDir.path}/${basename(file.path)}');
    return copiedFile.path.toString();
  }
}

Future<String?> _webImagePickImpl(
    OnImagePickCallback onImagePickCallback) async {
  final result = await FilePicker.platform.pickFiles();
  if (result == null) {
    return null;
  }

  // Take first, because we don't allow picking multiple files.
  final fileName = result.files.first.name;
  final file = File(fileName);

  if (kIsWeb && (result.files[0].bytes != null)) {
    //file.writeAsBytesSync(result.files[0].bytes!);
    _platFormFile = result.files[0];
  }

  return onImagePickCallback(file);
}

I'd like to know if there's way of converting a PlatformFile into a File because you can't write to it, that's why I'm "passing" the file from _webImagePickImpl to _onImagePickCallback through the local variable _platFormFile.
It's not elegant but it does work, now you just need to keep track what files were added and upload them after the RTD is submitted.

[nay-kang]

I had a solution is using MemoryFileSystem create a virtual file in web env

Future<String> onImagePickCallback(File file) async {
  var imageBytes = await compressImage(file);
  var base64image = base64.encode(imageBytes);
  return "data:image/webp;base64,$base64image";
}

Future<String?> webImagePickImpl(
    OnImagePickCallback onImagePickCallback) async {
  final result = await FilePicker.platform.pickFiles();
  if (result == null) {
    return null;
  }
  var webFile = result.files.first;
  var mfs = MemoryFileSystem();

  File file = mfs.file('temp.jpg');
  file.writeAsBytes(webFile.bytes!.toList());
  return onImagePickCallback(file);
}

But I don't know how to pass default style to imageEmbedBuilder