How to include authorization headers in RTE Path (GET) requests?
Good afternoon,
I’m having issues with the Blazor Rich Text Editor (RTE).
<SfRichTextEditor @bind-Value="Model.Optare.TBOPTARE.OPTARE_DS"
Height="100%"
CssClass="tarefa-descricao"
EnableResize="true"
AutoSaveOnIdle="true"
@bind-IsFullScreen="isDescricaoFullScreen">
<RichTextEditorToolbarSettings EnableFloating="true" />
<RichTextEditorImageSettings SaveUrl="https://localhost:7001/op/salvar-arquivo"
Path="https://localhost:7001/op/buscar-arquivo" />
<RichTextEditorEvents BeforeUploadImage="OnImageUpload"
ValueChange="BreafingValueChanged" />
</SfRichTextEditor>When uploading an image, I have no issues — I can intercept the request using OnImageUpload and add a custom header (Bearer token).
However, for image GET requests, there seems to be no event or option to add a header before the request is made.
How can I intercept or customize the image GET requests made by the RTE to include my authorization header?
Thank you in advance.
Hi ,
We’d like to clarify that our implementation exclusively uses POST requests when uploading images to the server.
Could you kindly share an example where a GET request is being used for image upload, or provide insight into how the request is being handled within the RichTextEditor? This will help us better understand the behavior and align our integration accordingly.
Regards,
Vinitha
"Hi Vinitha, Thanks for the quick reply — I think there’s a small misunderstanding. I’m not saying the RTE uses GET to upload images. Upload is indeed done via POST (SaveUrl) and that part works fine — I intercept the upload in The problem is the subsequent GET request that the RTE/browser performs to load the image after it’s been uploaded (the request to the Example (RTE snippet): Flow: Because of that, if my If helpful, I can provide a minimal repro repo or network traces showing the GET failing due to missing Authorization header. Thanks for looking into this. Best regards"BeforeUploadImage / OnImageUpload and successfully add an Authorization: Bearer <token> header to that POST.Path URL). The RTE inserts an <img src="..."> pointing to the Path (or uses the url returned by SaveUrl), and the browser performs a plain GET to fetch the image. There’s no RTE event or client-side hook that lets me attach a custom header to that GET (and browsers do not allow adding arbitrary headers to normal img requests).<RichTextEditorImageSettings
SaveUrl="/api/op/salvar-arquivo"
RemoveUrl="/api/op/remover-arquivo"
Path="/api/op/buscar-arquivo/" />POST /api/op/salvar-arquivo — I intercept and add Authorization header here, upload succeeds.<img src="/api/op/buscar-arquivo/<generated-name>">.GET /api/op/buscar-arquivo/<generated-name> without my custom header, and I have no RTE event to add it.GET endpoint requires Authorization: Bearer ..., the image load fails. My ask is: is there any supported way in the RTE to (a) attach headers to the GET request used to load the image, or (b) provide some client-side hook so I can customize how the image is fetched (for example using fetch/XHR with headers and then create an object URL)? If neither is possible, what is the Syncfusion recommended pattern for secure image serving when GET requests must be authorized? (Possible alternatives I’m considering: cookie-based auth, signed short-lived tokens in the returned URL, or making the Path public — but I’d prefer an official recommended approach.)
