Skip to content

Commit 2e82864

Browse files
SyncfusionBuildSyncfusionBuild
authored
Merge pull request #5733 from Syncfusion-Content/development
DOCINFRA-2341_merged_using_automation
2 parents 3dfd194 + cb4ef5f commit 2e82864

File tree

5 files changed

+128
-1
lines changed

5 files changed

+128
-1
lines changed

‎blazor-toc.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2904,6 +2904,7 @@
29042904
<li> <a href="/blazor/file-upload/template">Template</a></li>
29052905
<li> <a href="/blazor/file-upload/validation">Validation</a></li>
29062906
<li> <a href="/blazor/file-upload/style-appearance">Style and Appearance</a></li>
2907+
<li> <a href="/blazor/file-upload/http-client">Http Client</a></li>
29072908
<li>How To
29082909
<ul>
29092910
<li> <a href="/blazor/file-upload/how-to/getting-started-with-blazor-webassembly">Getting Started with Blazor WebAssembly</a></li>

‎blazor/file-upload/http-client.md

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
---
2+
layout: post
3+
title: HTTP Client in Blazor File Upload Component | Syncfusion
4+
description: Learn about using HTTP Client with the Syncfusion Blazor File Upload component for handling file uploads with customized requests.
5+
platform: Blazor
6+
control: File Upload
7+
documentation: ug
8+
---
9+
10+
# HTTP Client in Blazor File Upload Component
11+
12+
The File Upload component in Blazor enables you to utilize the [HttpClientInstance](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_HttpClientInstance) property to append the HttpClient instance to file upload requests, allowing for customized request headers and form data. This approach offers flexibility in managing authentication and custom request configurations.
13+
14+
The following example illustrates how to configure the File Upload component with HttpClient in a Blazor application.
15+
16+
```cshtml
17+
@using Syncfusion.Blazor.Inputs
18+
@using Syncfusion.Blazor.Buttons
19+
@inject HttpClient httpClient;
20+
21+
<div class="col-lg-12">
22+
<div class="col-lg-8 control-section sb-property-border">
23+
<div class="control-wrapper">
24+
<SfUploader HttpClientInstance="@httpClient">
25+
<UploaderAsyncSettings SaveUrl="https://your_api.com/Save"
26+
RemoveUrl="https://your_api.com/Remove"></UploaderAsyncSettings>
27+
</SfUploader>
28+
</div>
29+
</div>
30+
</div>
31+
32+
@code {
33+
34+
protected override async Task OnInitializedAsync()
35+
{
36+
// Adding authorization header to HTTP client
37+
httpClient.DefaultRequestHeaders.Add("Authorization_1", "syncfusion");
38+
await base.OnInitializedAsync();
39+
}
40+
}
41+
```
42+
43+
{% tabs %}
44+
{% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %}
45+
46+
...
47+
using Syncfusion.Blazor;
48+
49+
var builder = WebApplication.CreateBuilder(args);
50+
51+
// Add services to the container.
52+
builder.Services.AddRazorComponents()
53+
.AddInteractiveServerComponents();
54+
builder.Services.AddSyncfusionBlazor();
55+
builder.Services.AddScoped(sp =>
56+
{
57+
var httpClient = new HttpClient
58+
{
59+
BaseAddress = new Uri("https://your_api.com/")
60+
};
61+
62+
// Add custom header
63+
httpClient.DefaultRequestHeaders.Add("Custom-Header", "YourCustomValue");
64+
return httpClient;
65+
});
66+
var app = builder.Build();
67+
....
68+
69+
{% endhighlight %}
70+
{% endtabs %}

‎blazor/mention/code-snippet/require-leading-space.razor

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
@using Syncfusion.Blazor.DropDowns
2+
3+
<SfMention TItem="UserData" DataSource="@data" RequireLeadingSpace="false">
4+
<TargetComponent>
5+
<div id="commentsMention" placeholder="Type @@ and tag user" ></div>
6+
</TargetComponent>
7+
<ChildContent>
8+
<MentionFieldSettings Text="Name" Value="EmailId"></MentionFieldSettings>
9+
</ChildContent>
10+
</SfMention>
11+
12+
<style>
13+
#commentsMention {
14+
min-height: 100px;
15+
border: 1px solid #D7D7D7;
16+
border-radius: 4px;
17+
padding: 8px;
18+
font-size: 14px;
19+
width: 600px;
20+
}
21+
div#commentsMention[placeholder]:empty:before {
22+
content: attr(placeholder);
23+
color: #555;
24+
}
25+
</style>
26+
27+
@code {
28+
29+
public class UserData
30+
{
31+
public string Name { get; set; }
32+
public string EmailId { get; set; }
33+
}
34+
35+
public List<UserData> data = new List<UserData>()
36+
{
37+
new UserData { Name = "Selma Rose", EmailId = "selma@gmail.com" },
38+
new UserData { Name = "Maria", EmailId = "maria@gmail.com" },
39+
new UserData { Name = "Russo kay", EmailId = "russo@gmail.com" },
40+
new UserData { Name = "Robert", EmailId = "robert@gmail.com" },
41+
new UserData { Name = "Garth", EmailId = "garth@gmail.com" }
42+
};
43+
44+
}

‎blazor/mention/customization.md

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,4 +55,16 @@ The [MentionChar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDo
5555

5656
{% endhighlight %}
5757

58-
![Blazor Mention with trigger character](./images/blazor-mention-trigger-char.png)
58+
![Blazor Mention with trigger character](./images/blazor-mention-trigger-char.png)
59+
60+
## Leading Space Requirement
61+
62+
You can control whether a space is required before the mention character using the [RequireLeadingSpace](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMention-1.html#properties) property in the Mention component. When set to `true` , a space must precede the mention character to trigger the suggestion popup. When set to `false`, the mention character can trigger suggestions without requiring a leading space.
63+
64+
{% highlight razor %}
65+
66+
{% include_relative code-snippet/require-leading-space.razor %}
67+
68+
{% endhighlight %}
69+
70+
![Blazor Mention with leading space configuration](./images/require_leading_space.gif)

‎blazor/mention/images/require_leading_space.gif

38.5 KB
Loading

0 commit comments

Comments
 (0)