Adding Headers and Additional Data to Uploaded Images in Rich Text Editor

When working with images in the Rich Text Editor, you may need to add headers and additional data during the upload process. This can be achieved by handling the OnImageSelected event. Below is a guide on how to implement this functionality using Syncfusion Blazor components.

To add headers and additional data for an image uploaded in the Rich Text Editor, you can use the OnImageSelected event. This event is triggered when an image is selected for upload. Here’s how you can define the event and add the necessary data:

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

@code{
    private void onselected(Syncfusion.Blazor.Inputs.SelectedEventArgs args)
    {
        // Adding Headers
        args.CurrentRequest = new List<object> { new { Authorization = "Your Authorization Token" } };
        // Adding custom Form Data
        args.CustomFormData = new List<object> {
            new { summitId = "Your Summit ID" },
            new { workgroupId = "Your Workgroup ID" }
        };
    }
}

In the code snippet above, the OnImageSelected event is handled by the onselected method. Within this method, you can specify the headers and additional form data that should be sent along with the image upload request.

Headers

The headers are added to the CurrentRequest property of the args parameter. In the example, an authorization header is added. Replace "Your Authorization Token" with the actual token required for your application.

Custom Form Data

The custom form data is added to the CustomFormData property of the args parameter. This data can include any additional information that needs to be sent with the image upload. Replace "Your Summit ID" and "Your Workgroup ID" with the actual values relevant to your application.

References

For more detailed information on the OnImageSelected event and other events available in the Syncfusion Blazor Rich Text Editor, please refer to the official Syncfusion documentation:

• Syncfusion Blazor RichTextEditor Events Documentation

By following the steps outlined above, you can successfully add headers and additional data to images in the Rich Text Editor, ensuring that your image uploads are handled with the necessary context and authorization.