{"id":18715081,"url":"https://github.com/wsdt/blazor_emojifilepicker","last_synced_at":"2026-05-04T10:38:20.040Z","repository":{"id":138254344,"uuid":"260319067","full_name":"wsdt/Blazor_EmojiFilePicker","owner":"wsdt","description":"Bootstrap Text-Input with Smiley- and File-Support for Blazor.","archived":false,"fork":false,"pushed_at":"2020-12-26T18:24:53.000Z","size":1193,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-11-27T13:43:24.750Z","etag":null,"topics":["blazor","blazor-emojifilepicker","bootstrap","csharp","dropzone","emoji","emoji-panel","file","input","nuget","picker","smiley"],"latest_commit_sha":null,"homepage":null,"language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/wsdt.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2020-04-30T21:08:57.000Z","updated_at":"2024-10-11T13:00:41.000Z","dependencies_parsed_at":"2024-01-18T14:41:20.157Z","dependency_job_id":"45118edf-0a4f-49de-9364-d74a3e7be007","html_url":"https://github.com/wsdt/Blazor_EmojiFilePicker","commit_stats":null,"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"purl":"pkg:github/wsdt/Blazor_EmojiFilePicker","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wsdt%2FBlazor_EmojiFilePicker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wsdt%2FBlazor_EmojiFilePicker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wsdt%2FBlazor_EmojiFilePicker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wsdt%2FBlazor_EmojiFilePicker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wsdt","download_url":"https://codeload.github.com/wsdt/Blazor_EmojiFilePicker/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wsdt%2FBlazor_EmojiFilePicker/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32604574,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-04T10:08:07.713Z","status":"ssl_error","status_checked_at":"2026-05-04T10:08:02.005Z","response_time":58,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["blazor","blazor-emojifilepicker","bootstrap","csharp","dropzone","emoji","emoji-panel","file","input","nuget","picker","smiley"],"created_at":"2024-11-07T13:07:29.277Z","updated_at":"2026-05-04T10:38:20.012Z","avatar_url":"https://github.com/wsdt.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"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\u0026utm_medium=referral\u0026utm_content=wsdt/Blazor_EmojiFilePicker\u0026utm_campaign=Badge_Grade_Dashboard)\n\nBootstrap Text-Input with Smiley- and File-Support for Blazor. **Fully customizable!**\n![Regular Input](https://github.com/wsdt/Blazor_EmojiFilePicker/blob/master/docs/img/InputView.PNG \"Regular Input\")\n\n**Not actively maintained, unless I receive a couple of issues :-)**\n\n## Example projects \n* [WSDT/RealtimeChat_WebAssembly](https://github.com/wsdt/RealtimeChat_WebAssembly)\n\n## Usage ![Nuget](https://img.shields.io/nuget/v/wsdt.blazor.emojifileinput?style=plastic) ![Nuget](https://img.shields.io/nuget/dt/WSDT.Blazor.EmojiFileInput)\nNuGet-Url: [Nuget.org/packages/WSDT.Blazor.EmojiFileInput](https://www.nuget.org/packages/wsdt.blazor.emojifileinput/)\n\n1. `Install-Package WSDT.Blazor.EmojiFileInput`\n\n2. And add to your **Startup.cs**-file:\n```csharp\nusing EmojiPicker;\nservices.AddEmojiPicker();\n```\n\n3. Add the component to your **.razor-View**:\n```cshtml\n@using WSDT.EmojiFilePicker\n\u003cEmojiInput /\u003e\n```\n\n4. Add parameters and have fun :-)\n\u003ctable\u003e\n\u003cthead\u003e\n\u003ctr\u003e\n\u003cth\u003eAttribute\u003c/th\u003e\n\u003cth\u003eType\u003c/th\u003e\n\u003cth\u003eExample\u003c/th\u003e\n\u003cth\u003eUsage\u003c/th\u003e\n\u003c/tr\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\n\u003ctr\u003e\n  \u003ctd\u003e@bind-Message\u003c/td\u003e\n\u003ctd\u003estring\u003c/td\u003e\n\u003ctd\u003e\n  \n  ```csharp \n  ChatMsg\n  ```\n  \u003c/td\u003e\n\u003ctd\u003eBinds value of input-field to your outer model for validation, form-submission, ...\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n  \u003ctd\u003eMessageChanged\u003c/td\u003e\n\u003ctd\u003eEventCallback\u003cstring\u003e\u003c/td\u003e\n\u003ctd\u003e\n  \n  ```csharp \n  null\n  ```\n  \u003c/td\u003e\n\u003ctd\u003eOverwrite default onMessageChanged-Callback. Basically just needed for binding.\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n  \u003ctd\u003eAddFiles\u003c/td\u003e\n\u003ctd\u003eAction\u003cList\u003cstring\u003e\u003e\u003c/td\u003e\n\u003ctd\u003e\n  \n```csharp\npublic void AddFiles(List\u003cstring\u003e imgs)\n    {\n        foreach (string i in imgs) {\n            AddToMsg($\"\u003cimg src='{i}'/\u003e\");\n        }\n\n        ChatService.Send();\n        StateHasChanged();\n    }\n```\n\u003c/td\u003e\n\u003ctd\u003eReceive 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.\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eFileUploadRoute\u003c/td\u003e\n\u003ctd\u003estring\u003c/td\u003e\n\u003ctd\u003e\n  \n  ```csharp \n  \"/api/v1/file_upload\"\n  ```\n  \u003c/td\u003e\n\u003ctd\u003eDefines the local route to save uploaded files.\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eCancellationToken\u003c/td\u003e\n\u003ctd\u003eCancellationToken\u003c/td\u003e\n\u003ctd\u003e\n  \n  ```csharp \n  new CancellationTokenSource().Token\n  ```\n  \u003c/td\u003e\n\u003ctd\u003eOptional cancellation token for file upload route.\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003ePlaceholder\u003c/td\u003e\n\u003ctd\u003estring\u003c/td\u003e\n\u003ctd\u003e\n  \n  ```csharp \n  \"Message\"\n  ```\n  \u003c/td\u003e\n\u003ctd\u003eDefines the placeholder for your text-input.\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eAutoComplete\u003c/td\u003e\n\u003ctd\u003estring\u003c/td\u003e\n\u003ctd\u003e\n  \n  ```csharp \n  \"on\" | \"off\"\n  ```\n  \u003c/td\u003e\n\u003ctd\u003eDefines whether HTML autocompletion is enabled.\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eAddonPrepend\u003c/td\u003e\n\u003ctd\u003estring\u003c/td\u003e\n\u003ctd\u003e\n  \n  ```csharp  \n  EmojiList.Envelope\n  ``` \n  or \n  ```csharp \n  \"✉\"\n  ```\n  \u003c/td\u003e\n\u003ctd\u003eDefines the Prepend-Addon for the bootstrap input.\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eShowFilePicker\u003c/td\u003e\n\u003ctd\u003ebool\u003c/td\u003e\n\u003ctd\u003e\n  \n  ```csharp \n  true\n  ```\n  \u003c/td\u003e\n\u003ctd\u003eShould file-picker-Button and Dropzone be enabled?\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eShowClearBtn\u003c/td\u003e\n\u003ctd\u003ebool\u003c/td\u003e\n\u003ctd\u003e \n  \n  ```csharp \n  true\n  ```\n  \u003c/td\u003e\n\u003ctd\u003eDisplays a regular clear-Btn.\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eClearBtnLbl\u003c/td\u003e\n\u003ctd\u003estring\u003c/td\u003e\n\u003ctd\u003e \n  \n  ```csharp \n  \"Reset\"\n  ```\n  \u003c/td\u003e\n\u003ctd\u003eLabel to show on the clear-button.\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eShowSubmit\u003c/td\u003e\n\u003ctd\u003ebool\u003c/td\u003e\n\u003ctd\u003e \n  \n  ```csharp \n  true\n  ```\n  \u003c/td\u003e\n\u003ctd\u003eDisplays a regular submit-Btn. No callback is required as this component is not nested by a form.\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eIsSubmitDisabled\u003c/td\u003e\n\u003ctd\u003ebool\u003c/td\u003e\n\u003ctd\u003e\n  \n  ```cshtml \n  @(!ChatService.IsConnected())\n  ```\n  \u003c/td\u003e\n\u003ctd\u003eIf Submit-Btn is shown, then this property en- or disables the button.\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eSubmitBtnLbl\u003c/td\u003e\n\u003ctd\u003estring\u003c/td\u003e\n\u003ctd\u003e \n  \n  ```csharp \n  \"Send\"\n  ```\n  \u003c/td\u003e\n\u003ctd\u003eSets the Submit-Label, if the button is shown.\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eSmileyBtnIcon\u003c/td\u003e\n\u003ctd\u003estring\u003c/td\u003e\n\u003ctd\u003e\n  \n  ```csharp \n  EmojiList.Smiley\n  ``` \n  or \n  ```csharp \n  \"😁\"\n  ```\n  \u003c/td\u003e\n\u003ctd\u003eDefines the smiley-button icon.\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eFileBtnIcon\u003c/td\u003e\n\u003ctd\u003estring\u003c/td\u003e\n\u003ctd\u003e\n  \n  ```csharp \n  EmojiList.Open_File_Folder\n  ``` \n  or \n  ```csharp \n  \"📎\"\n  ```\n  \u003c/td\u003e\n\u003ctd\u003eDefines the file-button icon.\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\u003ctd\u003eCustomSymbols\u003c/td\u003e\n\u003ctd\u003eList\u0026lt;string\u0026gt;\u003c/td\u003e\n\u003ctd\u003e\n  \n  ```csharp \n  new List\u003cstring\u003e()\n    {\n        \"⺀\", \"⽥\", \"⽨\", \"⽣\", \"㣕\"\n    }\n  ```\n  \u003c/td\u003e\n\u003ctd\u003eAdd custom symbols to create a new tab at the end of the emoji picker.\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\u003ctd\u003eShowPreview\u003c/td\u003e\n\u003ctd\u003ebool\u003c/td\u003e\n\u003ctd\u003e\n  \n  ```csharp \n    true\n  ```\n  \u003c/td\u003e\n\u003ctd\u003eWill show a markdown \u0026 html live-preview of the inputted message, if true.\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\u003ctd\u003eStyleBtnClearContainer\u003c/td\u003e\n\u003ctd\u003estring\u003c/td\u003e\n\u003ctd\u003e\n  \n  ```css\n  width: 100px;\n  ```\n  \u003c/td\u003e\n\u003ctd\u003eDefines the css-style(s) the clear-btn container.\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\u003ctd\u003eStyleBtnClear\u003c/td\u003e\n\u003ctd\u003estring\u003c/td\u003e\n\u003ctd\u003e\n  \n  ```css\n  color: #ff0000;\n  ```\n  \u003c/td\u003e\n\u003ctd\u003eDefines the css-style(s) for the clear-btn.\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\u003ctd\u003eStylePreviewContainer\u003c/td\u003e\n\u003ctd\u003estring\u003c/td\u003e\n\u003ctd\u003e\n  \n  ```css\n  color: #ff0000;\n  ```\n  \u003c/td\u003e\n\u003ctd\u003eDefines the css-style(s) for the message-preview container.\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\u003ctd\u003eClassEmojiTabBtnActive\u003c/td\u003e\n\u003ctd\u003estring\u003c/td\u003e\n\u003ctd\u003e\n  \n  ```css\n  btn-dark\n  ```\n  \u003c/td\u003e\n\u003ctd\u003eDefines the css-class(es) for the active tab-button within the emoji-panel.\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eClassEmojiTabBtnInActive\u003c/td\u003e\n\u003ctd\u003estring\u003c/td\u003e\n\u003ctd\u003e\n  \n  ```css\n  btn-light\n  ```\n  \u003c/td\u003e\n\u003ctd\u003eDefines the css-class(es) for the inactive tab-buttons within the emoji-panel.\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eStyleTextInputContainer\u003c/td\u003e\n\u003ctd\u003estring\u003c/td\u003e\n\u003ctd\u003e\n  \n  ```css\n  display:inline-block;width:50px;\n  ```\n  \u003c/td\u003e\n\u003ctd\u003eDefines inline-style for the surrounding div of our text-input.\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eStyleTextInput\u003c/td\u003e\n\u003ctd\u003estring\u003c/td\u003e\n\u003ctd\u003e\n  \n  ```css \n  background-color:#555; \n  ```\n  \u003c/td\u003e\n\u003ctd\u003eDefines inline-style of our text-input.\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eStyleFileBtnContainer\u003c/td\u003e\n\u003ctd\u003estring\u003c/td\u003e\n\u003ctd\u003e\n  \n  ```css \n  width:100px;\n  ```\n  \u003c/td\u003e\n\u003ctd\u003eDefines inline-style of the surrounding div of the file-button.\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eStyleFileBtn\u003c/td\u003e\n\u003ctd\u003estring\u003c/td\u003e\n\u003ctd\u003e\n  \n  ```css \n  color:#fff;\n  ```\n  \u003c/td\u003e\n\u003ctd\u003eDefines inline-style of our file-button.\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eStyleDropzone\u003c/td\u003e\n\u003ctd\u003estring\u003c/td\u003e\n\u003ctd\u003e\n  \n  ```css \n  background-color:#cc3f00;\n  ```\n  \u003c/td\u003e\n\u003ctd\u003eDefines inline-style of our file-dropzone.\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eStyleEmojiBtnContainer\u003c/td\u003e\n\u003ctd\u003estring\u003c/td\u003e\n\u003ctd\u003e\n  \n  ```css \n  width:25px;\n  ```\n  \u003c/td\u003e\n\u003ctd\u003eDefines inline-style of the surrounding div of our emoji-button.\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eStyleEmojiBtn\u003c/td\u003e\n\u003ctd\u003estring\u003c/td\u003e\n\u003ctd\u003e\n  \n  ```css \n  font-size:18px;\n  ```\n  \u003c/td\u003e\n\u003ctd\u003eDefines inline-style of our emoji-button.\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eStyleEmojiPopoverContainer\u003c/td\u003e\n\u003ctd\u003estring\u003c/td\u003e\n\u003ctd\u003e\n  \n  ```css \n  font-size:18px;\n  ```\n  \u003c/td\u003e\n\u003ctd\u003eDefines inline-style of the surrounding div of our smiley-popover.\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eStyleBtnSubmitContainer\u003c/td\u003e\n\u003ctd\u003estring\u003c/td\u003e\n\u003ctd\u003e\n  \n  ```css \n  display:inline;text-align:justify;\n  ```\n  \u003c/td\u003e\n\u003ctd\u003eDefines inline-style of the surrounding div of our submit-button.\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eStyleBtnSubmit\u003c/td\u003e\n\u003ctd\u003estring\u003c/td\u003e\n\u003ctd\u003e\n  \n  ```css \n  font-size:10px;\n  ```\n  \u003c/td\u003e\n\u003ctd\u003eDefines inline-style of our submit-button.\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\n\n\n## Features\n* Configurable (e.g. submit-btn, file-picker, ... can be deactivated)\n* Supports File-Uploads (support for multiple files simultaneously) and provides a collapsable dropzone\n\n![Dropzone_Images](https://github.com/wsdt/Blazor_EmojiFilePicker/blob/master/docs/img/Dropzone_Smileys.PNG \"Dropzone - Images\")\n\n* Supports Smileys via simple Popover\n\n![Emoji_Picker](https://github.com/wsdt/Blazor_EmojiFilePicker/blob/master/docs/img/SmileyPicker.png \"Emoji Picker\")\n\n## Dependencies\n* bootstrap (\u003e= 4.4.1)\n* Microsoft.Extensions.DependencyInjection (\u003e= 3.1.3)\n* Tewr.Blazor.FileReader (\u003e= 1.5.0.20109)\n\n\n## 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)\n\nThis project is licensed under GNU V3, so contributions/pull-requests are welcome. All contributors get listed here. \n\n**Contributors** \n- Kevin Riedl ([WSDT](https://github.com/wsdt))\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwsdt%2Fblazor_emojifilepicker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwsdt%2Fblazor_emojifilepicker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwsdt%2Fblazor_emojifilepicker/lists"}