Skip to content

Commit 424350c

Browse files
dimodidimodi
committed
docs(common): Fix broken REPL examples
1 parent edd6be7 commit 424350c

File tree

1 file changed

+58
-71
lines changed

1 file changed

+58
-71
lines changed

‎components/fileselect/events.md‎

Lines changed: 58 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -39,102 +39,85 @@ Property | Type | Description
3939
4040
## OnSelect
4141

42-
The `OnSelect` fires when one or more files have been selected. The selection of files is achieved either through the **Select files** button or by dropping the files anywhere in the component.
42+
The `OnSelect` fires when one or more files have been selected. The selection of files is achieved either through the **Select Files** button or by dropping the files anywhere in the component.
4343

4444
The event handler receives a [`FileSelectEventArgs` object](#fileselectfileinfo), which contains a list of `FileInfo` objects that allow the processing of the files.
4545

46-
>caption Handling the `OnSelect` event of the FileSelect
46+
See the [example below](#example).
4747

48-
````RAZOR
49-
@*Handle the OnSelect event of the FileSelect to access the selected files and upload them*@
48+
## OnRemove
49+
50+
The `OnRemove` fires when a file has been removed from the list of selected files either by clicking the **x** icon or by pressing the `Del` key.
51+
52+
The event handler receives a [`FileSelectEventArgs` object](#fileselectfileinfo). As the FileSelect component allows deleting one item at a time, the collection contains only one `FileSelectFileInfo` object (the deleted one).
5053

51-
@using System.IO
52-
@using Microsoft.AspNetCore.Hosting
54+
## Example
55+
56+
>caption Handling the `OnSelect` and `OnRemove` events of the FileSelect
57+
58+
````RAZOR
5359
@using System.Threading
54-
@using Telerik.Blazor.Components.FileSelect
5560
56-
@inject IWebHostEnvironment HostingEnvironment
61+
@*This code works only in Blazor Server apps.*@
62+
@*@using Microsoft.AspNetCore.Hosting*@
63+
@*@inject IWebHostEnvironment HostingEnvironment*@
5764
58-
<div style="width:300px">
59-
<TelerikFileSelect OnSelect=@HandleFiles
60-
AllowedExtensions="@AllowedExtensions">
61-
</TelerikFileSelect>
62-
<div class="k-form-hint">
63-
Expected files: <strong>JPG, PNG, GIF</strong>
64-
</div>
65+
@* Avoid namespace conflict with SvgIcons.File *@
66+
@using IONS = System.IO
67+
68+
69+
<div class="k-form-hint">
70+
Expected files: <strong>@string.Join(", ", AllowedExtensions)</strong>
6571
</div>
6672
73+
<TelerikFileSelect AllowedExtensions="@AllowedExtensions"
74+
OnRemove="@RemoveFiles"
75+
OnSelect=@HandleFiles>
76+
</TelerikFileSelect>
77+
6778
@code {
68-
public List<string> AllowedExtensions { get; set; } = new List<string>() { ".jpg", ".png", ".gif" };
69-
public Dictionary<string, CancellationTokenSource> Tokens { get; set; } = new Dictionary<string, CancellationTokenSource>();
79+
private readonly List<string> AllowedExtensions = new() { ".jpg", ".png", ".gif" };
80+
81+
private Dictionary<string, CancellationTokenSource> Tokens { get; set; } = new();
7082
7183
private async Task HandleFiles(FileSelectEventArgs args)
7284
{
7385
foreach (var file in args.Files)
7486
{
7587
if (!file.InvalidExtension)
7688
{
77-
// save to local file system
78-
await UploadFile(file);
79-
// or read file in-memory
80-
//await ReadFile(file);
89+
// Read file in-memory.
90+
await ReadFile(file);
91+
92+
// OR
93+
94+
// Save to local file system.
95+
// This works ony in server apps and the Upload component may be a better choice.
96+
//await UploadFile(file);
8197
}
8298
}
8399
}
84100
85-
private async Task UploadFile(FileSelectFileInfo file)
86-
{
87-
// This code will work in Blazor Server apps.
88-
// Saving files on the user device is not allowed in WebAssembly apps.
89-
Tokens.Add(file.Id, new CancellationTokenSource());
90-
var path = Path.Combine(HostingEnvironment?.WebRootPath, file.Name);
91-
await using FileStream fs = new FileStream(path, FileMode.Create);
92-
await file.Stream.CopyToAsync(fs, Tokens[file.Id].Token);
93-
}
94-
95101
private async Task ReadFile(FileSelectFileInfo file)
96102
{
97103
Tokens.Add(file.Id, new CancellationTokenSource());
98-
var byteArray = new byte[file.Size];
99-
await using MemoryStream ms = new MemoryStream(byteArray);
104+
byte[] byteArray = new byte[file.Size];
105+
await using IONS.MemoryStream ms = new(byteArray);
100106
await file.Stream.CopyToAsync(ms, Tokens[file.Id].Token);
101107
}
102-
}
103-
````
104108
109+
private async Task UploadFile(FileSelectFileInfo file)
110+
{
111+
// This code works only in Blazor Server apps.
112+
// Saving files on the user device is not allowed in WebAssembly apps.
105113
106-
## OnRemove
107-
108-
The `OnRemove` fires when a file has been removed from the list of selected files either by clicking the **x** icon or by pressing the `Del` key.
109-
110-
The event handler receives a [`FileSelectEventArgs` object](#fileselectfileinfo). As the FileSelect component allows deleting one item at a time, the collection contains only one `FileSelectFileInfo` object (the deleted one).
111-
112-
>caption Handling the `OnRemove` event of the FileSelect
113-
114-
````RAZOR
115-
@*Handle the OnRemove event of the FileSelect to access and delete the uploaded files*@
116-
117-
@using System.IO
118-
@using Microsoft.AspNetCore.Hosting
119-
@using System.Threading
120-
@using Telerik.Blazor.Components.FileSelect
121-
122-
@inject IWebHostEnvironment HostingEnvironment
123-
124-
<div style="width:300px">
125-
<TelerikFileSelect OnRemove=@HandleRemoveFiles
126-
AllowedExtensions="@AllowedExtensions">
127-
</TelerikFileSelect>
128-
<div class="k-form-hint">
129-
Expected files: <strong>JPG, PNG, GIF</strong>
130-
</div>
131-
</div>
132-
133-
@code {
134-
public List<string> AllowedExtensions { get; set; } = new List<string>() { ".jpg", ".png", ".gif" };
135-
public Dictionary<string, CancellationTokenSource> Tokens { get; set; } = new Dictionary<string, CancellationTokenSource>();
114+
//Tokens.Add(file.Id, new CancellationTokenSource());
115+
//string path = Path.Combine(HostingEnvironment.WebRootPath, file.Name);
116+
//await using FileStream fs = new FileStream(path, FileMode.Create);
117+
//await file.Stream.CopyToAsync(fs, Tokens[file.Id].Token);
118+
}
136119
137-
private async Task HandleRemoveFiles(FileSelectEventArgs args)
120+
private async Task RemoveFiles(FileSelectEventArgs args)
138121
{
139122
foreach (var file in args.Files)
140123
{
@@ -144,19 +127,23 @@ The event handler receives a [`FileSelectEventArgs` object](#fileselectfileinfo)
144127
145128
await Task.Delay(1);
146129
147-
var path = Path.Combine(HostingEnvironment?.WebRootPath, file.Name);
130+
// This code works only in Blazor Server apps.
131+
// Saving files on the user device is not allowed in WebAssembly apps.
148132
149-
// Remove the file from the file system
150-
File.Delete(path);
151-
}
133+
//string path = Path.Combine(HostingEnvironment.WebRootPath, file.Name);
152134
135+
//if (IONS.File.Exists(path))
136+
//{
137+
// // Remove the file from the file system
138+
// IONS.File.Delete(path);
139+
//}
140+
}
153141
}
154142
}
155143
````
156144

157145
@[template](/_contentTemplates/common/general-info.md#event-callback-can-be-async)
158146

159-
160147
## See Also
161148

162149
* [Live Demo: Blazor FileSelect Events](https://demos.telerik.com/blazor-ui/fileselect/events)

0 commit comments

Comments
 (0)