From 54d3097e9f51784aa4b4710795a5e02c4108f0d2 Mon Sep 17 00:00:00 2001 From: lllggghhhaaa Date: Fri, 10 Feb 2023 23:58:52 -0300 Subject: [PATCH] WaxImageInput added --- README.md | 3 + WaxComponents.Tests/Pages/Index.razor | 2 + WaxComponents.Tests/wwwroot/index.html | 1 + WaxComponents/Utils/JsBinds.cs | 12 ++ WaxComponents/WaxComponents.csproj | 2 +- WaxComponents/WaxImageInput.razor | 5 + WaxComponents/WaxImageInput.razor.cs | 48 +++++++ WaxComponents/WaxImageInput.razor.css | 6 + WaxComponents/wwwroot/Images/upload.svg | 127 ++++++++++++++++++ .../wwwroot/Scripts/waxComponents.js | 10 ++ .../wwwroot/Styles/Themes/lightPink.css | 2 +- 11 files changed, 216 insertions(+), 2 deletions(-) create mode 100644 WaxComponents/Utils/JsBinds.cs create mode 100644 WaxComponents/WaxImageInput.razor create mode 100644 WaxComponents/WaxImageInput.razor.cs create mode 100644 WaxComponents/WaxImageInput.razor.css create mode 100644 WaxComponents/wwwroot/Images/upload.svg create mode 100644 WaxComponents/wwwroot/Scripts/waxComponents.js diff --git a/README.md b/README.md index 63b0de0..510ae7e 100644 --- a/README.md +++ b/README.md @@ -15,6 +15,9 @@ Nuget: https://www.nuget.org/packages/WaxComponents + + + ``` - Importar a biblioteca diff --git a/WaxComponents.Tests/Pages/Index.razor b/WaxComponents.Tests/Pages/Index.razor index cc1f074..86706ba 100644 --- a/WaxComponents.Tests/Pages/Index.razor +++ b/WaxComponents.Tests/Pages/Index.razor @@ -63,6 +63,8 @@ reply all + + @code { private string _text = String.Empty; diff --git a/WaxComponents.Tests/wwwroot/index.html b/WaxComponents.Tests/wwwroot/index.html index fc07b2a..d1ed237 100644 --- a/WaxComponents.Tests/wwwroot/index.html +++ b/WaxComponents.Tests/wwwroot/index.html @@ -28,6 +28,7 @@ 🗙 + diff --git a/WaxComponents/Utils/JsBinds.cs b/WaxComponents/Utils/JsBinds.cs new file mode 100644 index 0000000..6018e3c --- /dev/null +++ b/WaxComponents/Utils/JsBinds.cs @@ -0,0 +1,12 @@ +using Microsoft.JSInterop; + +namespace WaxComponents.Utils; + +public static class JsBinds +{ + public static async void SetImage(this IJSRuntime runtime, Stream stream, string elementId) + { + var dotnetStream = new DotNetStreamReference(stream); + await runtime.InvokeVoidAsync("setImage", elementId, dotnetStream); + } +} \ No newline at end of file diff --git a/WaxComponents/WaxComponents.csproj b/WaxComponents/WaxComponents.csproj index 101ab06..23f1d65 100644 --- a/WaxComponents/WaxComponents.csproj +++ b/WaxComponents/WaxComponents.csproj @@ -4,7 +4,7 @@ net7.0 enable enable - 0.2.5 + 0.2.6 WaxComponents lllggghhhaaa Simple components for blazor, free and opensource diff --git a/WaxComponents/WaxImageInput.razor b/WaxComponents/WaxImageInput.razor new file mode 100644 index 0000000..14b6162 --- /dev/null +++ b/WaxComponents/WaxImageInput.razor @@ -0,0 +1,5 @@ +@using Microsoft.JSInterop +@inject IJSRuntime JSRuntime + + +@Alt \ No newline at end of file diff --git a/WaxComponents/WaxImageInput.razor.cs b/WaxComponents/WaxImageInput.razor.cs new file mode 100644 index 0000000..422a80d --- /dev/null +++ b/WaxComponents/WaxImageInput.razor.cs @@ -0,0 +1,48 @@ +using Microsoft.AspNetCore.Components; +using Microsoft.JSInterop; + +namespace WaxComponents; + +public partial class WaxImageInput : IDisposable +{ + [Parameter] public string Width { get; set; } = "128px"; + + [Parameter] public string Height { get; set; } = "128px"; + [Parameter] public string Alt { get; set; } = String.Empty; + + [Parameter] public string DefaultImageUrl { get; set; } = "_content/WaxComponents/Images/upload.svg"; + + [Parameter] public EventHandler? OnUpload { get; set; } + + public string? Url { get; private set; } + + private ElementReference _inputRef; + private ElementReference _imgRef; + + public async void Click() => await JSRuntime.InvokeVoidAsync("inputClick", _inputRef); + + private async void FileUploaded(ChangeEventArgs args) + { + Url = await JSRuntime.InvokeAsync("setImage", _inputRef, _imgRef); + OnUpload?.Invoke(this, new WaxFileUploadEventArgs(Url)); + } + + public void Dispose() + { + if (Url is not null) + JSRuntime.InvokeVoidAsync("disposeObjectURL", Url); + } +} + +public class WaxFileUploadEventArgs : EventArgs +{ + public readonly string Url; + + public WaxFileUploadEventArgs(string url) => Url = url; + + public async Task DownloadFileAsync() + { + using HttpClient client = new HttpClient(); + return await client.GetStreamAsync(Url); + } +} \ No newline at end of file diff --git a/WaxComponents/WaxImageInput.razor.css b/WaxComponents/WaxImageInput.razor.css new file mode 100644 index 0000000..6038c52 --- /dev/null +++ b/WaxComponents/WaxImageInput.razor.css @@ -0,0 +1,6 @@ +.waxImageInput { + border: 1px solid white; + border-image: var(--component-bg) 1; + + object-fit: scale-down; +} \ No newline at end of file diff --git a/WaxComponents/wwwroot/Images/upload.svg b/WaxComponents/wwwroot/Images/upload.svg new file mode 100644 index 0000000..c18bb31 --- /dev/null +++ b/WaxComponents/wwwroot/Images/upload.svg @@ -0,0 +1,127 @@ + + + + + + + + + + diff --git a/WaxComponents/wwwroot/Scripts/waxComponents.js b/WaxComponents/wwwroot/Scripts/waxComponents.js new file mode 100644 index 0000000..4652cbf --- /dev/null +++ b/WaxComponents/wwwroot/Scripts/waxComponents.js @@ -0,0 +1,10 @@ +window.setImage = async (input, image) => { + const url = URL.createObjectURL(input.files[0]); + image.src = url; + + return url; +} + +window.inputClick = async element => element.click(); + +window.disposeObjectURL = async url => URL.revokeObjectURL(url); \ No newline at end of file diff --git a/WaxComponents/wwwroot/Styles/Themes/lightPink.css b/WaxComponents/wwwroot/Styles/Themes/lightPink.css index 14265a3..95f38bd 100644 --- a/WaxComponents/wwwroot/Styles/Themes/lightPink.css +++ b/WaxComponents/wwwroot/Styles/Themes/lightPink.css @@ -17,5 +17,5 @@ --slider-thumb-color: #ffd3da; --slider-thumb-color-hover: #ffb6c1; --slider-fill-start: rgba(95, 195, 228, .35); - --slider-fill-end: rgba(229, 93, 135, .35) + --slider-fill-end: rgba(229, 93, 135, .35); } \ No newline at end of file