How to add headers and additional data for server-side image upload in Blazor Rich Text Editor?

When working with a Blazor Rich Text Editor, you may need to send additional headers and data to the server during an image upload. This can be achieved by utilizing the OnImageSelected event provided by the Rich Text Editor component. Below is a guide on how to add headers and custom form data for the image upload process.

Configuring the Rich Text Editor

First, you need to define the SfRichTextEditor component in your markup. Within this component, you specify the RichTextEditorEvents with the OnImageSelected event handler. Additionally, you set the RichTextEditorImageSettings with the appropriate SaveUrl and Path properties.

<SfRichTextEditor>
    <RichTextEditorEvents OnImageSelected="@onSelected"></RichTextEditorEvents >
    <RichTextEditorImageSettings SaveUrl="api/Home/Save" Path="./Images/">
</RichTextEditorImageSettings>
</SfRichTextEditor>

Implementing the Event Handler

The OnImageSelected event handler is where you will add the necessary headers and custom form data. This is done by modifying the args.CurrentRequest and args.CustomFormData properties.

@code{
    private void onSelected(Syncfusion.Blazor.Inputs.SelectedEventArgs args)
    {
        // Adding Headers
        args.CurrentRequest = new List<object> { new { Authorization = "Syncfusion Test" } };
        // adding custom Form Data
        args.CustomFormData = new List<object> {
            new { submitId = "RTE" },
            new { workgroupId = "2" }
        };
    }
}

In the above code block, the Authorization header is added with a value of “Syncfusion Test”. Additionally, custom form data with submitId and workgroupId is included.

Additional References

For more detailed information on the OnImageSelected event and server side action related to the Rich Text Editor, you can refer to the official Syncfusion documentation:

• Syncfusion Blazor Rich Text Editor Events Documentation
• Insert image in Rich Text Editor with server side action

By following the steps outlined above, you can successfully send custom headers and additional data to the server during the image upload process in a Rich Text Editor.

Conclusion

I hope you enjoyed learning how to add headers and additional data for server-side image upload in Blazor Rich Text Editor.

You can refer to our Blazor Rich Text Editor feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Blazor Rich Text Editor example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!