How to save the new inserted image in custom directory

[jasamin]

Is there an existing issue for this?

• I have searched the existing issues

Steps to reproduce

I ran the sample code, after selecting a photo from the gallery and returning a new string in the method '_onImagePickCallback', However, the URL of the image in 'controller.document' is still with 'file.path', May I ask how the current version should be replaced in document ?

Expected results

[{"insert":{"Change to costom url string"}},{"insert":"\n"}]

Actual results

[{"insert":{"image":"/data/user/0/com.example.example/cache/image_cropper_1699932556689.jpg"}},{"insert":"\n"}]

Code sample

embedButtons: FlutterQuillEmbeds.toolbarButtons(

            formulaButtonOptions: const QuillToolbarFormulaButtonOptions(),

            cameraButtonOptions: const QuillToolbarCameraButtonOptions(),

            imageButtonOptions: QuillToolbarImageButtonOptions(

              imageButtonConfigurations: QuillToolbarImageConfigurations(
                onImageInsertedCallback: (image) async {
                  _onImagePickCallback(File(image));
                },

                onImageInsertCallback: onImageInsert,
              ),
            ),
          )

// 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 {
    return 'Change to costom url string';
  }

Screenshots or Video

Screenshots / Video demonstration

[Upload media here]

Logs

Logs

[Paste your logs here]

Flutter Doctor output (optional)

No response

[EchoEllet]

Hi, thank you for the report, I will check it out in a few moments

[EchoEllet]

I see what you mean but this is just an example, image cropper is not used by default in flutter_quill_extensions
And the example is a little bit outdated, thank you for mentioning that I will update the example

The new way of inserting an image is by using onImageInsertCallback which is a code that should be executed to insert the image

The default is:

OnImageInsertCallback defaultOnImageInsertCallback() {
  return (imageUrl, controller) async {
    controller
      ..skipRequestKeyboard = true
      ..insertImageBlock(imageSource: imageUrl);
  };
}

[EchoEllet]

Please let me know if you have any other questions

[EchoEllet]

Is there an existing issue for this?

• I have searched the existing issues

Steps to reproduce

I ran the sample code, after selecting a photo from the gallery and returning a new string in the method '_onImagePickCallback', However, the URL of the image in 'controller.document' is still with 'file.path', May I ask how the current version should be replaced in document ?

Expected results

[{"insert":{"Change to costom url string"}},{"insert":"\n"}]

Actual results

[{"insert":{"image":"/data/user/0/com.example.example/cache/image_cropper_1699932556689.jpg"}},{"insert":"\n"}]

Code sample

embedButtons: FlutterQuillEmbeds.toolbarButtons(

            formulaButtonOptions: const QuillToolbarFormulaButtonOptions(),

            cameraButtonOptions: const QuillToolbarCameraButtonOptions(),

            imageButtonOptions: QuillToolbarImageButtonOptions(

              imageButtonConfigurations: QuillToolbarImageConfigurations(
                onImageInsertedCallback: (image) async {
                  _onImagePickCallback(File(image));
                },

                onImageInsertCallback: onImageInsert,
              ),
            ),
          )

// 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 {
    return 'Change to costom url string';
  }

Screenshots or Video

Screenshots / Video demonstration

Logs

Logs

Flutter Doctor output (optional)

No response

We have remade the example

If you still facing any other issues or have any other questions feel free to ask us on GitHub at any time.

[jasamin]

I see that. Thank you for your support 😊