Skip to content

Commit 4907302

Browse files
authored
Merge pull request #6167 from syncfusion-content/965259-max-blz
965259: Need to add the maxfileSize property
2 parents b3b4206 + 287a7ef commit 4907302

File tree

5 files changed

+109
-83
lines changed

5 files changed

+109
-83
lines changed

blazor/rich-text-editor/tools/audio.md

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -49,20 +49,6 @@ In the audio dialog, using the `browse` option, select the audio from the local
4949

5050
If the path field is not specified in the [RichTextEditorAudioSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorAudioSettings.html), the audio will be converted into `Blob` url or `Base64` and inserted inside the Rich Text Editor.
5151

52-
### Restrict audio upload based on size
53-
54-
Using the Rich Text Editor `FileUploading` event, you can restrict the audio to upload when the given audio size is greater than the allowed fileSize. Also, the audio size in the argument will be returned in `bytes`.
55-
56-
In the following illustration, the audio size has been validated before uploading, and it is determined whether the audio has been uploaded or not.
57-
58-
{% tabs %}
59-
{% highlight cshtml %}
60-
61-
{% include_relative code-snippet/audio-restrict.razor %}
62-
63-
{% endhighlight %}
64-
{% endtabs %}
65-
6652
### Server-side action
6753

6854
The selected audio can be uploaded to the required destination using the controller action below. Map this method name in [RichTextEditorMediaSettings.SaveUrl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorMediaSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorMediaSettings_SaveUrl) and provide the required destination path through [RichTextEditorMediaSettings.Path](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorMediaSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorMediaSettings_Path) properties.
@@ -165,6 +151,20 @@ N> By default, the files are saved in the `Blob` format.
165151
166152
```
167153

154+
## Maximum file size restriction
155+
156+
By using the Rich Text Editor's [RichTextEditorAudioSettings.MaxFileSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorAudioSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorAudioSettings_MaxFileSize) property, you can restrict the audio to upload when the given audio size is greater than the allowed fileSize.
157+
158+
In the following illustration, the audio size has been validated before uploading, and it is determined whether the audio has been uploaded or not.
159+
160+
{% tabs %}
161+
{% highlight cshtml %}
162+
163+
{% include_relative code-snippet/audio-restrict.razor %}
164+
165+
{% endhighlight %}
166+
{% endtabs %}
167+
168168
## Replacing audio
169169

170170
Once an audio file has been inserted, you can change it using the Rich Text Editor [RichTextEditorQuickToolbarSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorQuickToolbarSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorQuickToolbarSettings_Audio) “Replace” option. You can replace the audio file using the web URL or the browse option in the audio dialog.
Lines changed: 19 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,28 @@
11
@using Syncfusion.Blazor.RichTextEditor;
22
<SfRichTextEditor>
33
<RichTextEditorToolbarSettings Items="@Items" />
4-
<RichTextEditorEvents FileUploading="@onFileUploading"></RichTextEditorEvents>
5-
<RichTextEditorAudioSettings SaveUrl="https://aspnetmvc.syncfusion.com/services/api/uploadbox/Save" Path="../Files/"></RichTextEditorAudioSettings>
4+
<RichTextEditorAudioSettings MaxFileSize="30000000"></RichTextEditorAudioSettings>
65
</SfRichTextEditor>
76
@code {
87
private List<ToolbarItemModel> Items = new List<ToolbarItemModel>()
98
{
10-
new ToolbarItemModel() { Command = ToolbarCommand.Audio }
9+
new ToolbarItemModel() { Command = ToolbarCommand.Audio },
10+
new ToolbarItemModel() { Command = ToolbarCommand.Bold },
11+
new ToolbarItemModel() { Command = ToolbarCommand.Italic },
12+
new ToolbarItemModel() { Command = ToolbarCommand.Underline },
13+
new ToolbarItemModel() { Command = ToolbarCommand.Separator },
14+
new ToolbarItemModel() { Command = ToolbarCommand.Formats },
15+
new ToolbarItemModel() { Command = ToolbarCommand.Alignments },
16+
new ToolbarItemModel() { Command = ToolbarCommand.OrderedList },
17+
new ToolbarItemModel() { Command = ToolbarCommand.UnorderedList },
18+
new ToolbarItemModel() { Command = ToolbarCommand.Separator },
19+
new ToolbarItemModel() { Command = ToolbarCommand.CreateLink },
20+
new ToolbarItemModel() { Command = ToolbarCommand.CreateTable },
21+
new ToolbarItemModel() { Command = ToolbarCommand.Image },
22+
new ToolbarItemModel() { Command = ToolbarCommand.Separator },
23+
new ToolbarItemModel() { Command = ToolbarCommand.SourceCode },
24+
new ToolbarItemModel() { Command = ToolbarCommand.Separator },
25+
new ToolbarItemModel() { Command = ToolbarCommand.Undo },
26+
new ToolbarItemModel() { Command = ToolbarCommand.Redo }
1127
};
12-
13-
private void onFileUploading(FileUploadingEventArgs args)
14-
{
15-
var imgSize = 500000;
16-
var sizeInBytes = args.FilesData[0].Size;
17-
if ( imgSize < sizeInBytes ) {
18-
args.Cancel = true;
19-
}
20-
}
2128
}
Lines changed: 19 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,28 @@
11
@using Syncfusion.Blazor.RichTextEditor;
22
<SfRichTextEditor>
33
<RichTextEditorToolbarSettings Items="@Items" />
4-
<RichTextEditorEvents FileUploading="@onFileUploading"></RichTextEditorEvents>
5-
<RichTextEditorVideoSettings SaveUrl="https://aspnetmvc.syncfusion.com/services/api/uploadbox/Save" Path="../Files/"></RichTextEditorVideoSettings>
4+
<RichTextEditorVideoSettings MaxFileSize="30000000"></RichTextEditorVideoSettings>
65
</SfRichTextEditor>
76
@code {
87
private List<ToolbarItemModel> Items = new List<ToolbarItemModel>()
98
{
10-
new ToolbarItemModel() { Command = ToolbarCommand.Video }
9+
new ToolbarItemModel() { Command = ToolbarCommand.Video },
10+
new ToolbarItemModel() { Command = ToolbarCommand.Bold },
11+
new ToolbarItemModel() { Command = ToolbarCommand.Italic },
12+
new ToolbarItemModel() { Command = ToolbarCommand.Underline },
13+
new ToolbarItemModel() { Command = ToolbarCommand.Separator },
14+
new ToolbarItemModel() { Command = ToolbarCommand.Formats },
15+
new ToolbarItemModel() { Command = ToolbarCommand.Alignments },
16+
new ToolbarItemModel() { Command = ToolbarCommand.OrderedList },
17+
new ToolbarItemModel() { Command = ToolbarCommand.UnorderedList },
18+
new ToolbarItemModel() { Command = ToolbarCommand.Separator },
19+
new ToolbarItemModel() { Command = ToolbarCommand.CreateLink },
20+
new ToolbarItemModel() { Command = ToolbarCommand.CreateTable },
21+
new ToolbarItemModel() { Command = ToolbarCommand.Image },
22+
new ToolbarItemModel() { Command = ToolbarCommand.Separator },
23+
new ToolbarItemModel() { Command = ToolbarCommand.SourceCode },
24+
new ToolbarItemModel() { Command = ToolbarCommand.Separator },
25+
new ToolbarItemModel() { Command = ToolbarCommand.Undo },
26+
new ToolbarItemModel() { Command = ToolbarCommand.Redo }
1127
};
12-
13-
private void onFileUploading(FileUploadingEventArgs args)
14-
{
15-
var imgSize = 500000;
16-
var sizeInBytes = args.FilesData[0].Size;
17-
if ( imgSize < sizeInBytes ) {
18-
args.Cancel = true;
19-
}
20-
}
2128
}

blazor/rich-text-editor/tools/insert-image.md

Lines changed: 43 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -29,37 +29,6 @@ The image has been loaded from the local machine and it will be saved in the giv
2929
```
3030
N> If you want to insert many tiny images in the editor and don't want a specific physical location for saving images, opt to save the format as `Base64`.
3131

32-
### Restrict image upload based on size
33-
34-
By using the Rich Text Editor's [RichTextEditorEvents.OnImageUploading](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorEvents.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorEvents_OnImageUploadSuccess) event, you can get the image size before uploading and restrict the image to upload when the given image size is greater than the allowed size.
35-
36-
In the following code, the image size has been validated before uploading and it has been determined whether the image has been uploaded or not.
37-
38-
{% tabs %}
39-
{% highlight razor %}
40-
41-
@using Syncfusion.Blazor.RichTextEditor
42-
43-
<SfRichTextEditor>
44-
<RichTextEditorImageSettings SaveUrl="https://aspnetmvc.syncfusion.com/services/api/uploadbox/Save" Path="./Images/" />
45-
<RichTextEditorEvents BeforeUploadImage="@BeforeUploadImage" />
46-
</SfRichTextEditor>
47-
48-
@code {
49-
private void BeforeUploadImage(ImageUploadingEventArgs args)
50-
{
51-
var sizeInBytes = args.FilesData[0].Size;
52-
var imgSize = 500000;
53-
if (imgSize < sizeInBytes) {
54-
args.Cancel = true;
55-
}
56-
}
57-
}
58-
59-
{% endhighlight %}
60-
{% endtabs %}
61-
62-
N> You can't restrict while uploading an image as a hyperlink in the insert image dialog. When inserting images using the link, the editor does not allow you to limit the image size. You could not identify the image file size when the image was provided as a link.
6332

6433
### Server side action
6534

@@ -252,6 +221,49 @@ By default, the Rich Text Editor inserts the images in [Blob](https://help.syncf
252221
{% endhighlight %}
253222
{% endtabs %}
254223

224+
## Maximum file size restriction
225+
226+
By using the Rich Text Editor's [RichTextEditorImageSettings.MaxFileSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorImageSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorImageSettings_MaxFileSize) property, you can get the image size before uploading and restrict the image to upload when the given image size is greater than the allowed size.
227+
228+
In the following code, the image size has been validated before uploading and it has been determined whether the image has been uploaded or not.
229+
230+
{% tabs %}
231+
{% highlight razor %}
232+
233+
@using Syncfusion.Blazor.RichTextEditor
234+
235+
<SfRichTextEditor>
236+
<RichTextEditorImageSettings MaxFileSize="30000000" />
237+
</SfRichTextEditor>
238+
239+
@code {
240+
private List<ToolbarItemModel> Items = new List<ToolbarItemModel>()
241+
{
242+
new ToolbarItemModel() { Command = ToolbarCommand.Image },
243+
new ToolbarItemModel() { Command = ToolbarCommand.Bold },
244+
new ToolbarItemModel() { Command = ToolbarCommand.Italic },
245+
new ToolbarItemModel() { Command = ToolbarCommand.Underline },
246+
new ToolbarItemModel() { Command = ToolbarCommand.Separator },
247+
new ToolbarItemModel() { Command = ToolbarCommand.Formats },
248+
new ToolbarItemModel() { Command = ToolbarCommand.Alignments },
249+
new ToolbarItemModel() { Command = ToolbarCommand.OrderedList },
250+
new ToolbarItemModel() { Command = ToolbarCommand.UnorderedList },
251+
new ToolbarItemModel() { Command = ToolbarCommand.Separator },
252+
new ToolbarItemModel() { Command = ToolbarCommand.CreateLink },
253+
new ToolbarItemModel() { Command = ToolbarCommand.CreateTable },
254+
new ToolbarItemModel() { Command = ToolbarCommand.Separator },
255+
new ToolbarItemModel() { Command = ToolbarCommand.SourceCode },
256+
new ToolbarItemModel() { Command = ToolbarCommand.Separator },
257+
new ToolbarItemModel() { Command = ToolbarCommand.Undo },
258+
new ToolbarItemModel() { Command = ToolbarCommand.Redo }
259+
};
260+
}
261+
262+
{% endhighlight %}
263+
{% endtabs %}
264+
265+
N> You can't restrict while uploading an image as a hyperlink in the insert image dialog. When inserting images using the link, the editor does not allow you to limit the image size. You could not identify the image file size when the image was provided as a link.
266+
255267
## Delete image
256268

257269
To remove an image from the Rich Text Editor content, select the image and click the `Remove` tool from the quick toolbar. It will delete the image from the Rich Text Editor content.

blazor/rich-text-editor/tools/video.md

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -57,20 +57,6 @@ In the video dialog, by using the `browse` option, select the video from the loc
5757

5858
If the path field is not specified in the [RichTextEditorVideoSettings]https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorVideoSettings.html), the video will be converted into `Blob` url or `Base64` and inserted inside the Rich Text Editor.
5959

60-
### Restrict video upload based on size
61-
62-
Using the Rich Text Editor `FileUploading` event, you can restrict the video to upload when the given video size is greater than the allowed fileSize. Also, the video size in the argument will be returned in `bytes`.
63-
64-
In the following example, the video size has been validated before uploading and determined whether the video has been uploaded or not.
65-
66-
{% tabs %}
67-
{% highlight cshtml %}
68-
69-
{% include_relative code-snippet/video-restrict.razor %}
70-
71-
{% endhighlight %}
72-
{% endtabs %}
73-
7460
### Server-side action
7561

7662
The selected video can be uploaded to the required destination using the controller action below. Map this method name in [RichTextEditorMediaSettings.SaveUrl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorMediaSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorMediaSettings_SaveUrl) and provide required destination path through [RichTextEditorMediaSettings.Path](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorMediaSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorMediaSettings_Path) properties.
@@ -177,6 +163,20 @@ N> By default, the files are saved in the `Blob` format.
177163
178164
```
179165

166+
## Maximum file size restriction
167+
168+
By using the Rich Text Editor's [RichTextEditorVideoSettings.MaxFileSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorVideoSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorVideoSettings_MaxFileSize) property, you can restrict the video to upload when the given video size is greater than the allowed fileSize.
169+
170+
In the following example, the video size has been validated before uploading and determined whether the video has been uploaded or not.
171+
172+
{% tabs %}
173+
{% highlight cshtml %}
174+
175+
{% include_relative code-snippet/video-restrict.razor %}
176+
177+
{% endhighlight %}
178+
{% endtabs %}
179+
180180
## Replacing video
181181

182182
Once a video file has been inserted, replace it using the Rich Text Editor [RichTextEditorQuickToolbarSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorQuickToolbarSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorQuickToolbarSettings_Audio) `Replace` option. Replace the video file either by using the embedded URL or the web URL and the browse option in the video dialog.

0 commit comments

Comments
 (0)