Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/wsdt/blazor_emojifilepicker

Bootstrap Text-Input with Smiley- and File-Support for Blazor.
https://github.com/wsdt/blazor_emojifilepicker

blazor blazor-emojifilepicker bootstrap csharp dropzone emoji emoji-panel file input nuget picker smiley

Last synced: 6 days ago
JSON representation

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

Host: GitHub
URL: https://github.com/wsdt/blazor_emojifilepicker
Owner: wsdt
License: gpl-3.0
Created: 2020-04-30T21:08:57.000Z (over 4 years ago)
Default Branch: master
Last Pushed: 2020-12-26T18:24:53.000Z (almost 4 years ago)
Last Synced: 2024-07-21T20:44:03.028Z (4 months ago)
Topics: blazor, blazor-emojifilepicker, bootstrap, csharp, dropzone, emoji, emoji-panel, file, input, nuget, picker, smiley
Language: HTML
Size: 1.14 MB
Stars: 0
Watchers: 3
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

# Blazor_EmojiFilePicker [![HitCount](http://hits.dwyl.com/wsdt/Blazor_EmojiFilePicker.svg)](http://hits.dwyl.com/wsdt/Blazor_EmojiFilePicker) [![Maintenance](https://img.shields.io/badge/Maintained%3F-no-red.svg)](https://bitbucket.org/lbesson/ansi-colors) [![GitHub license](https://img.shields.io/github/license/wsdt/Blazor_EmojiFilePicker.svg)](https://github.com/wsdt/Blazor_EmojiFilePicker/blob/master/LICENSE) [![Generic badge](https://img.shields.io/badge/Made%20for-Blazor-blueviolet)](https://dotnet.microsoft.com/apps/aspnet/web-apps/blazor) [![Donate](https://img.shields.io/badge/Donate-Pay%20me%20a%20coffee-3cf)](https://github.com/wsdt/Global/wiki/Donation) [![saythanks](https://img.shields.io/badge/say-thanks-ff69b4.svg)](https://saythanks.io/to/kevin.riedl.privat%40gmail.com) [![Codacy Badge](https://api.codacy.com/project/badge/Grade/4b858f0c655241faa186027bcc650b89)](https://app.codacy.com/manual/wsdt/Blazor_EmojiFilePicker?utm_source=github.com&utm_medium=referral&utm_content=wsdt/Blazor_EmojiFilePicker&utm_campaign=Badge_Grade_Dashboard)

Bootstrap Text-Input with Smiley- and File-Support for Blazor. **Fully customizable!**
![Regular Input](https://github.com/wsdt/Blazor_EmojiFilePicker/blob/master/docs/img/InputView.PNG "Regular Input")

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

## Example projects
* [WSDT/RealtimeChat_WebAssembly](https://github.com/wsdt/RealtimeChat_WebAssembly)

## Usage ![Nuget](https://img.shields.io/nuget/v/wsdt.blazor.emojifileinput?style=plastic) ![Nuget](https://img.shields.io/nuget/dt/WSDT.Blazor.EmojiFileInput)
NuGet-Url: [Nuget.org/packages/WSDT.Blazor.EmojiFileInput](https://www.nuget.org/packages/wsdt.blazor.emojifileinput/)

1. `Install-Package WSDT.Blazor.EmojiFileInput`

2. And add to your **Startup.cs**-file:
```csharp
using EmojiPicker;
services.AddEmojiPicker();
```

3. Add the component to your **.razor-View**:
```cshtml
@using WSDT.EmojiFilePicker

```

4. Add parameters and have fun :-)

Attribute
Type
Example
Usage

@bind-Message
string

```csharp
ChatMsg
```

Binds value of input-field to your outer model for validation, form-submission, ...

MessageChanged
EventCallback

```csharp
null
```

Overwrite default onMessageChanged-Callback. Basically just needed for binding.

AddFiles
Action>

```csharp
public void AddFiles(List imgs)
{
foreach (string i in imgs) {
AddToMsg($"");
}

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

```csharp
"/api/v1/file_upload"
```

Defines the local route to save uploaded files.

CancellationToken
CancellationToken

```csharp
new CancellationTokenSource().Token
```

Optional cancellation token for file upload route.

Placeholder
string

```csharp
"Message"
```

Defines the placeholder for your text-input.

AutoComplete
string

```csharp
"on" | "off"
```

Defines whether HTML autocompletion is enabled.

AddonPrepend
string

```csharp
EmojiList.Envelope
```
or
```csharp
"✉"
```

Defines the Prepend-Addon for the bootstrap input.

ShowFilePicker
bool

```csharp
true
```

Should file-picker-Button and Dropzone be enabled?

ShowClearBtn
bool

```csharp
true
```

Displays a regular clear-Btn.

ClearBtnLbl
string

```csharp
"Reset"
```

Label to show on the clear-button.

ShowSubmit
bool

```csharp
true
```

Displays a regular submit-Btn. No callback is required as this component is not nested by a form.

IsSubmitDisabled
bool

```cshtml
@(!ChatService.IsConnected())
```

If Submit-Btn is shown, then this property en- or disables the button.

SubmitBtnLbl
string

```csharp
"Send"
```

Sets the Submit-Label, if the button is shown.

SmileyBtnIcon
string

```csharp
EmojiList.Smiley
```
or
```csharp
"😁"
```

Defines the smiley-button icon.

FileBtnIcon
string

```csharp
EmojiList.Open_File_Folder
```
or
```csharp
"📎"
```

Defines the file-button icon.

CustomSymbols
List<string>

```csharp
new List()
{
"⺀", "⽥", "⽨", "⽣", "㣕"
}
```

Add custom symbols to create a new tab at the end of the emoji picker.

ShowPreview
bool

```csharp
true
```

Will show a markdown & html live-preview of the inputted message, if true.

StyleBtnClearContainer
string

```css
width: 100px;
```

Defines the css-style(s) the clear-btn container.

StyleBtnClear
string

```css
color: #ff0000;
```

Defines the css-style(s) for the clear-btn.

StylePreviewContainer
string

```css
color: #ff0000;
```

Defines the css-style(s) for the message-preview container.

ClassEmojiTabBtnActive
string

```css
btn-dark
```

Defines the css-class(es) for the active tab-button within the emoji-panel.

ClassEmojiTabBtnInActive
string

```css
btn-light
```

Defines the css-class(es) for the inactive tab-buttons within the emoji-panel.

StyleTextInputContainer
string

```css
display:inline-block;width:50px;
```

Defines inline-style for the surrounding div of our text-input.

StyleTextInput
string

```css
background-color:#555;
```

Defines inline-style of our text-input.

StyleFileBtnContainer
string

```css
width:100px;
```

Defines inline-style of the surrounding div of the file-button.

StyleFileBtn
string

```css
color:#fff;
```

Defines inline-style of our file-button.

StyleDropzone
string

```css
background-color:#cc3f00;
```

Defines inline-style of our file-dropzone.

StyleEmojiBtnContainer
string

```css
width:25px;
```

Defines inline-style of the surrounding div of our emoji-button.

StyleEmojiBtn
string

```css
font-size:18px;
```

Defines inline-style of our emoji-button.

StyleEmojiPopoverContainer
string

```css
font-size:18px;
```

Defines inline-style of the surrounding div of our smiley-popover.

StyleBtnSubmitContainer
string

```css
display:inline;text-align:justify;
```

Defines inline-style of the surrounding div of our submit-button.

StyleBtnSubmit
string

```css
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

![Dropzone_Images](https://github.com/wsdt/Blazor_EmojiFilePicker/blob/master/docs/img/Dropzone_Smileys.PNG "Dropzone - Images")

* Supports Smileys via simple Popover

![Emoji_Picker](https://github.com/wsdt/Blazor_EmojiFilePicker/blob/master/docs/img/SmileyPicker.png "Emoji Picker")

## Dependencies
* bootstrap (>= 4.4.1)
* Microsoft.Extensions.DependencyInjection (>= 3.1.3)
* Tewr.Blazor.FileReader (>= 1.5.0.20109)

## Contribution [![Open Source Love svg2](https://badges.frapsoft.com/os/v2/open-source.svg?v=103)](https://github.com/ellerbrock/open-source-badges/) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)

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

**Contributors**
- Kevin Riedl ([WSDT](https://github.com/wsdt))