Blazor_EmojiFilePicker

Bootstrap Text-Input with Smiley- and File-Support for Blazor. Fully customizable!

Not actively maintained, unless I receive a couple of issues :-)

Example projects

• WSDT/RealtimeChat_WebAssembly

Usage

NuGet-Url: Nuget.org/packages/WSDT.Blazor.EmojiFileInput

1. Install-Package WSDT.Blazor.EmojiFileInput

2. And add to your Startup.cs-file:

using EmojiPicker;
services.AddEmojiPicker();

3. Add the component to your .razor-View:

@using WSDT.EmojiFilePicker
<EmojiInput />

4. Add parameters and have fun :-)

Attribute	Type	Example	Usage
@bind-Message	string	ChatMsg	Binds value of input-field to your outer model for validation, form-submission, ...
MessageChanged	EventCallback	null	Overwrite default onMessageChanged-Callback. Basically just needed for binding.
AddFiles	Action>	public void AddFiles(List<string> imgs) { foreach (string i in imgs) { AddToMsg($"<img src='{i}'/>"); } ChatService.Send(); StateHasChanged(); }	Receive the links to uploaded files as List. Files are uploaded to the provided FileUploadRoute. In case you expect images to be uploaded you could e.g. add them to your view.
FileUploadRoute	string	"/api/v1/file_upload"	Defines the local route to save uploaded files.
CancellationToken	CancellationToken	new CancellationTokenSource().Token	Optional cancellation token for file upload route.
Placeholder	string	"Message"	Defines the placeholder for your text-input.
AutoComplete	string	"on" | "off"	Defines whether HTML autocompletion is enabled.
AddonPrepend	string	EmojiList.Envelope or "✉"	Defines the Prepend-Addon for the bootstrap input.
ShowFilePicker	bool	true	Should file-picker-Button and Dropzone be enabled?
ShowClearBtn	bool	true	Displays a regular clear-Btn.
ClearBtnLbl	string	"Reset"	Label to show on the clear-button.
ShowSubmit	bool	true	Displays a regular submit-Btn. No callback is required as this component is not nested by a form.
IsSubmitDisabled	bool	@(!ChatService.IsConnected())	If Submit-Btn is shown, then this property en- or disables the button.
SubmitBtnLbl	string	"Send"	Sets the Submit-Label, if the button is shown.
SmileyBtnIcon	string	EmojiList.Smiley or "😁"	Defines the smiley-button icon.
FileBtnIcon	string	EmojiList.Open_File_Folder or "📎"	Defines the file-button icon.
CustomSymbols	List<string>	new List<string>() { "⺀", "⽥", "⽨", "⽣", "㣕" }	Add custom symbols to create a new tab at the end of the emoji picker.
ShowPreview	bool	true	Will show a markdown & html live-preview of the inputted message, if true.
StyleBtnClearContainer	string	width: 100px;	Defines the css-style(s) the clear-btn container.
StyleBtnClear	string	color: #ff0000;	Defines the css-style(s) for the clear-btn.
StylePreviewContainer	string	color: #ff0000;	Defines the css-style(s) for the message-preview container.
ClassEmojiTabBtnActive	string	btn-dark	Defines the css-class(es) for the active tab-button within the emoji-panel.
ClassEmojiTabBtnInActive	string	btn-light	Defines the css-class(es) for the inactive tab-buttons within the emoji-panel.
StyleTextInputContainer	string	display:inline-block;width:50px;	Defines inline-style for the surrounding div of our text-input.
StyleTextInput	string	background-color:#555;	Defines inline-style of our text-input.
StyleFileBtnContainer	string	width:100px;	Defines inline-style of the surrounding div of the file-button.
StyleFileBtn	string	color:#fff;	Defines inline-style of our file-button.
StyleDropzone	string	background-color:#cc3f00;	Defines inline-style of our file-dropzone.
StyleEmojiBtnContainer	string	width:25px;	Defines inline-style of the surrounding div of our emoji-button.
StyleEmojiBtn	string	font-size:18px;	Defines inline-style of our emoji-button.
StyleEmojiPopoverContainer	string	font-size:18px;	Defines inline-style of the surrounding div of our smiley-popover.
StyleBtnSubmitContainer	string	display:inline;text-align:justify;	Defines inline-style of the surrounding div of our submit-button.
StyleBtnSubmit	string	font-size:10px;	Defines inline-style of our submit-button.

Features

• Configurable (e.g. submit-btn, file-picker, ... can be deactivated)
• Supports File-Uploads (support for multiple files simultaneously) and provides a collapsable dropzone

• Supports Smileys via simple Popover

Dependencies

• bootstrap (>= 4.4.1)
• Microsoft.Extensions.DependencyInjection (>= 3.1.3)
• Tewr.Blazor.FileReader (>= 1.5.0.20109)

Contribution

This project is licensed under GNU V3, so contributions/pull-requests are welcome. All contributors get listed here.

Contributors

• Kevin Riedl (WSDT)